jQuery选择器详解
jQuery学习
jQuery解决的问题
- 兼容性 dom
- 复杂性(ajax)
jQuery基础
jquery的特点：利用选择器(借鉴了css选择器的语法)查找要操作的节点(dom对象)，然后将这些节点封装成一个jquery对象，封装的目的：1是为了兼容不同的浏览器，另外也为了简化代码。通过调 操作。
jQuery的编程步骤
引入jquery框架,www.jquery.org
<script src = "jquery.js">使用选择器查找要操作的节点(该节点会被封装成jquery对象)
var $obj = $('#d1');调用jquery对象的方法或者属性
$obj.css('font-size','60px');- 问题考虑1:jquery对象与dom对象如何相互转换？
- dom对象转换成jquery对象
$(dom对象);-jquery对象转换为dom对象
方式一：$obj.get(0);
方式二：$obj.get()[0];- 问题考虑2：
- 如何同时使用prototype和jquery？conflict.html
- 先导入prototype.js，再导入jquery.js
- 将jquery的$函数换一个名字
var $a = jQuery.noConflict();选择器
什么是选择器jquery模仿css选择器语法提供的一种用来方便查找要操作的节点的查找规则
基本选择器 :s1.html
- #id id属性
- .class class属性值
- element 标签
- selector1,select2..selectn 多个选择器的合并
- /* 所有的（*显示问题）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script>
<script type = "text/javascript">
function f1(){
//jquery选择器查找到了多个dom节点，仍然是封装成一个jquery对象，调用jquery对象的属性或者方法
//，默认情况下，会作用于底层所有的dom节点之上
var $obj = $('.s1');
$obj.css('font-size','60px');
}
function f2(){
//element
$('div').css('font-size','60px');
}
function f3(){
//多个合并
$('#d1,p').css('font-size','60px');
}
function f4(){
//所有的
$('*').css('font-size','60px');
}
</script>
</head>
<body style = "font-size:30px;">
<div id = "d1">hello jquery</div>
<div class = "s1">hello java</div>
<p class = "s1">hello perl</p>
<input type = "button" value = "基本选择器的使用" onclick = "f4();"/>
</body>
</html>层次选择器：s2.html
- 空格 考虑所有后代
- 大于只考虑子节点 >
- +下一个兄弟
- ~ 下面所有的兄弟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script>
<script type = "text/javascript">
function f1(){
//alert($('#d1 div').length);
//根据第一个选择器找到一个节点，再根据要求找到第二个节点
$('#d1 div').css('font-size','80px');
}
function f2(){
//alert($('#d1>div').length);
$('#d3>div').css('font-size','80px');
}
function f3(){
$('#d3+div').css('background-color','green');
}
function f4(){
$('#d2~div').css('background-color','yellow');
}
</script>
</head>
<body style = "font-size:30px;">
<div id = "d1">
<div id = "d2">hello 1</div>
<div id = "d3" style = "width:200px;height:200px;background-color:red;">
<div id = "d4" style = "width:100px;height:100px;background-color:blue;">hello 2</div>
</div>
<div id = "d5">hello 5</div>
</div>
<input type = "button" value = "层次选择器的使用" onclick = "f2();"/>
</body>
</html>过滤选择器：
基本过滤选择器s3.html
- :first
- :last
- :not(#tr2) 排除什么之外
- :even 偶数
- :odd 基数 下标从0开始
- :eq(index) 等于下标
- :gt(index) 大于
- :It(index) 小于
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script>
<script type = "text/javascript">
function f1(){
$('#t1 tr:first').css('background-color','#red');
//岳飞为0行
$('tbody tr:even').css('background-color','green');
$('tbody tr:odd').css('background-color','yellow');
}
function f2(){
$('tbody tr:eq(1)').css('background-color','green');
}
function f3(){
$('tbody tr:not(#tr2)').css('background-color','red');
}
function f4(){
$('tbody tr:eq(2) td:eq(1)').css('background-color','red');
}
</script>
</head>
<body style = "font-size:30px;">
<table id = "t1" border ="1" width = "60%" cellpadding ="0" cellspacing="0">
<thread>
<tr><td>姓名</td><td>年龄</td></tr>
</thread>
<tbody>
<tr><td>岳飞</td><td>33</td></tr>
<tr id = "tr2"><td>赵构</td><td>22</td></tr>
<tr><td>韩世忠</td><td>31</td></tr>
<tr><td>梁红玉</td><td>22</td></tr>
</tbody>
</table>
<input type = "button" value = "点这儿" onclick = "f4();"/>
</body>
</html>内容过滤选择器 s4.html
- :contains(text) 匹配包含给定文本的元素
- :empty 文本既没有元素有没有子节点
- :has 包含标签
- :parent 包含元素和文本，和empty相反
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script>
<script type = "text/javascript">
function f1(){
$('div:contains(吃饭)').css('background-color','red');
}
function f2(){
$('div:empty').css({'width':'400px','height':'80px','border':'2px solid red'});
}
function f3(){
$('div:has(p)').css('background-color','red');
}
function f4(){
$('div:parent').css('background-color','red');
}
</script>
</head>
<body style = "font-size:30px;">
<div id ="d1">吃饭了吗</div>
<div></div>
<div>
<p>一会要下课了</p>
</div>
<input type = "button" value = "点这儿" onclick = "f4();"/>
</body>
</html>可见性过滤选择器 dispaly:none; s5.html
- :hidden 所有不可见元素
- :visible 所有可见元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script>
<script type = "text/javascript">
function f1(){
//$('div:hidden').css('display','block');
//$('div:hidden').show(800);
//隐藏
$('div:visible').hide(800);
}
</script>
</head>
<body style = "font-size:30px;">
<div style = "display:none;">hello jquery</div>
<div>hello jquery</div>
<input type = "button" value = "点这儿" onclick = "f1();"/>
</body>
</html>属性过滤选择器 s6.html
- [attribute]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script>
<script type = "text/javascript">
function f1(){
//$('div[id]').css('background-color','red');
//$('div[id=d1]').css('background-color','red');
$('div[id!=d1]').css('background-color','red');
}
</script>
</head>
<body style = "font-size:30px;">
<div id = "d1">hello jquery</div>
<div >hello jquery</div>
<input type = "button" value = "点这儿" onclick = "f1();"/>
</body>
</html>子元素过滤选择器 s7.html
- :nth-child(index/even/odd) index从1开始
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script>
<script type = "text/javascript">
function f1(){
//$('ul li:eq(1)').css('font-size','80px');
$('ul li:nth-child(2)').css('font-size','60px');
}
</script>
</head>
<body style = "font-size:30px;">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ul>
<li>item111</li>
<li>item222</li>
<li>item333</li>
</ul>
<input type = "button" value = "点这儿" onclick = "f1();"/>
</body>
</html>表单元素选择过滤 s8.html
- :enabled 没有被禁用
- :disabled 被禁用
- :checked 单选框，多选框被选中的
- :selected 下拉列表被选中的选项
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script>
<script type = "text/javascript">
function f1(){
//$('#form1 input:disabled').css('border','1px dotted red');
//$('#form1 input:disabled').attr('disabled',false);//更改属性 true被禁用
$('#form1 input:enabled').attr('disabled',true);
}
function f2(){
$('#form2 input:checked').attr('checked',false);
}
function f3(){
alert($('#form3 option:selected').val());
//$('#form1:text').val();
}
</script>
</head>
<body style = "font-size:30px;">
<form id = "form1">
username:<input name = "username"/><br/>
name:<input name = "name" disabled = "disabled"/><br/>
</form>
<form id="form2">
兴趣爱好：做饭<input type = "checkbox" name = "interest" value = "cooking">
钓鱼<input type = "checkbox" name = "interest" value = "fishing" checked = "checked">
足球<input type = "checkbox" name = "interest" value = "football">
</form>
<form id="form3">
<select>
<option value = "bj">北京</option>
<option value = "cs" selected = "selected">长沙</option>
<option value = "wh">武汉</option>
</select>
</form>
<input type = "button" value = "点这儿" onclick = "f3();"/>
</body>
</html>表达选择器
- :input
- :text
- :psssword
- :radio
- :checkbox
- :submit
- :image
- :reset
- :button
- :file
- :hidden
测试
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script>
<script type = "text/javascript">
function f1(){
$('tbody tr:even').css('background-color','yellow');
$('tbody tr:odd').css('background-color','blue');
}
function f2(){
$('tbody tr:even').css('background-color','white');
$('tbody tr:odd').css('background-color','white');
$('tbody tr:eq(3)').css('background-color','red');
}
function f3(){
$('tbody tr:even').css('background-color','white');
$('tbody tr:odd').css('background-color','white');
$('tbody tr:eq(2) td:eq(1)').css('background-color','red');
}
</script>
</head>
<body style = "font-size:30px;">
<table id = "t1" border ="1" width = "60%" cellpadding ="0" cellspacing="0">
<thread>
<tr><td>姓名</td><td>薪水</td><td>年龄</td></tr>
</thread>
<tbody>
<tr><td>张三</td><td>20000</td><td>23</td></tr>
<tr><td>李四</td><td>22000</td><td>22</td></tr>
<tr><td>王五</td><td>14000</td><td>26</td></tr>
<tr><td>马六</td><td>15000</td><td>21</td></tr>
</tbody>
</table>
<input type = "button" value = "点这儿隔行变颜色" onclick = "f1();"/>
<input type = "button" value = "加亮" onclick = "f2();"/>
<input type = "button" value = "加亮2" onclick = "f3();"/>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
