初学jQuery选择器

1,$(".lists")得到一个类数组

要获取第一个 :$(".lists").eq(0)

2,

var jqDOM="<div>这是添加的jq对象</div>"
$(".ct").append(jqDOM)

3,选择器的书写

基本选择器


图片.png
图片.png
图片.png
图片.png
图片.png
图片.png
图片.png

图片.png

JQ选择器

兄弟元素获取 含义
.next([selector]) 匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
.prev([selector]) 匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
.nextAll([selector]) 获得每个匹配元素集合中每个元素所有后面的同辈元素,选择性筛选的选择器
.prevAll([selector]) 获得每个匹配元素集合中每个元素所有前面的同辈元素,选择性筛选的选择器
.siblings([selectors]) 获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器
父子元素获取 含义
.parent([selector]) 取得匹配元素集合中,每个元素的父元素,可以提供一个可选的选择器
.parents([selector]) 获得集合中每个匹配元素的祖先元素,可以提供一个可选的选择器作为参数
.children([selector]) 获得匹配元素集合中每个元素的子元素,选择器选择性筛选
.find([selector]) 查找符合选择器的后代元素
筛选当前结果集 含义
.first() 获取当前结果集中的第一个对象
.last() 获取当前结果集中的最后一个对象
.filter(selector), .filter(function(index)) 筛选当前结果集中符合条件的对象,条件可以是选择器或函数
.not(selector), .not(function(index)) 从匹配集合中移除指定的元素,和filter相反
.is(selector), is(function(index)), is(dom/jqObj) 判断当前匹配的元素集合中的元素,是否为一个选择器,DOM元素,或者jQuery对象,如果这些元素至少一个匹配给定的参数,那么返回true
.has(selector), .has(dom) 筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素

4,.detach()和remove()

都是删除某个元素
detach()删除元素,保留元素和绑定在它身上的事件
remove()删除元素,只保留元素,不会保留绑定在它身上的事件

5,wrap()和wrapAll()

wrap():给每个元素包裹一层指定的html 如:<div></div>
wrapAll():把所有的元素看成一个整体,这个整体被包裹一个html

a.wrapInner(b):把b包裹在a里面
a.unwrap():把a的包裹层删除

6,

jq选择器选择出来的类数组可以直接使用来绑定事件,不用循环每个元素绑定(或使用事件代理)

//$("li")获取多个li
$("li").on("click",function(){})

7,JQ里面使用this的时候,就算使用JQ来获取的选择器,this也代表选择的这个元素的原生DOM所以需要使用$转换成JQ对象 $(this)

8,jQuery对于新添加的元素也是需要使用事件代理来实现绑定

测试

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,200评论 19 139
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,392评论 0 8
  • 1:jQuery节点创建与属性的处理 创建元素节点:可以有几种方式,后面会慢慢接触。常见的就是直接把这个节点的结构...
    码农小杨阅读 633评论 0 1
  • 第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 852评论 0 8
  • http://www.imooc.com/static/lib/jquery/1.9.1/jquery.js js...
    再见理想冷雨夜阅读 498评论 0 1