jQuery基本使用 及选择器
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
jQuery选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //要写jQuery文件必须要有入口 //需要要引入jQuery库， //jQuery入口 //$(document).ready(function(){ // 开始写 jQuery 代码... //}); //$(function(){ // 开始写 jQuery 代码... //}); $(function(){ //基本选择器 //id选择器 以#开头 string类型 var box1=$('#box1'); box1.css('width','500px'); //根据元素标签选择元素 直接写标签名 string类型 var box2=$('div'); box2.css({'border':'1px solid blue','height':'20px'}); //根据class类名选择页面元素 以.开头 string类型 var boxclass=$('.box2'); boxclass.css('border-radius','20px'); //组合标签选择器 可以组合 元素名 id class 不同选择器用英文逗号隔开 var selector=$('a,#box1'); selector.html('组合标签测试'); //层级选择器 //在给定的祖先元素下匹配所有的后代元素 //第一个参数是祖先元素 第二个是需要查找的子元素 中间用空格隔开 var ancetor=$('body a'); ancetor.css('color','red'); //匹配父元素下的子元素 var childs=$('.box2>a').eq(0);//表示选取.box2中的第一个div childs.html('子代元素选择器'); //匹配下一个兄弟元素 两个元素之间使用+隔开 var next=$('#box1+div'); next.css('background','chartreuse'); //匹配所有同辈元素 用~连接 var prev=$('#box1~a'); prev.css('text-decoration','none'); //基本筛选器 //获取第一个元素 ：first var firsts=$('div:first'); firsts.css('background','#0000FF'); //对现在的选择进行反选 var nots=$('div:not(.box2)');//选择div中未包含.box2的元素 nots.css('background','yellow'); //匹配所有索引值为偶数的元素，从 0 开始计数 var evens=$('div:even'); evens.css('height','50px'); //匹配所有索引值为奇数的元素，从 0 开始计数 //用法与上面相似 //匹配一个给定索引值的元素 var eqs=$('div:eq(5)'); eqs.html('匹配一个给定索引值的元素'); //匹配所有大于给定索引值的元素 var gts=$('li:gt(3)');//不包含索引为三的 gts.html('li:gt(3)'); //根据元素内字符的语言进行匹配 var ps=$('p:lang(zh)'); ps.html('这是一个p标签 根据元素内字符的语言进行匹配'); //匹配最后一个元素 var lasts=$('li:last'); lasts.html('这是最后一个元素'); //匹配所有小于给定索引值的元素不包含索引2的 var lts=$('li:lt(2)'); lts.html('这是索引值小于2的'); //匹配如 h1, h2, h3之类的标题元素 var h1s=$('h1:header'); h1s.css('color','red'); //匹配当前获取焦点的元素。:focus //:root选择该文档的根元素。在HTML中，文档的根元素，和$(":root")选择的元素一样， 永远是<html>元素。 $(":root").css("background-color","forestgreen"); //:target如果文档的URI包含一个格式化的标识符，或hash（哈希）， 然后:target选择器将匹配ID和标识符相匹配的元素。 //例如，给定的URI http:/ /example.com/#foo， $( "p:target" )，将选择<p id="foo">元素。 //根据内容选择:contains(text) var cons=$('h1:contains(这是)'); cons.css('border','1px solid red'); //匹配所有不包含子元素或者文本的空元素 :empty var emptys=$('li:empty'); emptys.css('background','royalblue'); //匹配含有选择器所匹配的元素的元素:has(selector) var hass=$('#box2:has(a)'); hass.css('border','1px solid blue'); //匹配含有子元素或者文本的元素:parent var pars=$('div:parent'); pars.css('height','70px'); //:hidden匹配所有不可见元素，或者type为hidden的元素 //:visible匹配所有的可见元素 //匹配包含给定属性的元素 var Divid=$('div[id]');//选中有id的div Divid.css('opacity','0.5'); //[attribute=value]匹配给定的属性是某个特定值的元素 //例；查找name名称为text的元素 var tet=$('input[name="text"]'); tet.val('匹配给定的属性是某个特定值的元素'); //[attribute!=value]匹配所有不含有指定的属性，或者属性不等于特定值的元素。 //与上一个相反 //[attribute^=value]匹配给定的属性是以某些值开始的元素 $("input[name^='t']") //[attribute$=value]匹配给定的属性是以某些值结尾的元素 //与上一个相反 //[attribute*=value]匹配给定的属性是以包含某些值的元素 $("input[name*='e']")//选中name中包含e的元素 //复合属性选择器，需要同时满足多个条件时使用。 $("input[id][name$='t']")//匹配input中含有id属性 并且有name中最后一个是t的元素 //子元素 //:first-child匹配所给选择器( :之前的选择器)的第一个子元素 $("ul li:first-child"); //:first-of-type结构化伪类，匹配E的父元素的第一个E类型的孩子。等价于:nth-of-type(1) 选择器。 //:last-child匹配最后一个子元素 //:last-of-type结构化伪类，匹配E的父元素的最后一个E类型的孩子 //:nth-child匹配其父元素下的第N个子或奇偶元素 //:nth-last-child(n|even|odd|formula)选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。 //:nth-of-type(n|even|odd|formula)选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。 //:only-child如果某个元素是父元素中唯一的子元素，那将会被匹配如果父元素中含有其他元素，那将不会被匹配 //:only-of-type选择所有没有兄弟元素，且具有相同的元素名称的元素。如果父元素有相同的元素名称的其他子元素，那么没有元素会被匹配。 //表单 //:input匹配所有 input, textarea, select 和 button 元素 $(":input"); //:text匹配所有的单行文本框 //:password匹配所有密码框 //:radio匹配所有单选按钮 //:checkbox匹配所有复选框 //:submit匹配所有提交按钮 //:image匹配所有图像域 //:reset匹配所有重置按钮 //:button匹配所有按钮 //:file匹配所有文件域 //表单对象属性 //:enabled匹配所有可用元素 $("input:enabled") //:disabled匹配所有不可用元素 //:checked匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected //:selected匹配所有选中的option元素 //$.escapeSelector(selector)这个方法通常被用在类选择器或者ID选择器中包含一些CSS特殊字符的时候，这个方法基本上与CSS中CSS.escape()方法类似，唯一的区别是jquery中的这个方法支持所有浏览器。 }); </script> </head> <body> <h1>这是一个h1</h1> <div id="box1"></div> <div id="box2" class="box2"><a href="#"></a><span></span></div> <div id="box3" class="box2"></div> <div id="box4" class="box2"></div> <div id="box5" class="box2"></div> <div id="box6" class="box2"></div> <div id="box7" class="box2">匹配含有子元素或者文本的元素:parent</div> <div id="box8" ></div> <a href="#">一个a标签</a> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <p lang="zh"></p> <input type="text" name="text" id="tex"/> </body> </html>