【JQuery/整理】筛选器用法小结+JQ追加HTML/获取属性

这篇博客总结了JQuery的选择器用法,包括基本选取、条件筛选、内容筛选和层级筛选。还介绍了如何使用html()、append()、prepend()、after()和before()方法追加HTML内容。此外,讨论了JQuery获取属性的功能。最后,博主分享了对JQuery在前端开发中地位的看法。
摘要由CSDN通过智能技术生成

题图

        大家好呀,好久不见,正所谓一日不见如隔三秋,咱这两个月没见估计都快把小D给忘了哈,额,这个主要怪我啦,这段时间都在赶毕业设计,这不看着快做完了,眼下整理下有关web前台的资料,这回先贴出一部分JQuery相关的用法和小技巧,一来呢方便我查看;二来呢还是惯例,帮助我们后来的朋友,哈哈。

        好了,再多扯淡的话还不如咱干货来得直接,我上网看朋友们的文章也是一样的,实实在在的干货是最讨人喜欢的了,小D马上呈现上来!

JQuery筛选器用法小结

一、选择对象

1.1基本选取方式

1、#id:根据给定的ID匹配一个元素。例如:$("#xxx_id")
2、element:匹配所有给定的元素名的元素。例如:$("div")
3、.class:根据给定的类匹配元素。例如:$(".cls1")
4、*:匹配所有元素。例如:$("*")
5、selector1,selector2,…,selectorN:将每一个选择器匹配到的元素合并后一起返回。例如:$("#xxx_id, div, .cls1")

特殊的,下面是一些表单里面的一些对象选择方法

1.2表单类选取方式

1、:button:匹配所有按钮。例如:$(":button")
2、:checkbox 匹配所有复选框。例如:$(":checkbox")
3、:file 匹配所有文件域。例如:$(":File")
4、:hidden 匹配所有不可见元素,或type属性为hidden的元素。例如:$("input:hidden")
5、:image 匹配所有图像。例如:$(":image")
6、:input 匹配所有 input, textarea, select 和 button 元素。例如:$(":input")
7、:password 匹配所有密码框。例如:$(":password")
8、:radio 匹配所有单选按钮。例如:$(":radio")
9、:reset 匹配所有重置按钮。例如:$(":reset")
10、:submit 匹配所有提交按钮。例如:$(":submit")
11、:text 匹配所有的单行文本框。例如:$(":text")
12、:header 匹配如 h1, h2, h3之类的标题类型的元素。例如:$(":header").css("background", "#000FFF");

二、条件筛选

2.1通过属性筛选

1、[attribute*=value] 匹配给定的属性是以包含某些值的元素。例如:$("input[name*='dark'")
2、[attribute!=value] 匹配所有含有指定的属性,但属性不等于特定值的元素。例如:$(input[name!='dark')
3、[attribute$=value] 匹配给定的属性是以某些值结尾的元素。例如:$("input[name$='dark']")
4、[attribute=value] 匹配给定的属性是某个特定值的元素。例如:$("input[name='dark']")
5、[attribute] 匹配包含给定属性的元素。例如:$("div[id]")
6、[attribute^=value] 匹配给定的属性是以某些值开始的元素。例如:$("input[name^='dark']")
7、[selector1][selector2][selectorN] 的形式可以表示同时满足多个条件。例如:$("input[id][name='dark']")
8、:hidden 匹配所有的不可见元素。例如:$("tr:hidden")
9、:visible 匹配所有的可见元素。例如:$("tr:visible")
10

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值