请选择 进入手机版 | 继续访问电脑版

好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
我的账户
好程序员

专注高端IT职业培训

亲爱的猿猿,欢迎!

已有账号,请

如尚未注册?

[HTML5] 好程序员带你认识“jQuery”

[复制链接]
叶子老师 发表于 2019-5-17 15:37:40 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
  好程序员带你认识“jQuery”jQuery是JavaScript的一个类库,$符号它对于jQuery他们是等价的,$(""li)找到所有的li。下面,跟着好程序员的脚步,去了解一下它的选择器的一些主要功能。
  选择器:基本选择器、层级选择器、属性选择器与CSS类似。
  基本筛选器
  $('li:first') //第一个元素
  $('li:last') //最后一个元素
  $("tr:even") //索引为偶数的元素,从 0 开始
  $("trdd") //索引为奇数的元素,从 0 开始
  $("tr:eq(1)") //给定索引值的元素
  $("tr:gt(0)") //大于给定索引值的元素
  $("tr:lt(2)") //小于给定索引值的元素
  $(":focus") //当前获取焦点的元素
  $(":animated") //正在执行动画效果的元素
  first()
  last()
  next() nextAll()
  prev() prevAll()
  siblings 除了自身以外的数
  find() 空格 查找后再元素 find(“p”)
  chilren() 查找子代
  $(“li.box”) 等价于filter
  内容选择器
  $("div:contains('nick')") //包含nick文本的元素
  $("td:empty") //不包含子元素或者文本的空元素
  $("div:has(p)") //含有选择器所匹配的元素
  $("td:parent") //含有子元素或者文本的元素
  表单选择器
  $(":input") //匹配所有 input, textarea, select 和 button 元素
  $(":text") //所有的单行文本框
  $(":password") //所有密码框
  $(":radio") //所有单选按钮
  $(":checkbox") //所有复选框
  $(":submit") //所有提交按钮
  $(":reset") //所有重置按钮
  $(":button") //所有button按钮
  $(":file") //所有文件域
  $("input:checked") //所有选中的元素
  $("select option:selected") //select中所有选中的option元素
  筛选器
  过滤
  $("p").eq(0) //当前操作中第N个jQuery对象,类似索引
  $('li').first() //第一个元素
  $('li').last() //最后一个元素
  $(this).hasClass("test") //元素是否含有某个特定的类,返回布尔值
  $('li').has('ul') //包含特定后代的元素
  查找
  $("div").children() //div中的每个子元素,第一层
  $("div").find("span") //div中的包含的所有span元素,子子孙孙
  $("p").next()    //紧邻p元素后的一个同辈元素
  $("p").nextAll() //p元素之后所有的同辈元素
  $("#test").nextUntil("#test2") //id为"#test"元素之后到id为'#test2'之间所有的同辈元素,掐头去尾
  $("p").prev() //紧邻p元素前的一个同辈元素
  $("p").prevAll() //p元素之前所有的同辈元素
  $("#test").prevUntil("#test2") //id为"#test"元素之前到id为'#test2'之间所有的同辈元素,掐头去尾
  $("p").parent() //每个p元素的父元素
  $("p").parents() //每个p元素的所有祖先元素,body,html
  $("#td1").parentsUntil("#td2") //id为"#td1"元素到id为'#td2'之间所有的父级元素,掐头去尾
  $("div").siblings() //所有的同辈元素,不包括自己
  CSS操作
  样式
  $("p").css("color"); //访问查看p元素的color属性
  $("p").css("color","red"); //设置p元素的color属性为red
  $("p").css({ "color": "red", "background": "yellow" });
  //设置p元素的color为red,background属性为yellow(设置多个属性要用{}字典形式)
好程序员教育官网:http://www.goodprogrammer.org/

精彩内容,一键分享给更多人!
回复

使用道具 举报

您需要登录后才可以回帖

本版积分规则

关注我们
好程序员
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技有限公司 .All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启