Jquery选择器大全汇总
一.选择器
1.三个基本选择器,$("#ID") 、$(".className") 、$("tagName")
2.其他选择器
//html页面
<div class="box">box1</div>
<h1>h1</h1>
<div class="box">box2</div>
<div class="box">box3</div>
<ul>
<li>li11111</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li></li>
<li><span>box2</span></li>
</ul>
<div><li></li></div>
<h1>h1</h1>
<h2>h2</h2>
<input type="hidden" name="" class="box">
<input type="text" name="" class="box">
<div class="box">box</div>
<div class="box" style="display: none;">box</div>
<div title="one">1</div>
<div title="two" class="a">2</div>
<div title="three">3</div>
<div class="box">
<input type="text" name="">
<input type="password" name="">
<input type="radio" name="">
<input type="checkbox" name="">
<input type="submit" name="">
<input type="button" name="">
<input type="file" name="">
<input type="hidden" name="">
<textarea></textarea>
<select >
<option>1</option>
<option>2</option>
</select>
<button>btn</button>
</div>
<script type="text/javascript">
//层级选择器
$("ul li").css("font-size","50px"); //选取ul下的li元素
$("ul li").html("替换内容").css("font-size","50px");
$(".box+h1").css("color","red"); //类名为.box紧挨着的h1元素
$("h1~.box").css("background","yellow"); //选取h1后面所有类名为.box的所有兄弟元素
//过滤选择器
$("ul li:first").css("background","red"); //选取ul下的第一个li
$("ul li:first").css("background","red"); //选取ul下的第一个li
的li,即第二个
的li,即第二个
$("ul li:odd").css("font-size","100px"); //选取ul下的偶数项li
$("ul li:not(.nob)").css("border","3px solid #000"); //选取ul下的li,除开类名为.nob的其他所有项
的li,即前2个
$(":header").css("color","pink"); //选中标题标签,所有h标签都被选中
//内容过滤
$("li:contains(li1)").css("color","red"); //选取li元素,同时文本内容包含li1的
$("li:empty").css({height:100,background:"red"}); //选取li元素,且文本内容为空的
$("li:has(span)").css("border","1px solid green"); //选取嵌套span标签的li元素
$("li:parent").css("background","yellow"); //选取父元素下面含有li标签的父元素
//可见性过滤
$(".box:hidden").css("width","200px"); //注意$符号括号里面没有空格,表示要同时满足2个条件
$(".box:visible").css("background-color","pink"); //选中类名为box的标签,同时要满足是可见的
//属性过滤
$("div[title]").css("background-color","pink"); //从所有div标签选取带属性title的标签
$("div[title=one]").css("color","yellow"); //从所有div标签选取带属性title且值为one的标签
$("div[title][class=a]").css("color","red"); //从所有div标签选取带属性title和带class=a属性值的标签
//子元素过滤
$("li:nth-child(2)").css("background-color","red"); //选取每个父元素下第2个li元素
$("li:nth-child(odd)").css("font-size","50px"); //选取每个父元素下奇数项li元素
$("li:first-child").css("color","blue"); //选取每个父元素下第一个li元素
$("li:only-child").css("font-style","italic"); //选取每个父元素下只有一个li元素的li元素
//表单类型
$(".box :input").css("background-color","pink"); //选取所有input、textarea、select、button元素
$(".box :text").css("font-size","10px"); //选选取所有的单行文本框
$(".box :password").css("font-size","20px"); //选取所有的密码框
$(".box :radio").css("font-size","30px"); //选取所有的单选框
$(".box :checkbox").css("font-size","40px"); //选取所有的多选框
$(".box :submit").css("font-size","50px"); //选取所有提交按钮
$(".box :button").css("font-size","60px"); //选取所有的按钮
$(".box :file").css("font-size","70px"); //选取所有的上传域
$(".box :hidden").css("font-size","80px"); //选取所有不可见元素
</script>
Jquery选择器大全汇总的更多相关文章
- jQuery选择器大全(48个代码片段+21幅图演示)
选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器 的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编 ...
- 转:jQuery选择器大全(48个代码片段+21幅图演示)
选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 ...
- JQuery选择器大全 前端面试送命题:面试题篇 对IOC和DI的通俗理解 c#中关于协变性和逆变性(又叫抗变)帮助理解
JQuery选择器大全 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素 ...
- jquery 选择器大全
jquery 选择器大体上可分为4 类: 1.基本选择器 2.层次选择器 3.过滤选择器 4.表单选择器 其中过滤选择器可以分为: 1.简单过滤选择器 2.内容过滤选择器 3.可见性过滤选择器 4.属 ...
- 你都掌握了吗?jQuery 选择器大全
在 Dom 编程中我们只能使用有限的函数根据 id 或者 TagName 获取 Dom 对象. 然而在 jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, ...
- jquery选择器大全参考
在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象 ...
- jQuery 选择器大全总结
jQuery基础语法中规定的选择器有三种,分别是类选择器.ID选择器.标签选择器.如:$(“.aa”).$(“#id”).$(“div”),但中实际的应用中,DOM机构非常复杂,层级非常多.如和应对这 ...
- Jquery选择器大全、属性操作、css操作、文档、事件等
一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. jQuery对象 jQuery产 ...
- jQuery选择器大全
1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(function () { $('#one ...
随机推荐
- 【PAT甲级】1062 Talent and Virtue (25 分)
题意: 输入三个正整数N,L,H(N<=1E5,L>=60,H<100,H>L),分别代表人数,及格线和高水平线.接着输入N行数据,每行包括一个人的ID,道德数值和才能数值.一 ...
- 【PAT甲级】1056 Mice and Rice (25 分)
题意: 输入两个正整数N和M(<=1000),接着输入两行,每行N个数,第一行为每只老鼠的重量,第二行为每只老鼠出战的顺序.输出它们的名次.(按照出战顺序每M只老鼠分为一组,剩余不足M只为一组, ...
- I/O-<File实例>
File n=new File("D:\2016.txt"); System.out.println("文件是否存在"+n.exists()); System. ...
- 利用 Jenkins 持续集成 iOS 项目,搭建自动化打包环境
---恢复内容开始--- jenkins是一个广泛用于持续构建的可视化web工具,持续构建即各种项目的”自动化”编译.打包.分发部署.jenkins可以很好的支持各种语言(比如:Java, c#, P ...
- 反射实现定位Servlet中的方法
public class BaseServlet extends HttpServlet{ @Override protected void service(HttpServletRequest re ...
- 监控Tomcat状态!(重点)
方法一:开发JAVA监控页面 [root@localhost ~]# mkdir /usr/local/tomcat8/webapps/memtest/[root@localhost ~]# cd / ...
- Python 基础之压缩模块zipfile与tarfile
一.压缩模块 zipfile (1)创建一个zip压缩包 import zipfile #zip_deflated 代表是压缩的意思#打开压缩包zf = zipfile.ZipFile("c ...
- GUI编程与CLI编程
作为一名多年的iOS开发人员,多次触发我思酌“GUI编程与CLI编程”各自的优劣,尤其是在当我为界面交互花费大占比时间时,时常怀疑自己的工作性质,我终究还是为互联网工作的码农,而不是让互联网为我所用的 ...
- xshell编码设置-----支持中文
1. 点击 设置 图标 2. 选择 UTF-8 3. 重启xshell即可
- py related issues
在python中安装包出现Retrying (Retry(total=4, connect=None, read=None, redirect=None, status=None)) pip inst ...