为了账号安全,请及时绑定邮箱和手机立即绑定

jquery各种选择器的用法介绍

标签:
JQuery

如果十八般武艺都融会贯通,如果什么兵器你都耍得有模有样,那么这篇博文你大可以跳过了。只是在忘记的时候,可以拿出来温习温习。


基本概念

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。

简单点一句话概括: Jquery不是一门独立的语言,是javascript的一个类库或框架


各种选择器

1.基本选择器: 

  • $("div")标记选择器

  • $(".div")类别选择器

  • $("#div")id选择器

  • $("*")通用选择器

  • $("div,.nav,#box")组合选择器

2.层次选择器: 

  • $("div p")后代选择器 div里面所有的p

  • $("div>p")子选择器 div里面的下一级p

  • $("div+p")兄弟选择器 下一个兄弟元素,div后面的p

  • $("div~p")div后面所有的兄弟元素,div后面所有的p

3.简单选择器: 

  • $("div:first")找到第一个div

  • $("div:last")找到最后一个div

  • $("div:eq(index)")找到索引位置的div

4.内容选择器: 

  • $("div:contains(文本内容)")找到包含文本内容的div

5.可见性选择器: 

  • $("div:visible")找到所有显示的div元素

  • $("div:hidden")找到所有隐藏的div元素

6.属性选择器: 

  • $("div[align]")具有align这个属性的div

  • $("div[align=right]")具有align这个属性且属性值是right的div

7.表单选择器: 

  • $("div:input")找到div内所有的表单元素

  • $("div:checkbox")找到div内所有的复选框

  • $("div:radio")找到div内所有的表单选框

  • $("div:password")找到div内所有的密码框

  • $("div:text")找到div内所有的文本框

  • $("div:selected")找到div内所有被选中的下拉列表框


过滤选择

  • first()找到第一个元素

  • last()找到最后一个元素

  • eq()找到索引值的元素

  • filter("条件")筛选

  • find()查找后代元素 =$("div p")

  • next()下一个兄弟元素 =$("div+p")

  • nextAll()后面所有的兄弟元素 =$("div~p")

  • prev()前一个元素

  • parent()父元素

  • not()除了...之外的


Jquery操作

1.操作属性: 

  • 对象.attr("属性名") 获取属性的值

  • 对象.attr("属性名","属性值") 设置属性的值 ps:值得一提的是对于部分(radion等)表单元素设置属性值使用prop

  • 对象.removeAttr("属性名") 移除属性

2.操作样式: 

  • addClass()添加样式

  • removeClass()删除样式

  • toggleClass()切换样式

  • 对象.css({"属性名":"属性值","属性名":"属性值"})

3.操作内容: 

  • html()获取/改变非表单元素的其他标签的内容

  • text()获取/改变非表单元素的其他标签的文本内容

  • val()获取/改变表单元素的value值

4.操作宽高: 

  • width()获取/改变元素的宽

  • height()获取/改变元素的高

5.Jquery事件: 

js的事件去掉on就是jquery的事件


Jquery DOM

1.DOM操作: 

  • $("父对象").append("子对象")在父对象里向后追加子对象

  • $("父对象").prepend("子对象")在父对象里向前追加子对象

  • $("父对象").before("子对象")在父对象前面添加子对象

  • $("父对象").after("子对象")在父对象后面添加子对象


Jquery 其它

1.位置: 

  • length() 获取元素的个数/长度

  • size()获取元素的个数/长度

  • index()获取同辈元素的索引位置,返回值是数值,从0开始

  • get()获取索引位置的元素,将jq的对象转成js对象。  

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消