Jquery基础知识（一）－－选择器

最新推荐文章于 2023-07-20 11:19:09 发布

就不能找个大点的碗吗

最新推荐文章于 2023-07-20 11:19:09 发布

阅读量1.9k

点赞数

分类专栏：前端 jquery 文章标签：前端 query

本文链接：https://blog.csdn.net/qq_39555936/article/details/80952537

版权

前端同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

jquery基础

jquery是一个javascript脚本框架，不需要特别安装，只需要在头标签中，通过script引入jquery库

$(document).ready作用是等页面文档中所有节点都加载完后再执行后续代码

1）jquery对象和dom对象

jquery与dom是不同的

通过dom模型提供的documen.getelementid(“imooc)方法获取dom元素就是一个dom对象

如果是jq的处理方式：
var $p = $(“#imooc”)获取一个$p的jquery对象，$p是一个类数组对象，包含dom对象的信息

发现：

1.通过jquery包装后的对象是一个类数组对象，与dom对象不同。唯一的共同点是都能操作dom

2.通过jquery处理dom，不需要知道dom节点有哪些方法

2）jquery转换成dom对象

var $div = $('div') //jQuery对象

var div = $div[0] //转化成DOM对象

div.style.color = 'red' //操作dom对象的属性

或者利用jq自带的get方法

var $div = $('div') //jQuery对象

var div = $div.get(0) //通过get方法，转化成DOM对象

div.style.color = 'red' //操作dom对象的属性

3)dom对象转换成jquery对象

通过$(参数)

如果参数是dom对象，jqhuiba这个dom对象转换成一个新的jq对象

var div = document.getElementsByTagName('div'); //dom对象

var $div = $(div); //jQuery对象

var $first = $div.first(); //找到第一个div元素

$first.css('color', 'red'); //给第一个元素设置颜色

dom就可以使用jq的方法了

jquey选择器

1）使用id查找

$(“#id”)

注意：id是唯一的，每个id在页面只使用一次，如果分配到相同的id，则选择器会自动选择第一个id

2)类选择器

$(“.class”)

效率较低，但可以多选

内部自带隐式循环处理

3）元素选择器

$(“element”)

搜索元素标签的所有节点，是一个合集操作

如果使用dom的方法查找，需要依次循环赋值

4)全选择器

$(“*”)

id，class，tag均可以通过原生方法得到对应的节点

5)层级选择器

用来处理子元素，后代元素，兄弟元素，相邻元素

解析：

1） $('div > p’)：所有div中的子元素p 意思就是只能是直接的下一层，不能是孙子层

子选择器：选择所有指定“parent”元素中指定的”child"的直接子元素。

2）$('div p’)：所有div中的元素p 可以是儿子，孙子，曾孙子

后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等

以下为同等级的

3）$(".prev + div”)：prev后的第一个兄弟节点

相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素

4）$(".prev ~ div”) ：选择prev后的所有div兄弟节点

一般兄弟选择器：匹配“prev”元素之后的所有兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器

6）基本筛选选择器

$(“.div:first”):class是div的第一个元素

$(“.div:last”)：class是div的最后一个元素

$(“.div:even”)：class是div的偶数倍元素（从0开始）

$(“.div:odd”)：class是div的基数元素

$(“.aaron:eq(2)”)：class是aaron的第二个元素

$(“.aaron:gt(3)”)：class是aaron的索引大于3的元素不包括3

$(“.aaron:lt(2)”)：class是aaron的索引小于2的元素不包括2

$("input:not(:checked) + p”)：input后的p标签但是不能有checked属性

以上所有都是筛选冒号前面的标签元素的条件

7）内容选择器

$(“.div:contains(‘:contains')"):查找文本中包含contains的div

$(“.div:has(span)”)：查找div中包涵span标签的元素

:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素

$(“a:parent”)：查找包含所有包含子元素，或者文本的a标签

$(“a:empty”)：找a下所有的空节点（没有子元素）

8）可见性筛选器

隐藏不仅仅是display：none，还包括隐藏表单

1 CSS display的值是none。

2 type="hidden"的表单元素。

3 宽度和高度都显式设置为0。

4 一个祖先元素是隐藏的，该元素是不会在页面上显示

5 CSS visibility的值是hidden

6 CSS opacity的指是0

$(‘#div1:visible’):选择id是div1的可见元素

$(‘#div3:hidden’)：选择ID是div3的隐藏元素

9）属性筛选选择器

解析：

$(‘div[name=p1]’):查找所有div中那么属性是p1的

$(‘div[p2]')：查找所有div中有属性p2的

$(‘div[name|=“-“]’)：查找所有div中只包含一个“－”的，如果双引号中间的是其他的value则表示，查找所有div中包含value＋“－”的即以value为前缀，后跟一个“－”

$(‘div[name~=“a”]')：查找所有div中name属性值为一个空格＋“a”的

$(‘div[name^=imooc]')：查找所有div中name属性以imooc开头的

$(‘div[name$=imooc]')：查找所有div中name属性以imooc结尾的

$(‘div[name*=“test"]')：查找所有div中那么属性包含test的

$(‘div[testattr!=“true"]')：查找所有div中testattr属性不包含true的

10）子元素筛选选择器

1 :first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)

2 :last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素

3 如果子元素只有一个的话，:first-child与:last-child是同一个

4 :only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配

5 jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的

6 nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算

$('.first-div a:first-child’):查找所有类名为first－div下的第一个a元素

$('.first-div a:last-child’)：查找所有类名为first－div下的最后一个a元素

$('.first-div a:only-child’)：查找类名为first－div的仅有一个子元素的a元素

$('.last-div a:nth-child(2)’)：查找类名为last－div的第二个a元素

$('.last-div a:nth-last-child(2)’)：查找类名为last－div的倒数第二个a元素

11）表单元素选择器

$(‘:input’):选择所有input元素包括text，button之类的

$(‘input:text')：选择所有text元素

$(‘input:password')：选择所有密码元素

$(‘input:radio')：选择所有单选元素

$(‘input:checkbox')：选择所有多选元素

$(‘input:submit')：选择提交元素

$(‘input:image')：选择图像元素

$(‘input:button')：选择按钮元素

$(‘input:file’)：选择文件元素

12）表单对象属性筛选器

$(‘input:enabled')：所有未被禁用的input元素

$(‘input:disabled')：所有已被禁用的input元素

$(‘input:checked’)：input已被勾选的元素（单选或者多选）

$(‘option:selected’)：option中被选择的元素

13）特殊选择器this

this是js中的关键字，指当前上下文对象，就是方法／属性的所有者

dom中的this指的是html元素对象，就是dom元素本身的引用

此处将this指向jq对象

$(this)表示上下文的jq对象，能够调用jq的方法和属性

综合练习：

<dl>

<dd>

<a name="setColor">11.蕾丝连衣裙</a>

<a>12.复古连衣裙</a>

<a>13.印花连衣裙</a>

<a>14.真丝连衣裙</a>

</dd>

</dl>

</div>

<dl>

<dd>

<a>14.POLO衫</a>

</dd>

</dl>

</div>>

</div>

<dl>

<dd>

</dd>

</dl>

</div>

<dl>

<dd>

</dd>

</dl>

</div>>

</div>

//找到男装下第一类衣服中的第一个p元素，并改变颜色

//可以通过子类选择器 p:first-child 筛选出第一个p元素

$('#menu_con .tag dd > p:first-child').css('color','#9932CC');

</script>

//找到男装下第一类衣服把a元素从顺序1-4加上颜色

//可以通过基本筛选器lt,选择匹配集合中所有索引值小于给定index参数的元素

//注意了index是从0开始计算，所以选在1-4,为对应的index就是4

$('#menu_con .tag dd > a:lt(4)').css('color','red');

</script>

//找到男装所有a元素中属性名name="setColor"的元素，并设置颜色

//这里用的属性选择器[attribute='value']选择指定属性是给定值的元素

$('#menu_con dd > a[name="setColor"]').css('color','blue');

</script>

//不分男女，选中第一类衣服中第9个a元素，并改变颜色

//这里用了nth-child 选择的他们所有父元素的第n个子元素

$('.tag a:nth-child(10)').css('color','#66CD00');

</script>

//找到女装下第一类衣服，把a元素中包含文字"更多"的节点，改变颜色

$('#menu_female div.tag a:contains("更多")').css('color','#C71585');

</script>

就不能找个大点的碗吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录