选择器真难用


各种选择器方法


一、jQuery对象

1.jQuery的使用


【1】jQuery 的下载和安装


下载:官网下载jQuery文档


安装:在需要使用jQuery的页面引入jQuery的核心js文件


<script src ="https://code.jquery.com/jquery-2.2.3.js" type ="text/javascript" charset ="utf-8"></script>

$  <==>  jquery -----------代表对jQuery对象的引用,“jQuery” 是核心对象。


2.Dom对象与jQuery包装集对象


【1】dom对象 通过js获取的对象统称为dom对象(document)


返回的是一个标签


js获取一个不存在的元素 ----------------------返回null


【2】通过jQuery方法获取的元素对象


返回的是jQuery包装集


【3】dom对象转为jQuery对象,只需要利用$( )方法进行包装即可


var dom = document.getElementsByTagName(div);


var domtojquery = $(dom);


【4】jQuery对象转为dom对象,取jquery[0]即可


var jquery = $(# mydiv );


var jquerytodom = jquery[0] ;


二、jQuery选择器

【1】选择器本身只是一个有特定语法规则的字符串,没有实质用处


【2】它的基本语法规则使用就是CSS的选择器语法,并对基进行了扩展


【3】只有调用 $() ,并将选择器作为参数传入才能起作用


【4】$(selector)作用:


根据选择器规则在整个文档中查找所有匹配的标签数组,并封装成jQuery


1.基本选择器


id选择器:$("#id的属性值")


类选择器:$(".class的属性值")


标签选择器:$("标签名")


并集选择器:$("选择器1,选择器2")


交集选择器:$("选择器1选择器2")


2.层级选择器


用来查找子孙后代和兄弟


后代选择器:$("选择器1 选择器2")


子选择器:$("选择器1 > 选择器2")


3.属性选择器


属性名称选择器:$("选择器[属性名]")


$("选择器[属性名='值']")


$("选择器[属性名!='值']")


$("选择器[属性名^='值']")


$("选择器[属性名$='值']")


$("选择器[属性名*='值']")


复合属性选择器:$("选择器属性名='值'...")


4.过滤选择器


在原有选择器匹配的元素中进一步进行过滤的选择器


首元素选择器:${选择器:first}


尾元素选择器:${选择器:last}


非元素选择器:${选择器1:not(选择器2)}


偶数选择器:${选择器:even}


奇数选择器:${选择器:odd}


等于索引选择器:${选择器:eq(index)}


大于索引选择器:${选择器:gt(index)}


小于索引选择器:${选择器:lt(index)}


标题选择器:${:header}


5.表单过滤选择器


可用元素选择器:${:enabled}


不可用元素选择器:${:disabled}


6.选中选择器


单复选框:${:checked}


下拉框:${:selected}


7.表单选择器



————————————————

版权声明:本文为CSDN博主「冰镇奶茶」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/m0_57002951/article/details/124514294


«    2025年7月    »
123456
78910111213
14151617181920
21222324252627
28293031
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
搜索
    文章归档
    网站收藏
    友情链接

    Powered By Z-BlogPHP 1.7.4

    周易八字研究笔记 豫ICP备2021017518号-3     豫公网安备41077102000113