1、 jQuery简介
jQuery是一个快速、简洁的JavaScript代码库，极大地简化了 JavaScript 编程。
jQuery 库包含以下特性：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
2、
选择网页元素是jQuery的主要用法，就是"选一个网页元素，在对其进行一些操作"。
使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。
选择表达式可以是CSS选择器：
1 $(document)//选择整个文档对象
2 $('#crows')//选择ID为crows的元素
3 $('div.isJojo')//选择class为 isJojo 的div元素
4 $('input[name=greenday]')//选择name属性等于greenday的input元素
也可以是jQuery特有的表达式：
1 $('a:first')//选择网页中第一个a元素
2 $('#myTable:input')//选择表单中的input元素
3 $('div:gt(2)')//选择所有的div元素，除了前三个
4 $('div:animated')//选择当前处于动画状态的div元素
3、示例
jQuery使用
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//$不是特殊符号，只是1个变量的名称
console.log($==jQuery)
var h1 = document.querySelector('h1')
var h11 = $("h1")
var h12 = jQuery("h1")
console.log(h1)
console.log(h11)
console.log(h12)
</script>
修改DOM元素的内容
//设置和修改HTML的内容
$('h1').html('你..真的..能带来腥风血雨呢');
document.querySelector("h1").innerHTML = " 你..真的..能带来腥风血雨呢 "
//获取DOM对象上的内容,不传参数就是获取内容
var html = $('h1').html()
console.log(html)
修改DOM元素的属性
//设置和修改dom元素的属性
$('img').attr("src","img/katana.jpg")
//获取dom属性的值
var imgSrc = $("img").attr("src")
console.log(imgSrc)
修改DOM元素的样式
注意：属性是由多个单词组成，那么key要用引号引起来，或者使用驼峰命名法，如下所示
//一次性设置多个样式
$(".abc").css({
background:"skyblue",
color:"#fff",
"border-bottom":"10px solid purple",
borderTop:"10px solid yellow"
})
//一次性只设置1个样式
//$(".abc").css("border","10px solid pink")
插入和删除DOM元素
<img src="img/cxk.gif"/>
<h1>-------------------------------------</h1>
<div id="main">
</div>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//可以追加html代码
$('#main').append("<h1>helloworld</h1>")
//可以追加既存在的元素对象
$('#main').append($("img"))
//删除元素
$(".delete").remove()
</script>
添加和删除classname
$('button').click(function(e){
console.log($('.d1').attr("class"))
if($('.d1').attr("class")=="d1"){
$('.d1').addClass("swiper");//添加类名
}else{
$('.d1').removeClass("swiper");//删除类名
}
//$('.d1').addClass("swiper");
//$('.d1').toggleClass("swiper");//切换类名
})
DOM相关的事件
语法：$('css选择器').事件名称(function(事件对象){})
$(".d1").click(function(e){
console.log("1")
})
$(".d1").click(function(e){
console.log("2")
})
$('body').keypress(function(e){
console.log(e)
})
