JQ笔记02.Jquery选择器

Jquery选择器:类似于CSS选择器。

【代码02.01】

$(“#ID”)用来代替document.getElementById()函数,即通过ID获取元素;

$(“tagName”)用来代替document.getElementsByTagName()函数,即通过标签名获取HTML元素。

使用Jquery获取网页上不存在的元素也不会报错。

 

Jquery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

【代码02.03.1-基本选择器】基本选择器通过元素id、class、标签名等来查找DOM元素。在网页中每个id只能用一次,class可以重复使用。

【代码02.03.2-层次选择器】通过DOM元素之间的层次关系来获取特定元素,如后代元素、子元素、相邻元素、兄弟元素。

注:后两个不常用,因为有相同的简单方法的代替:

扩展:区别nextAll()方法[即$(‘#prev~div’)选择器]和siblings()方法:前者只能选择“#prev”元素后面的同辈<div>元素,后者与前后位置无关。

【过滤选择器】通过特定的过滤规则来筛选出所需的DOM元素,选择器以冒号(:)开头。

【代码02.03.3.1-基本过滤选择器】

【代码02.03.3.2-内容过滤选择器】(主要体现在它所包含的子元素或文本内容上)

【代码02.03.3.3-可见性过滤选择器】(根据元素的可见和不可见状态来选择相应的元素)

[改变所有可见的<div>元素的背景色] $(‘div:visible’).css(“background”,”#CCC”);

[显示隐藏的<div>元素] $(‘div:hidden’).show(3000);

扩充:show()是jquery的方法,用来显示元素。

【代码02.03.3.4-属性过滤选择器】(通过元素的属性来获取相应的元素)

【代码02.03.3.5-子元素过滤选择器】(比较复杂)

【代码02.03.3.6-表单对象属性过滤选择器】(对所选择的表单元素进行过滤)

(详细代码见02.03.3.6,比较重要)

【代码02.03.4-表单选择器】能够很方便的获取到表单的某个或某类型元素

(详细代码见02.03.4,比较重要)

【代码02.04】

使用Jquery快捷的实现下面三个功能:

  1. 给网页中所有的<p>元素添加onclick()事件

  2. 给一个特定的表格隔行换色

  3. 对多选框进行操作,输出选中的多选框的个数

【代码02.06】案例研究——某网站品牌列表的效果(默认显示精简,可以查看全部)

注:本案例比较常用,请重视!

【代码】https://github.com/rxbook/study-jquery-1/tree/master/02.Jquery%E9%80%89%E6%8B%A9%E5%99%A8

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章