[知了堂学习笔记]_jQuery入门和jQuery的选择器
来源：互联网 发布：android上传图片到php 编辑：程序博客网 时间：2024/05/19 23:54
请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php
1.jQuery是什么
jQuery是一个JavaScript库。
jQuery极大简化了JavaScript操作。
兼容不同浏览器下的语法问题。
2.第一个jQuery实例
body部分:
<body><div></div><div></div></body>css样式：
<style type="text/css"> div{ width: 300px; height: 300px; border: 1px solid red; }</style>jquery部分:
<script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script><script> $(function(){ $("div").hide(2000); });</script>3.jQuery的选择器
选择器目的：如何通过jQuery找到网页中元素
选择器大体语法和css样式选择器语法类似。如：ID选择器，类选择器，标签选择器，层次选择器
3.1基本选择器
3.1.1 ID选择器：$(“#ID”),找到<div id=”d01></div>
3.1.2 类选择器：$(“.name”)，找到<div class=”d01></div>
3.1.3 标签选择器：$(“div”)，找到<div></div>
3.1.4 群组选择器：$(“div,#ID，.name”)，找到多个元素
下面我们来看一些demo来深刻了解一下这些基本的选择器：
body部分：
<body><div id="d01"></div><div></div><div class="d02"></div></body>jquery部分：
<script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script> <script> $(function(){ $("#d01").html("<button>按钮01</button>"); $(".d02").html("<button>按钮02</button>"); $("div").html("<button>按钮03</button>"); $("#d01,.d02").html("<button>按钮04</button>"); });</script>3.2层次选择器
3.2.1选择直接子元素：$(“div>#d01”)
3.2.2选择所有后代子元素：$(“div#d01”)
3.2.3 选择直接兄弟元素：$(“div+#d01”)，直接兄弟元素：紧挨着下一个兄弟元素
3.2.4 选择所有兄弟元素：$(“div~#d01”)，所有兄弟元素：向下找它的所有兄弟元素
下面还是用一个demo来更直观的了解这个层次选择器：
body部分：
<body><div> <input type="text" class="d01"></div><div> <p> <input type="text" class="d01"> </p> <p id="p01"> <input type="text" class="d01"> </p> <p> <input type="text" class="d01"> </p> <p> <input type="text" class="d01"> </p></div></body>jquery部分：
<script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script> <script> $(function(){ //找直接子元素 $("div>.d01").css("background","#99B4D1"); //找所有的后代子元素 $("div .d01").css("background","#99B4D1"); //找直接兄弟元素 $("#p01+p").css("background","#C65151"); //找所有的兄弟元素 $("#p01 ~p").css("background","#C65151"); }); </script>3.3 过滤选择器 $(“div:first”)选取所有<div>元素中第一个<div>元素 $(“div:last”) 选取所有<div>元素中最后一个<div>元素 $(“div:not(.one)”)选取class不是one的<div>元素 $(“div:even”)选取索引是偶数的<div>元素 $(“div:odd”)选取索引是奇数的<div>元素 $(“div:eq(1)”)选取索引为1的<div>元素 $(“div:gt(3)”)选取索引大于3的<div>元素 $(“div:lt(3)”)选取索引小于3的<div>元素 $(“:header”)选取网页中所有的<h1>、<h2>、<h3>… $(“div:animated”)选择正在执行动画的<div>元素
下面我们来看看过滤选择器的demo：
body部分：
<body><p> <button id="btn01"> $("div:first")</button> <button id="btn02"> $("div:not(.one)")</button> <button id="btn03"> $("div:even")</button> <button id="btn04"> $("div:eq(1)")</button> <button id="btn05"> $("div:animated")</button></p><div></div><div class="one"></div><div style="display: none;" class="two"></div></body>css样式：
<style type="text/css"> div{ width: 100px; height: 100px; border: 1px solid black; margin: 10px; } </style>jquery样式：
<script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script> <script> $(function(){ $(".two").show(2000);//显示div $("#btn01").click(function(){ //过滤选择中查找所有div的第一个div $("div:first").css("background","#C65151"); }); $("#btn02").click(function(){ //过滤选择中查找不包含类名是one的div $("div:not(.one)").css("background","#C65151"); }); $("#btn03").click(function(){ //过滤选择，查找索引是偶数的div $("div:even").css("background","#C65151"); }); $("#btn04").click(function(){ //过滤选择，查找索引是1的div $("div:eq(1)").css("background","#C65151"); }); $("#btn05").click(function(){ //过滤选择，查找正在执行动画的div $("div:animated").css("background","#C65151"); }); }); </script>3.4 内容过滤器
$(“div:contains(‘你好’)”):选出含有文本“你好”的<div>元素
$(“div:empty”):选取不包含子元素（包括文本元素）的<div>空元素
$(“div:has(p)”):选取含有<p>元素的<div>元素
$(“div:parent”):选取拥有子元素（包括文本元素）的<div>
同上面一样我们进入一段demo：
body部分：
<body><p> <button id="btn01"> $("div:contains("hello JavaScript")")</button> <button id="btn02"> $("div:empty")</button> <button id="btn03"> $("div:has(p)")</button> <button id="btn04"> $("div:parent")</button></p><div></div><div>hello JavaScript,hello world,hello java</div><div><p></p></div></body>css样式：
</script> <style type="text/css"> div{ width: 100px; height: 100px; border: 1px solid black; margin: 10px; } </style>jquery样式：
<script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script> <script> $(function(){ $("#btn01").click(function(){ //查找div中是否包含指定的内容 $("div:contains('hello JavaScript')").css("background","#99B4D1"); }); $("#btn02").click(function(){ //查找不包含子元素的div $("div:empty").css("background","#99B4D1"); }); $("#btn03").click(function(){ //查找含有p标签的div $("div:has(p)").css("background","#99B4D1"); }); $("#btn04").click(function(){ //查找div是否含有子元素 $("div:parent").css("background","#99B4D1"); }); }); </script>3.5属性过滤选择器 $(“div[id]”)：查找含有id属性的div $(“div[id=other]”)：查找含有id属性，且id属性值为other的div $(“div[id!=other]”)：查找含有id属性，且id属性值不是other的div $(“div[id^=other]”)：查找含有id属性，且id属性值以other开头的div $(“div[id$=other]”)：查找含有id属性，且id属性值以other结尾的div $(“div[id][title]”)：查找含有id属性和title属性的div
属性过滤选择器demo
body部分：
<body><p> <button id="btn01"> $("div[id]")</button> <button id="btn02"> $("div[id=one]")</button> <button id="btn03"> $("div[id!=one]")</button> <button id="btn04"> $("div[id][title]")</button></p><div id="one"></div><div id="two"></div><div id="three" title="three"></div></body>css样式：
<style type="text/css"> div{ width: 100px; height: 100px; border: 1px solid black; margin: 10px; } </style>jquery样式：
<script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script> <script> $(function(){ $("#btn01").click(function(){ //含有id属性的div $("div[id]").css("background","#99B4D1"); }); $("#btn02").click(function(){ //含有id属性是one的div $("div[id=one]").css("background","#99B4D1"); }); $("#btn03").click(function(){ //含有id属性不为one的div $("div[id!=one]").css("background","#99B4D1"); }); $("#btn04").click(function(){ //含有id属性也含有title的div $("div[id][title]").css("background","#99B4D1"); }) })</script>3.5 可见过过滤选择器 $(“div:visible”)：查找可见div $(“div:hidden”)：查找隐藏的div
可见过过滤选择器demo：
body部分：
<body><p> <button id="btn01">$("div:visible")</button> <button id="btn02">$("div:hidden")</button></p><div></div><div style="display: none;"></div></body>css样式：
<style type="text/css"> div{ width: 100px; height: 100px; border: 1px solid black; margin: 10px; } </style>jquery样式：
<script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script> <script> $(function(){ $("#btn01").click(function(){ $("div:visible").css("background","#99B4D1"); }); $("#btn02").click(function(){ $("div:hidden").css("background","#99B4D1").show(); }); });</script>3.6 表单选择器
$(“:input”)$(“:text”)$(“:password”)$(“:checkbox”)$(“:radio”)$(“:submit”)$(“:button”)$(“:file”)$(“:reset”)表单选择器demo：
body部分：
<body><p> <button id="btn01"> $(":text")</button> <button id="btn02"> $(":checkbox")</button> <button id="btn03"> $(":radio")</button> <button id="btn04"> $(":select")</button></p><form id="f01"> <input type="text"> <p> <input type="checkbox"> <input type="checkbox"> </p> <input type="radio" name="r1">java <input type="radio" name="r1">jquery <select> <option>java</option> <option>jquery</option> </select></form></body>jquery样式：
<script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script><script> $(function(){ $("#btn01").click(function(){ $("#f01 :text").css("background","#99B4D1"); }); $("#btn02").click(function(){ $(":checkbox").attr("checked",true);//attr函数是设置元素的属性 }); $("#btn03").click(function(){ $(":radio").each(function(i){ //因为下面的radio有两个，所以需要进行遍历$.each，$("选择器").each() //在遍历的过程中去找到被选中的单选按钮 console.log(i + "======"+this.checked); }); }); });</script>3.7 状态选择器
$(“:checked”)$(“:selected”)状态选择器demo：
body部分：
<body><p> <button id="btn01"> $(":text")</button> <button id="btn02"> $(":checkbox")</button> <button id="btn03"> $(":radio")</button> <button id="btn04"> $(":select")</button> <button id="btn05"> $(":checked")</button> <button id="btn06"> $(":selected")</button></p><form id="f01"> <input type="text"> <p> <input type="checkbox"> <input type="checkbox"> </p> <input type="radio" name="r1">java <input type="radio" name="r1">jquery <select> <option>java</option> <option>jquery</option> </select></form></body>jquery样式：
<script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script><script> $(function(){ $("#btn01").click(function(){ $("#f01 :text").css("background","#99B4D1"); }); $("#btn02").click(function(){ $(":checkbox").attr("checked",true);//attr函数是设置元素的属性 }); $("#btn03").click(function(){ $(":radio").each(function(i){ //因为下面的radio有两个，所以需要进行遍历$.each，$("选择器").each() //在遍历的过程中去找到被选中的单选按钮 console.log(i + "======"+this.checked); }); }); $("#btn05").click(function(){ console.log($(":checked"));//输出一个被选中的元素 $(":checked").attr("checked",false);//让被选中的复选框取消被选中的状态 }); $("#btn06").click(function(){ window.alert($(":selected").text());//jq提供了text()，可以获取文本内容的值 }) });</script>阅读全文
0 0
- [知了堂学习笔记]_jQuery入门和jQuery的选择器
- [知了堂学习笔记]_JQuery选择器
- [知了堂学习笔记]_JQuery入门
- [知了堂学习笔记]_jQuery的事件
- 【知了堂学习笔记】_jQuery基础知识之选择器（一）
- [知了堂学习笔记]_jQuery对DOM的操作
- [知了堂学习笔记]_jQuery 事件参考手册
- [知了堂学习笔记]_jQuery Ajax
- [知了堂学习笔记] jQuery选择器
- [知了堂学习笔记] jQuery的事件
- [知了堂学习笔记]_ js和jquery方法区别
- 【知了堂学习笔记】_Jquery基础知识之DOM操作（二）
- [知了堂学习笔记] JQuery对DOM的操作
- jQuery学习篇(2)_jQuery 选择器
- [知了堂学习笔记] jQuery Ajax
- [知了堂学习笔记]_MyBatis_01入门介绍
- 【知了堂学习笔记】_mybatis入门
- [知了堂学习笔记]_Mybatis入门
- angular（查询、删除、添加、排序）案例
- HR4988是一种便于使用的内部集成了译码器的微步进电机驱动器,单脉冲控制步进电机，节省MCU I/0的驱动IC,兼容A4988 的产品
- HDOJ1406 完数
- C语言实验——整数位
- 数据库存储过程，视图，索引，会话，事务
- [知了堂学习笔记]_jQuery入门和jQuery的选择器
- Ansible的安装、配置及常用模块介绍
- Android 使用opencv实现抠图
- POJ3414-Pots
- 细解spring mvc架构
- oracle入门基础语法
- centos7之RPM安装MySQL5.5.48
- AndroidStudio打jar包（包含META-INF文件）
- u-boot串口和stdio、console初始化及相关操作详解<一>
