文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

好程序员带你认识“jQuery”

2023-06-03 13:48

关注

  好程序员带你认识“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(设置多个属性要用{}字典形式)

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯