【知了堂学习笔记】_jQuery基础知识之选择器（一）
2017-12-08 17:50
916 查看
请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php
1.jQuery是什么
jQuery是一个JavaScriptku
JQuery极大简化了JavaScript操作
兼容不同浏览器下的JavaScript语法问题
2.选择器
基本选择器
ID选择器：$(“#ID”)，为了找到
类选择器：$(“.name”),为了找到
标签选择器$(“div”)，为了找到
群组选择器:$(“div,#ID,.name”)，帮你找到多个元素
层次选择器
选择直接子元素$(“div>#d01”)
选择所有后代子元素$(“div#d01”)
选择直接兄弟元素$(“div+#d01”)
选择所有兄弟元素$(“div~#d01”)
过滤选择器
$(“div:first”)选取所有
$(“div:last”)选取所有的
$(“div:not(.one)”)选取class不是one的
$(“div:even”)选取索引是偶数的
$(“div:odd”)选取索引是奇数的
$(“div:eq(1)”)选取索引为1的
$(“div:gt(3)”)选取索引大于3的
$(“div:lt(3)”)选取索引小于3的
$(“.header”)先去网页中所有的
$(“div:animated”)选取正在执行动画的<
内容过滤器
$(“div:contains(‘你好’)”):选出含有文本你好的
$(“div:empty”):选取不包含子元素（包括文本元素）的
$(“div:has(p)”):选取含有元素的
$(“div:parent”)：选取拥有子元素（包括文本元素）的
属性过滤选择器
$(“div[id]”)查找含有地属性的
$(“div[id=other]”)查找含有id属性，且id属性值为other的
$(“div[id!=other]”)查找含有id属性，且id属性值不是other的
$(“div[id^=other]”)查含有id属性，且id属性值为other开头的
$(“div[id][title]”)查找含有id属性和title属性的
可见过滤器选择器
$(“div:visible”)查找可见的
$(“div:hidden”)查找隐藏的
表单选择器
$(“:input”)
$(“:text”)
$(“:checkbox”)
$(“:password”)
$(“:radio”)
$(“:submit”)
$(“:button”)
$(“:file”)
$(“:reset”)
状态选择器
$(“:checked”)
$(“:selected”)
1.jQuery是什么
jQuery是一个JavaScriptku
JQuery极大简化了JavaScript操作
兼容不同浏览器下的JavaScript语法问题
2.选择器
基本选择器
ID选择器：$(“#ID”)，为了找到
<div id="d01"></div>
类选择器：$(“.name”),为了找到
<div class="d01"></div>
标签选择器$(“div”)，为了找到
<div ></div>
群组选择器:$(“div,#ID,.name”)，帮你找到多个元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="../jquery-2.1.0.js"></script>
<body>
<div id="d01"></div>
<div></div>
<div class="d02"></div>
</body>
</html>
<script>
$(function(){
//id选择器
$("#d01").html("<button>按钮01</button>");//HTML函数和innerHTML类似
//类选择器
$(".d02").html("<button>按钮02</button>");
//标签选择器
$("div").html("<button>按钮03</button>");
//群组选择器
$("#d01,.d02").html("<button>按钮04</button>");
//标签选择器 群组选择器 id选择器与类选择器
})
</script>层次选择器
选择直接子元素$(“div>#d01”)
选择所有后代子元素$(“div#d01”)
选择直接兄弟元素$(“div+#d01”)
选择所有兄弟元素$(“div~#d01”)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery-2.1.0.js"></script>
</head>
<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>
</html>
<script>
$(function(){
//直接后代
$("div >.d01").css("background","#353535");
//所有后代子元素
// $("div .d01").css("background","antiquewhite");
// //直接兄弟元素
$("#p01 + p").css("background","brown");
// //所有的兄弟元素
// $("#p01~p").css("background","darkcyan");
})
</script>过滤选择器
$(“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>元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery-2.1.0.js"></script>
</head>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
}
</style>
<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>
</html>
<script>
$(function(){
$(".two").show(2000);//显示div
$("#btn01").click(function(){
//过滤选择中查找所有div中 的第一恶div
$("div:first").css("background","#008000");
});
$("#btn02").click(function(){
//不包含one的class
$("div:not(.one)").css("background","#353535");
});
$("#btn03").click(function(){
//索引是偶数的div
$("div:even").css("background","antiquewhite");
});
$("#btn04").click(function(){
//索引是1的div
$("div:eq(1)").css("background","#999999");
});
$("#btn05").click(function(){
//索引是正在执行动画的div
$("div:animated").css("background","yellowgreen");
});
});
</script>内容过滤器
$(“div:contains(‘你好’)”):选出含有文本你好的
<div>元素
$(“div:empty”):选取不包含子元素（包括文本元素）的
<div>空元素
$(“div:has(p)”):选取含有元素的
<div>元素
$(“div:parent”)：选取拥有子元素（包括文本元素）的
<div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery-2.1.0.js"></script>
</head>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
}
</style>
<body>
<p>
<button id="btn01">$("div:contains('hello world')")</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 world .hello jqery,hello java</div>
<div ><p></p></div>
</body>
</html>
<script>
$(function(){
$("#btn01").click(function(){
//查找div中指定的包含文本内容
$("div:contains('hello world')").css("background","#008000");
});
$("#btn02").click(function(){
//查找不包含子元素的div
$("div:empty").css("background","#353535");
});
$("#btn03").click(function(){
//含有p标签
$("div:has(p)").css("background","antiquewhite");
});
$("#btn04").click(function(){
//是否含有子元素
$("div:parent").css("background","#CCCCCC");
});
});
</script>属性过滤选择器
$(“div[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][title]”)查找含有id属性和title属性的
<div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery-2.1.0.js"></script>
</head>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
}
</style>
<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>
</html>
<script>
$(function(){
$("#btn01").click(function(){
//含有id属性的div
$("div[id]").css("background","#008000");
});
$("#btn02").click(function(){
//含有地属性是one的div
$("div[id=one]").css("background","#353535");
});
$("#btn03").click(function(){
//含有id属性值不是one的div
$("div[id!=one]").css("background","antiquewhite");
});
$("#btn04").click(function(){
//含id属性也还有title属性的div
$("div[id][title]").css("background","#CCCCCC");
});
});
</script>可见过滤器选择器
$(“div:visible”)查找可见的
<div>
$(“div:hidden”)查找隐藏的
<div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery-2.1.0.js"></script>
</head>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
}
</style>
<body>
<p>
<button id="btn01">$("div:visible")</button>
<button id="btn02">$("div:hidden")</button>
</p>
` <div id="one"></div>
<div style="display: none;"></div>
</body>
</html>
<script>
$(function(){
$("#btn01").click(function(){
//查找可见的div
$("div:visible").css("background","#000000");
});
$("#btn02").click(function(){
//查找不可见的div
$("div:hidden").css("background","#008000").show(2000);
});
});
</script>表单选择器
$(“:input”)
$(“:text”)
$(“:checkbox”)
$(“:password”)
$(“:radio”)
$(“:submit”)
$(“:button”)
$(“:file”)
$(“:reset”)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery-2.1.0.js"></script>
</head>
<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" />java
<input type="checkbox" />Jquery
</p>
<p>
<input type="radio" name="r1" />java
<input type="radio" name="r1" />jQuery
</p>
<select>
<option>java</option>
<option>jQuery</option>
</select>
</form>
</body>
</html>
<script>
$(function(){
$("#btn01").click(function(){
$("#f01 :text").css("background","#008000");
});
$("#btn02").click(function(){
$(":checkbox").attr("checked",true);//attr函数时设置元素的属性
});
$("#btn03").click(function(){
//jQuery如何遍历选择到的元素节点
//下面的radio有两个，需要进行遍历$.each(),$("选择器").each()
//遍历过程中才能找到被选中的单选按钮
$(":radio").each(function(i){
console.log(i+"===="+this.checked);
});
});
$("#btn04").click(function(){
console.log($(":select"));
});
})
</script>状态选择器
$(“:checked”)
$(“:selected”)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery-2.1.0.js"></script>
</head>
<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" />java
<input type="checkbox" />Jquery
</p>
<p>
<input type="radio" name="r1" />java
<input type="radio" name="r1" />jQuery
</p>
<select>
<option>java</option>
<option>jQuery</option>
</select>
</form>
</body>
</html>
<script>
$(function(){
$("#btn01").click(function(){
$("#f01 :text").css("background","#008000");
});
$("#btn02").click(function(){
$(":checkbox").attr("checked",true);//attr函数时设置元素的属性
});
$("#btn03").click(function(){
//jQuery如何遍历选择到的元素节点
//下面的radio有两个，需要进行遍历$.each(),$("选择器").each()
//遍历过程中才能找到被选中的单选按钮
$(":radio").each(function(i){
console.log(i+"===="+this.checked);
});
});
$("#btn04").click(function(){
console.log($(":select"));
});
$("#btn05").click(function(){
console.log($(":checked"));
$(":checked").attr("checked",false);
});
$("#btn06").click(function(){
window.alert($(":selected").text());//jQuery提供了text（） 获取文本内容的值
});
})
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【知了堂学习笔记】_Jquery基础知识之DOM操作（二）
- jQuery学习笔录1（jQuery学习笔记—选择器(1 准备知识)）
- 前端学习笔记--jQuery--基础知识--动画篇
- Jquery基础知识学习笔记
- JQuery学习笔记02-选择器把需要的东西揪出来(基础)
- 前端学习-jQuery学习小笔记（1）——jQ基础以及各种选择器
- jQuery学习笔记 - 基础知识扫盲入门篇
- 【知了堂学习笔记】_JavaScript基础知识之内置对象（三）
- [知了堂学习笔记] jQuery选择器
- jQuery入门基础知识学习笔记
- jQuery学习笔记 - 基础知识扫盲入门篇
- 前端学习笔记--jQuery--基础知识--DOM篇
- [知了堂学习笔记]_JQuery选择器
- jQuery学习笔记（一）——基础选择器、过滤选择器、表单选择器
- jQuery学习笔记之选择器（继基础核心篇）
- jquery基础知识学习笔记
- 【知了堂学习笔记】_Ajax基础知识
- 前端学习笔记--jQuery--基础知识--样式篇
- 前端学习笔记--jQuery--基础知识--事件篇
- JQuery学习笔记——基础知识和数组以及字符串操作