1. 概念：jQuery是一个JavaScript库（框架），他通过封装原生的JavaScript函数得到一整套定义好的方法。jQuery已经集成了JavaScript、CSS、DOM和AJAX于一体的强大功能。
2. 第一个jQuery程序
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button">点击</button> </body> </html> <!-- 引入jQuery库文件 --> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $("button").click(function(){ alert("Hello world!"); }) </script>3. jQuery的代码风格 （1）在jQuery中，不论是页面元素选择、内置的功能函数，都是以"$"开头，"$"作为jQuery对象的缩写形式。
$(function(){}) //执行一个匿名函数 $('#box') //通过id选择器选择 $('#box').css('color','red') //执行功能函数（2）注意：在执行完.css()函数后，最终返回的还是jQuery对象，即可以使用链式编程
$('#box').css('color','red').css('font-size','10px')（3）代码示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button" id="btn">点击</button> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // background：背景颜色 color：字体颜色 $('#btn').css('background','red').css('font-size','50px').css('color','white'); </script>4. jQuery对象和原生DOM对象的互换 （1）方法
1. jQuery --> DOM：jq对象[索引] 或者 jq对象.get(索引) 2. DOM --> jQuery：$(DOM对象)（2）代码示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button" id="btn1">第一个按钮</button> <button type="button" id="btn2">第二个按钮</button> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //1. jquery --> DOM //jquery对象 var jObj = $('#btn1'); jObj.css('background','red'); //DOM对象 var dObj = document.getElementById("btn1"); dObj.style.fontSize = '30px'; //把jquery对象转换成DOM对象 var newDOMObj = jObj.get(0); newDOMObj.style.background = "pink"; //2. DOM --> jquery //DOM对象 var dObj2 = document.getElementById("btn2"); dObj2.style.background = 'red'; //把DOM对象转换成jquery对象 $(dObj2).css("font-size","30px"); </script>5. 选择器 （1）常规选择器
1. 标签选择器：$('html标签')：获取所有div元素的所有DOM对象 2. ID选择器：$('#id')：获取id为xx的DOM对象 3. 类选择器：$('.class')：获取class为xx的所有DOM对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>h1文字</h1> <h1>h1文字</h1> <h1>h1文字</h1> <h1>h1文字</h1> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var h1Arr = $('h1'); //使用jquery提供的一个遍历方法来进行遍历 h1Arr.each(function(index,ele){ if(index % 2 == 0){ $(ele).css('color','pink'); }else{ $(ele).css('color','yellow'); } }) </script>（2）更多选择器：https://blog.csdn.net/nswzr/article/details/107441111
6. DOM和CSS操作 （1）设置元素及内容
1. html()：获取元素中的html内容 2. html(value)：设置元素中的html内容 3. text()：获取元素中的文本内容 4. text()：设置元素中的文本内容 5. val()：获取表单中的文本内容 6. val(value)：设置表单中的文本内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="text" id="myInput" value="zhangsan" name="username" /> <h1 id="h">h1标签</h1> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //1. 获取input的value值 document.write($("#myInput").val()); document.write("<br>"); //2. 给input设置新值 $("#myInput").val("lisi"); //3. 获取h1的html值 document.write($("#h").html()); //h1标签 //4. 设置h1的文本内容 $("#h").text("12345~"); </script>（2）属性值的操作
1. attr(key,value)：设置某个元素key属性的属性值 2. removeAttr(属性名称)：根据属性名删除某个属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1 align="center">h1元素</h1> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $("h1").attr('align','left'); </script>（3）CSS操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="d1"> abc </div> <div id="d2"> efg </div> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //方式1 $("#d1").css('background','red').css('font-size','30px').css('border','1px black solid'); //方式2 $('#d2').css({ 'background':'pink', 'font-size':'20px', 'width':'200px' }) </script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>h1标签</h1> <h1>h1标签</h1> <h1>h1标签</h1> <h1>h1标签</h1> <h1>h1标签</h1> <h1>h1标签</h1> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //index：索引 value：css的属性值 $('h1').css('color',function(index,value){ if(index % 2 == 0){ return 'red'; }else{ return 'pink'; } }) </script>（4）class属性的操作
1. addClass()：添加属性值 2. removeClass()：删除属性值 3. toggleClass()：切换属性值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .d1{ width: 200px; height: 200px; background-color: pink; } .d2{ width: 200px; height: 200px; background-color: yellow; } </style> </head> <body> <div class="d1"> abc </div> <button type="button">切换颜色</button> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('button').click(function(){ $('.d1').toggleClass("d2"); }) </script>（5）节点的操作
1. append()：父元素将子元素追加到末尾 对象1.append(对象2)：将对象2添加到对象1的元素内部，并且在末尾 2. appendTo()： 对象1.appendTo(对象2)：将对象1添加到对象2的元素内部，并且在末尾 3. prepend()：父元素将子元素追加到开头 对象1.prepend(对象2)：将对象2添加到对象1的元素内部，并且在开头 4. prependTo()： 对象1.prependTo(对象2)：将对象1添加到对象2的元素内部，并且在开头 5. after()：添加元素到元素后面 对象1.after(对象2)：将对象2添加到对象1的后面，且对象1和对象2是兄弟关系 6. before()：添加元素到元素前面 对象1.before(对象2)：将对象2添加到对象1的前面，且对象1和对象2是兄弟关系 7. insertAfter()： 对象1.insertAfter(对象2)：将对象2添加到对象1的后面，且对象1和对象2是兄弟关系 8. insertBefore()： 对象1.insertBefore(对象2)：将对象2添加到对象1的前面，且对象1和对象2是兄弟关系 9. remove()：移除元素 对象.remove()：将对象删除掉 10. empty()：清空元素的所有后代元素 对象.empty()：将对象的后代元素全部清空，但是保留当前对象以及其属性特点 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h2>h2标签...</h2> <div id="d1"> abc </div> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /* 1. append()：父元素将子元素追加到末尾 对象1.append(对象2)：将对象2添加到对象1的元素内部，并且在末尾 2. appendTo()： 对象1.appendTo(对象2)：将对象1添加到对象2的元素内部，并且在末尾 */ //创建节点 var h1 = $("<h1>h1标签...</h1>"); $('body').append(h1); //给body添加h1标签 $('h2').appendTo('div'); //将h2标签移至div中 </script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #d1{ width: 500px; height: 500px; border: 1px solid black; } </style> </head> <body> <div id="d1"> <h1>第一个h1标签</h1> <h1>第二个h1标签</h1> </div> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /* 3. prepend()：父元素将子元素追加到开头 对象1.prepend(对象2)：将对象2添加到对象1的元素内部，并且在开头 4. prependTo()： 对象1.prependTo(对象2)：将对象1添加到对象2的元素内部，并且在开头 */ var h2 = $('<h2>h2标签</h2>'); var h3 = $('<h3>h3标签</h3>'); $('#d1').prepend(h2); //将h2放在最前面 h3.prependTo('#d1'); </script>（6）事件的绑定
1. js对象.bind(事件名,处理函数)：绑定事件 2. js对象.unbind()：解绑事件 3. js对象.on()：绑定事件 4. js对象.off()：解绑事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button" id="btn">按钮</button> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //绑定事件，可以使用链式编程 $('button').bind('mouseover',function(){ alert("鼠标来啦！"); }).bind('mouseout',function(){ alert("鼠标溜了~"); }) //解绑事件 $('button').unbind(); //解绑所有事件 </script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button" id="btn">一个按钮</button> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function one(){ alert('111'); } function two(){ alert('222'); } function three(){ alert('333'); } $('button').bind('click',one).bind('click',two).bind('click',three); //移除事件和对应的函数 $('button').unbind('click',one).unbind('click',two); </script>（7）自动触发事件
1. trigger('事件名')：自动触发事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button" id="btn">一个按钮</button> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('button').click(function(){ alert("来了来了~"); }).trigger('click'); </script>7. 动画 （1）显示/隐藏动画
1. show()：显示动画，括号中写时间 2. hide()：隐藏动画，括号中写时间 3. toggle()：切换，括号中写时间 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #d1{ height: 200px; width: 200px; background: pink; } </style> </head> <body> <div id="d1"> </div> <button type="button" id="btn1">显示</button> <button type="button" id="btn2">隐藏</button> <button type="button" id="btn3">切换</button> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('#btn1').click(function(){ $('#d1').show(1000); }) $('#btn2').click(function(){ $('#d1').hide(1000); }) $('#btn3').click(function(){ $('#d1').toggle(1000); }) </script>（2）下拉上卷动画
1. slideUp()：上卷动画，括号中写时间 2. slideDown()：下拉动画，括号中写时间 3. slideToggle()：切换动画，括号中写时间 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #d1{ height: 200px; width: 200px; background: pink; } </style> </head> <body> <div id="d1"> </div> <button type="button" id="btn1">显示</button> <button type="button" id="btn2">隐藏</button> <button type="button" id="btn3">切换</button> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('#btn1').click(function(){ $('#d1').slideDown(1000); }) $('#btn2').click(function(){ $('#d1').slideUp(1000); }) $('#btn3').click(function(){ $('#d1').slideToggle(1000); }) </script>（3）淡入淡出动画
1. fadeOut()：淡出动画，括号中写时间 2. fadeIn()：淡入动画，括号中写时间 3. fadeToggle()：切换动画，括号中写时间 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #d1{ height: 200px; width: 200px; background: pink; } </style> </head> <body> <div id="d1"> </div> <button type="button" id="btn1">显示</button> <button type="button" id="btn2">隐藏</button> <button type="button" id="btn3">切换</button> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('#btn1').click(function(){ $('#d1').fadeIn(1000); }) $('#btn2').click(function(){ $('#d1').fadeOut(1000); }) $('#btn3').click(function(){ $('#d1').fadeToggle(1000); }) </script>