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>
1031
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
