jQuery选择器总结(上)

zhkai 发布于2019-08-21 18:41 / 377人阅读

摘要：基本选择器选择器元素标签选择器类选择器组合选择器复合选择器子元素选择器后代元素选择器紧邻下一个兄弟元素选择器兄弟元素选择器过滤选择器重点第一个选择器获取匹配元素集合中的第一个元素最后一个选择器获取匹配元素集合中最后一个元素挑选下标为偶数的挑

1.基本选择器

$("#id")            //ID选择器
$("div")            //元素(标签)选择器
$(".classname")     //类选择器
$(".classname,.classname1,#id1,div")     //组合选择器

2.复合选择器

$("#id>.classname ")    //子元素选择器
$("#id .classname ")    //后代元素选择器
$("#id + .classname ")    //紧邻下一个兄弟元素选择器
$("#id ~ .classname ")    //兄弟元素选择器

3.1过滤选择器(重点)

$("li:first")    //第一个li  $("选择器:first") 获取匹配元素集合中的第一个元素
$("li:last")     //最后一个li  $("选择器:last") 获取匹配元素集合中最后一个元素
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于4的li
$("li:gt(2)")    //下标大于2的li
$("li:lt(2)")    //下标小于2的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li   

//以上的示例中，li都可以是各种选择器的使用

3.2内容过滤选择器

$("选择器:contains("Runob")")    // 匹配元素中包含 Runob文本的元素
$("选择器:empty")                 //匹配元素中不包含子元素或文本的空元素，也就是说空元素
$("选择器:parent")                //匹配元素中含有子元素或者文本的元素，也就是说不是空元素 
$("选择器:has(selector)")        //匹配元素中含有选择器所匹配的子元素(找匹配元素下面的元素)

3.3是否可见(过滤)选择器

$("selector:hidden")       //匹配所有不可见元素，或type为hidden的元素
$("selector:visible")      //匹配所有可见元素    
 
//上面示例中selector是各类选择器

3.4属性(过滤)选择器

//常用
$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id="123"]")        // id属性值为123的div 元素
$("input[type=text]")    //type属性值为text的所有input元素
$("div[id!="123"]")        // id属性值不等于123的div 元素

//不常用
$("div[id^="qq"]")        // id属性值以qq开头的div 元素
$("div[id$="zz"]")        // id属性值以zz结尾的div 元素
$("div[id*="bb"]")        // id属性值包含bb的div 元素
$("input[id][name$="man"]") //多属性选过滤，同时满足两个属性的条件的元素

//注意：以上属性选择器中属性值的引号可以省略

3.5状态过滤选择器

$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option
$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input

4.表单选择器

$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

笔记出处链接

GPU云服务器云服务器选择器总结 jquery常用选择器 jquery过滤选择器 jquery双向选择器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90720.html

jQuery总结

摘要：是小巧轻量级的函数库。本着写得少，做的多的原则来替代原生代码，选择器为其核心内容。一引入引入方法，注意引入要在代码上。二使用原始书写代码简写如下两种方式注意书写尽量使用原始书写方法，以提高代码读写区分加载。 JQuery是小巧、轻量级的javascript函数库。本着写得少，做的多的原则来替代javascript原生代码，选择器为其核心内容。一、引入JQuery：cdn引入方法，注意：...

CODING 2019-08-23 15:05 评论0 收藏0
jQuery笔记总结篇

摘要：希望在做所有事情之前，操作文档。不受层级限制子选择器在给定的父元素下匹配所有子元素。相邻选择器匹配所有紧接在元素后的元素。判断当前对象中的某个元素是否包含指定类名，包含返回，不包含返回下标过滤器精确选出指定下标元素获取第个元素。原文链接 http://blog.poetries.top/2016... 首先，来了解一下jQuery学习的整体思路 showImg(https://seg...

NoraXie 2019-08-22 10:39 评论0 收藏0
前端知识点总结——JQ

摘要：前端知识点总结什么是第三方的极简化的操作的函数库第三方下载极简化是操作的终极简化个方面增删改查事件绑定动画效果操作学习还是在学，只不过简化了函数库中都是函数，用函数来解决一切问题为什么使用操作的终极简化解决了大部分浏览器兼容性问题凡是让用的前端知识点总结——JQ 1.什么是jQuery: jQuery: 第三方的极简化的DOM操作的函数库第三方: 下载极简化: 是DOM操作的...

jayzou 2019-08-22 14:59 评论0 收藏0
jQuery方法总结大全

摘要：为所有的请求进行全局设置。从中取得一组值，显示出来方法说明显示隐藏的匹配元素。通过高度变化向下增大来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。 Attribute： $(p).addClass(css中定义的样式类型); 给某个元素添加样式 $(img).attr({src:test.jpg,alt:test Image}); 给某个元素添加属性/值，参数是map ...

Coly 2019-08-20 12:09 评论0 收藏0
前端基础入门五（掌握jQuery的常用api，实现动态效果）

摘要：基本概念学习目标学会如何使用，掌握的常用，能够使用实现常见的效果。想要实现简单的动画效果，也很麻烦代码冗余。实现动画非常简单，而且功能更加的强大。注意选择器返回的是对象。 jQuery基本概念学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。为什么要学习jQuery？【01-让div显示与设置内容.html】使用javasc...

nevermind 2019-08-30 15:55 评论0 收藏0