JQuery基础--选择器
使用$("xxx"),返回的是一个jquery的对象,可以调用该对象的各种方法,对其中的DOM对象集合进行操作。
将一个DOM对象放进$()中,目的是为了将DOM对象转化为Jquery对象,从而可以使用jquery中定义的方法。
可以通过jquery的length属性来获取选中的DOM对象元素的个数 $("img").length。
可以通过中括号或者get(i),在$()选中之后的jquery对象集合中,选择第i+1个query对象,将其转化为DOM对象,比如下面的代码
$("li").get(0).innerHTML='demo'
注意:到底是使用DOM的方式解决问题还是使用Jquery中的方法解决问题,可以根据情况而定。
如果项目中有多个框架使用了$符号,或者说无意间使用了$变量,那么在使用$就不会使用Jquery
此时可以使用JQuery关键字来继续使用$,此时JQuery是$的别名。
$() == JQuery()
如果一个元素有多个class属性,并且要同时选中所有的calss属性时,可以采用如下方式:
<div class="cls1 cls2 cls3"></div>
$(".cls1.cls2.cls3")
注意不要写为$(".cls1 .cls2 .cls3"),这个格式表示的层级关系,并不是并列关系。
选择器
基础选择器
层级选择器
基本选择器
内容
属性
子元素
表单
表单属性
层级选择器
$("div1 h1")
$("div1>h1")
$("div1,h1")
$("div1+h1")
$("div1~h1")
基本选择器
$("div:first")
$("div:last")
$("div:not(:first,:last)")
$("div:odd")
$("div:even")
$("div:eq(index)") index从0开始
$("div:gt(index)")
$("div:lt(index)")
内容选择器
$("div:has(p)") 寻找包含p标签的div标签,目标是div标签
$("div:empty") 寻找内容为空的div
$("div:not(:empty)") 寻找内容非空的div
$("div:parent") 匹配含有子元素或者文本的div,注意文本可能是一个空格。
属性选择器
$("div[attr]") 选择有attr属性的div
$("div[attr=val]") 选择有attr属性,并且attr属性值为val的div
$("div[attr^=val]") 选择有attr属性,并且attr属性值以val开始的div
$("div[attr$=val]") 选择有attr属性,并且attr属性值以val结尾的div
$("div[attr*=val]") 选择有attr属性,并且attr属性值包含val子串的div
$("div[attr~=val]") 选择有attr属性,并且attr属性值中以空格分隔,包含val这一项的div
组合一下
$("div[attr1~=val1][attr2=val]") 表示的与,不是或,必须同时满足才行。
子元素选择器
$("div h1:first") 会先找到所有div,然后找到每一个div中的h1,然后在所有的h1中选择第一个,最终只选择一个h1
$("div h1:first-child") 选择每一个div中的第一个h1。如果有多个div,那么就会选择多个div中的h1
$("div h1:last-child") 选择每一个div中的最后一个h1。
$("div h1:nth-child(index)") 先选择所有div,然后再选择每一个div中的第index个元素是h1,那么就选定这些h1
$("div h1:only-child") 选取属于其父元素(div)的唯一子元素的每个h1元素
表单选择器
:input 匹配所有的input、select、button、textarea表单元素。
过滤筛选
first()
eq()
not()
last()
not()
slice(start,end) [start , end)
查找
children()
find()
next()
nextAll()
parent()
prev()
prevAll()
串联
add() $("h1,p") == $("h1").add("p")
andSelf()
updating
相关文章
- jquery ajax步骤,jquery ajax(ajax请求的五个步骤jQuery)
- 我离开jQuery(layui)选择vue[通俗易懂]
- jQuery 工具栏提示插件:qTip
- 生成二维码的 jQuery 插件:jquery.qrcode.js
- jquery基础详解编程语言
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js详解编程语言
- jquery判断css3动画是否完成的方法详解编程语言
- jQuery toggleClass()方法切换class
- Jquery基础学习笔记
- Jquery实战_读书笔记1—选择jQuery
- jQuery改变CSS样式基础代码
- JQuery选择和过滤方法代码总结
- jQuery中的正则表达式分析正则基础
- jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
- jQuery实用基础超详细介绍
- jquery配合css简单实现返回顶部效果
- js阻止冒泡及jquery阻止事件冒泡示例介绍
- 用jquery等比例控制图片宽高的具体实现
- jQuery鼠标经过(hover)事件的延时处理示例
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- jquery+css3打造一款ajax分页插件(自写)
- jquery实现导航固定顶部的效果仿蘑菇街
- 推荐8款jQuery轻量级树形Tree插件
- jQuery修改CSS伪元素属性的方法