jQuery简介
jQuery是JS的工具库，对原生JS中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善,更便捷的方法。
中文网址：jquery123.com
1）引入
先引入jquery文件，才能使用jquery语法
<script src="jquery-1.11.3.js"></script>
2）工厂函数 - $()
"$()"函数用于获取元素节点，创建元素节点或将原生JS对象转换为jquery对象,返回 jQuery 对象。jQuery 对象实际是一个类数组对象，包含了一系列 jQuery 操作的方法。
<!--引入jquery文件--> <script src="jquery-1.11.3.js"></script> <body> <h1 id="d1" class="c1"></h1> <p></p> </body> //$()获取元素节点,需传入字符串的选择器 $("h1") $("#d1") $(".c1") $("body,h1,p") 3）原生JS对象与jQuery对象
原生JS对象与jQuery对象的属性和方法不能混用。可以根据需要，互相转换 :
1 <!--引入jquery文件--> 2 <script src="jquery-1.11.3.js"></script> 3 <script> 4 window.onload = function(){ 5 //使用jquery获取元素节点 6 //$('选择器') 7 console.log($('h1'));//所有h1元素节点全打出来 8 $('h1').html('Python');//所有h1元素节点修改为Python 9 console.log($('h1'[0]));//获取原生js对象 <h1>Python</h1> 10 //原生对象调用原生的方法 11 $('h1')[0].innerHTML = 'hello'; //第一个h1元素节点修改为hello 12 console.log($('h1')[0]) 13 //<h1>jq对象调用jq方法</h1> 14 //eq(index)返回指定下标对应的jq对象 15 console.log($('h1').eq(0)); 16 //<h1>jq对象调用jq方法</h1> 17 $('h1').eq(0).html('jq对象调用jq方法')// 18 console.log(#d1'); //<h1 id="d1">Python</h1> 19 //原生对象转换jquery对象,$(原生)封装 20 $('#d1').html('包装成jquery对象'); 21 console.log('#d1') //<h1 id="d1">包装成jquery对象</h1> 22 } 23 </script> 24 <body> 25 <div> 26 <h1>python</h1> 27 </div> 28 <h1>jquery</h1> 29 <h1>jquery</h1> 30 <h1 id="d1">jquery</h1> 31 <h1>jquery</h1> 32 <h1>jquery</h1> 33 </body> 4）jQuery获取元素
jQuery通过选择器获取元素，$("选择器")
选择器分类 :
1.基础选择器
标签选择器：$("div")
ID 选择器：$("#d1")
类选择器：$(".c1")
群组选择器：$("body,p,h1")
<!--引入jquery文件--> <script src="jquery-1.11.3.js"></script> <script> window.onload = function(){ //1.标签选择器 console.log($('h1').html()); //人生苦短(默认是第一个) //2.id选择器 //css()操作行内样式 $('#d1').css('color','red'); $('#d1').css('text-align','center'); //id=d1 居中红色 } //3.class选择器 $('.c1').css('color','pink'); //.c1类字体粉色 //4.群组选择器 $('body,h1').css('margin','30'); </script> <body> <h1 id="d1" class="c1">人生苦短</h1> <h1 class="c1">我学Python</h1> <div id="box"> <span>div->span</span> <p> <span>p->span</span> </p> <b>测试文本</b> <span>div->span</span> <span>div->span</span> </div> </body> 2.层级选择器
后代选择器： $("div .c1")
子代选择器： $("div>span")
通用兄弟选择器： $("h1~h2") 匹配选择器1后所有满足选择器2的兄弟元素
<!--引入jquery文件--> <script src="jquery-1.11.3.js"></script> <script> window.onload = function(){ //1.后代选择器 $('#box span').css('color','red'); //2.子代选择器 $('#box>span').css('background','green'); //3.相邻兄弟选择器 $('#box p+span').css('border','2px solid black'); $('h1+div').css('border','2px solid black'); //4.通用选择器 $('#box p~span').css('font-size','32px'); $('h1:not(#d1)').css('color','#ff0') } </script> <body> <h1 id="d1" class="c1">人生苦短</h1> <h1 class="c1">我学Python</h1> <div id="box"> <span>div->span</span> <p> <span>p->span</span> </p> <b>测试文本</b> <span>div->span</span> <span>div->span</span> </div> </body> 3.过滤选择器：需要结合其他选择器使用。
:first
匹配第一个元素 例:$("p:first")
:last
匹配最后一个元素 例:$("p:last")
:odd
匹配奇数下标对应的元素
:even
匹配偶数下标对应的元素
:eq(index)
匹配指定下标的元素
:lt(index)
匹配下标小于index的元素
:gt(index)
匹配下标大于index的元素
:not(选择器)
否定筛选,除()中选择器外,其他元素
<head> <meta charset="UTF-8"> <title>Title</title> <!--引入jquery文件--> <script src="jquery-1.11.3.js"></script> </head> <body> <h1 id="d1">过滤选择器</h1> <h1>过滤选择器</h1> <h1>过滤选择器</h1> <h1 class="c1">过滤选择器</h1> <h1 class="c1">过滤选择器</h1> <h1>过滤选择器</h1> <button id="btn1">:first</button> <button id="btn2">:last</button> <button id="btn3">:odd</button> <button id="btn4">:even</button> <button id="btn5">:eq()</button> <button id="btn6">:lt()</button> <button id="btn7">:gt()</button> <button id="btn8">:not()</button> <script> btn1.onclick = function(){ $('h1:first').css('color','red'); } btn2.onclick = function(){ $('h1:last').css('color','green'); } btn3.onclick = function(){ $('h1:odd').css('color','pink'); } btn4.onclick = function(){ $('h1:even').css('color','blue'); } btn5.onclick = function(){ $('h1:eq(3)').css('color','#fa3377'); } btn6.onclick = function(){ $('h1:lt(3)').css('color','#33fa77'); } btn7.onclick = function(){ $('h1:gt(3)').css('color','#3377fa'); } btn8.onclick = function(){ //匹配下标部位3的所有h1 //$('h1:not(:eq(3))').css('color','#999'); $('h1:not(#d1,.c1)').css('color','#ff0') } </script> </body> 4.属性选择器：属性选择器以[ ]为标志.
1. [attrName]
匹配包含指定属性的元素
2. [attrName=value]/[attrName="value"]
匹配属性名=属性值的元素
3. [attrName^=value]
匹配属性值以指定字符开头的元素
4. [attrName$=value]
匹配属性值以指定字符结尾的元素
5. [attrName*=value]
匹配属性值包含指定字符的元素
<head> <meta charset="UTF-8"> <title>Title</title> <!--引入jquery文件--> <script src="jquery-1.11.3.js"></script> </head> <body> <h1>我学Python</h1> <h1 id="d1">人生苦短</h1> <h1 id="d2">从入门到放弃</h1> <h1 id="c3">从放弃到绝望</h1> <h1 id="c4">从放弃到再放弃</h1> <script> console.log($('[id]')); console.log($("[id='d1']")); //id属性值以d开头的元素 console.log($("[id^=d]")); //id属性值以1结尾的元素 console.log($("[id$=1]")); //id属性值包含‘c’的元素 console.log($("[id*=c]")); </script> </body> 5.子元素过滤选择器
:first-child
匹配第一个子元素
:last-child
匹配最后一个子元素
:nth-child(n)
匹配第n个子元素(n从1开始计数)
<head> <meta charset="UTF-8"> <title>Title</title> <!--引入jquery文件--> <script src="jquery-1.11.3.js"></script> </head> <body> <ul> <li>列表项1</li><!--red--> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> </ul> <p>1</p> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> <a href=""></a> </ul> <script> //子元素过滤选择器 //匹配第一个li元素 $('li:first').css('color','red'); //匹配li的第一个子元素(所有li子元素的第一个) $('li:first-child').css('background','green'); //匹配li子元素的最后一个(如果所有li子元素后面还有其他元素，则不算最后一个) $('li:last-child').css('background','black'); //匹配所有li的第二个子元素 $('li:nth-child(2)').css('text-align','center'); </script> </body> 5）操作元素内容
html() //设置或读取标签内容,等价于原生innerHTML,可识别标签语法
text() //设置或读取标签内容,等价于innerText,不能识别标签
6）操作标签属性
注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="jquery-1.11.3.js"></script> <script> /* 创建输入框,按钮和div,按钮点击时 将输入框的值以一级标题的形式显示在div中 */ window.onload = function (){ btn.onclick = function (){ $("div").text("<h1>"+ $("input").val()+"</h1>") //修改输入框的值 //$("input").val("haha"); }; //属性操作 //jquery链式调用,对同一个jquery对象连缀调用不同方法进行操作 $("div").attr("id","box").prop("class","c1") .html("属性操作").css("color","red"); getStatus.onclick = function (){ //获取复选框的选中状态 console.log($("#savePwd").attr("checked")); console.log($("#savePwd").prop("checked")); //移除指定属性 $("#savePwd").removeAttr("checked"); }; }; </script> </head> <body> <input type="text"> <button id="btn">显示</button> <div></div> <input type="checkbox" id="savePwd" checked> <button id="getStatus">获取</button> </body> </html> 7）操作标签样式
removeClass("className")//移除指定的类型,如果参数省略,表示清空class属性值
toggleClass("className")//结合用户行为,实现动态切换类名.如果当前元素存在指定类名,则移除;不存在则添加
JSON对象:常用数据传输格式
语法 :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入jquery文件--> <script src="jquery-1.11.3.js"></script> <style> #d1{ color:red; } .c1{ background:green; } .c2{ text-align:center; } </style> <script> window.onload = function(){ //操作id/class属性对应选择器样式（添加） $('h1').attr('id','d1').attr('class','c1 c2') //后者覆盖 c2覆盖c1 $('h1').attr('id','d1').attr('class','c1').attr('class','c2') //2.直接操作class属性值 $('div').addClass('c1 c2') $('div').addClass('c1').addClass('c2')//无覆盖效果 $('div').addClass('c1').addClass('c2').removeClass('c1') //toggleClass()借用用户行为切换类名，有则删除，无则添加 btn.onclick = function(){ $('div').toggleClass('c1 c2') } //3.操作行内样式 $('div').css('width','200px') $('div').css({ "height":"200px", "border":"1px solid blue" }); $('div').css('height','500px') } </script> </head> <body> <h1>样式设置</h1> <div>直接修改类名</div> <button id="btn">切换</button> </body> </html> 8）根据层级结构获取元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入jquery文件--> <script src="jquery-1.11.3.js"></script> </head> <body> <div id="box"> <b>加粗</b> <span>参考</span> <p> <span>p->span</span> </p> <span>参考</span> <b>加粗</b> </div> <script> //获取父元素 console.log(1,$('p').parent()); //获取祖先元素 console.log(2,$('p').parents(),$('p').parents('#box')); //获取子元素数组 console.log(3,$('div').children(),$('div').children('p')); //获取满足选择器的所有后代元素 console.log(4,$('div').find('span')); //获取 前 后的兄弟元素 console.log(5,$('p').prev(),$('p').next()) //获取所有兄弟元素 console.log(6,$('p').siblings(),$('p').siblings('b')) </script> </body> </html> 9）元素的创建,添加,删除
使用$("标签语法")，返回创建好的元素
div.html("动态创建").attr("id","d1").css("color","red"); //链式调用，设置内容和属性
（1）作为子元素添加
（2）作为兄弟元素添加
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入jquery文件--> <script src="jquery-1.11.3.js"></script> </head> <body> <div id="box"></div> <script> //元素的创建 var h1 = $("<h1 id='d2'>动态创建</h1>") var h2 = $('<h2></h2>') h2.html('二级标题').css('id','d3').attr('class','c2') console.log(1,h1,h2) //添加节点 //作为子元素添加到父元素的头尾位置 $('#box').append(h1);//添加至末尾位置 $('#box').prepend(h2);//添加到开头位置 //作为兄弟元素添加 后 前 $('#box').after(h1).before(h2); /*要求创建h3,h4元素节点，文本内容不限， 作为div头尾子元素添加值页面显示， 再创建两个超链接标签，分别显示在h3以后和h4之前*/ var h4 = $("<h4>四级标题</h4>") var h3 = $("<h3>三级标题</h3>") $('#box').append(h4).prepend(h3); var a1 = $('<a href="">超链接1</a>') var a2 = $('<a href="">超链接2</a>') h3.after(a1); h4.before(a2); //移除元素 h3.remove(); </script> </body> </html> 10）jQuery事件处理
原生JS 方法：window.onload
jQuery:
$(document).ready(function (){
//文档加载完毕后执行
})
$().ready(function (){
//文档加载完毕后执行
})
$(function(){
//文档加载完毕后执行
})
区别：原生onload事件不能重复书写，会产生覆盖问题；jquery中对事件做了优化,可以重复书写ready方法,依次执行
事件名称省略 on 前缀
on("事件名称"，function)
$("div").on("click",function(){});
bind("事件名称",function)
$("div").bind("click",function(){});
事件名作为方法名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入jquery文件--> <script src="jquery-1.11.3.js"></script> <script> $(function(){ $('h1').on('click',function(){ alert('h1被点击') }) $('h2').bind('click',function(){ alert('h2被点击') }) $('h3').click(function(){ alert('h3被点击') }).mouseover(function (){ console.log('mouseover') }).mouseout(function (){ console.log('mouseout') }).css('background','green') //下拉菜单的点击传值 //$('ol li').html('python') 全部修改为python $('ol li').click(function(){ //获取被点击元素的标签内容 // 原生操作， jquery操作 console.log(this.innerHTML,$(this).html()) $('span').html($(this).html()) }) }) </script> </head> <body> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <ul> <li> <span>城市</span> <ol id="d1"> <li>北京</li> <li>上海</li> <li>广州</li> <li>深圳</li> </ol> </li> </ul> </body> </html>