九大选择器：
a： 基本选择器： 5
b： 层级选择器： 4
可见选择器：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<body>
<table border="1" align="center">
<tr style="display:none">
<td>Value 1</td>
</tr>
<tr>
<td>Value 2</td>
</tr>
<tr>
<td>Value 3</td>
</tr>
</table>
<script type="text/javascript">
//1)查找隐藏的tr元素的个数
// alert( $("table tr:hidden").size());
//2)查找所有可见的tr元素的个数:
alert($("table tr:visible").size())
</script>
</body>
</html>
属性选择器：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<body>
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
<input type="checkbox" name="newsletter" value="Hot Fuzz"/>
<input id="myID" type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="newsaccept" value="Evil Plans" />
<input type="checkbox" name="letternews" value="Hot Fuzz"/>
<input id="myID" type="checkbox" name="letnewster" value="Cold Fusion" />
<input type="checkbox" name="accNEWSept" value="Evil Plans" />
<script type="text/javascript">
//1)查找所有含有id属性的div元素个数
//alert($("div[id]").size());
//2)查找所有name属性是newsletter的input元素，并将其选中
// alert( $("input[name='newsletter']").size());
// $("input[name='newsletter']").attr("checked","true");
//3)查找所有name属性不是newsletter的input元素，并将其选中
/*
请问：在JS中如下符号表示什么意思
1)=/==/=== :
2)!=/!==
明天讲解
*/
// $("input[name!='newsletter']").attr("checked","checked");
//4)查找所有name属性以'news'开头的input元素，并将其选中
// $("input[name^='news']").attr("checked","checked");
//5)查找所有name属性以'letter'结尾的input元素，并将其选中
// $("input[name$='letter']").attr("checked","checked");
//6)查找所有name属性包含'news'的input元素，并将其选中
//$("input[name*='news']").attr("checked","checked");
//7)找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，并将其选中
$("input[id][name$='letter']").attr("checked","checked");
</script>
</body>
</html>
子元素选择器
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
<ul>
<li>Marry</li>
</ul>
<ul>
<li>jack</li>
</ul>
<script type="text/javascript">
/*1)迭代[each]每个ul中第1个li元素中的内容,索引从1开始
* jquery当中提供了两种遍历方式：
* 方式一： $.each(function (index, currentValue){
*
* });
*
* $.each();形式参数，放的回调函数：
* function(index, currentValue){//index:每一个元素的索引： 当前遍历因素的值：
*
*
* }
*/
/* $("ul li:first-child").each(function(index, curValue){// curValue 对象：
//alert(index+":"+curValue);
//alert(curValue.innerHTML); //js对象调用js的方法：
alert($(curValue).text());
//this: 代表的每一个元素：js对象：
//alert($(this).text());
});*/
/*2)迭代每个ul中最后1个li元素中的内容,索引从1开始
*/
/* $("ul li:last-child").each(function(index, curValue){// curValue 对象：
alert($(curValue).text());
});*/
/*4)迭代每个ul中第2个li元素中的内容,索引从1开始
*/
/* $("ul li:nth-child(2)").each(function(index, curValue){// curValue 对象：
alert($(curValue).text());
});*/
//3)在ul中查找是唯一子元素的li元素的内容
$("ul li:only-child").each(function(index, curValue){// curValue 对象：
alert($(curValue).text());
});
</script>
</body>
</html>
表单选择器：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<body>
<form>
<input type="button" value="Input Button"/><br/>
<input type="checkbox" /><br/>
<input type="file" /><br/>
<input type="hidden" name="id" value="123"/><br/>
<input type="image" src="" width="25px" height="25px"/><br/>
<input type="password" /><br/>
<input type="radio" /><br/>
<input type="reset" /><br/>
<input type="submit" /><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea></textarea><br/>
<button>Button</button><br/>
<!-- * email： 能够自动校验：
tel： 不能自动检验： 能够打开数字键盘：
date： 日期控件： 年月日
dataTime：（不兼容）
datetime-local:使用，兼容各个浏览器：
url： 传递个人网址： 合法的网址， http https“： 能够自动校验：
-->
</form>
<script type="text/javascript">
//1)查找所有input元素的个数
//alert($("input").size());//标签选择器：
//alert($(":input").size());//标签选择器：
//2)查找所有文本框的个数
$(":text").size();
//3)查找所有密码框的个数
$(":password").size();
//4)查找所有单选按钮的个数
$(":radio").size();
//5)查找所有复选框的个数
$(":checkbox").size();
//6)查找所有提交按钮的个数
$(":submit").size();
//7)匹配所有图像域的个数
$(":submit").size();
//8)查找所有重置按钮的个数
$(":reset").size();
//9)查找所有普通按钮的个数
$(":button").size();
//10)查找所有文件域的个数
$(":file").size();
//11)查找所有input元素为隐藏域的个数
/ $(":hidden").size();
</script>
</body>
</html>
表单属性选择器：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<body>
<form>
<input type="text" name="email" disabled="disabled" />
<input type="text" name="password" disabled="disabled" />
<input type="text" name="id" />
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
<select id="provinceID">
<option value="1">广东</option>
<option value="2" selected="selected">湖南</option>
<option value="3">湖北</option>
</select>
</form>
<script type="text/javascript">
//1)查找所有可用的input元素的个数
//alert( $("input:enabled").size() );
//alert($(":input:enabled").size());//select textarea button
//2)查找所有不可用的input元素的个数
//alert( $("input:disabled").size() );
//3)查找所有选中的复选框元素的个数
//alert( $(":checkbox:checked").size() );
//alert($(":checkbox:checked").size());
//4)查找所有未选中的复选框元素的个数
//alert( $(":checkbox:NOT(:checked)").size() );
//alert($(":checkbox:not(:checked)").size());
//5)查找所有选中的选项元素的个数
//alert( $("select option:selected").size() );
//alert( $("#provinceID option:NOT(:selected)").size() );
//获得所有的option：
// $("select option:selected").size();
alert($("#provinceID option:selected").size());
</script>
</body>
<!--
作者：243114797@qq.com
时间：2018-12-04
-->
</html>
API方法：
text();
html(); 文本：带标签：
val();
value属性： 可以使用该方法：
css();
attr();
addClass();
each();
size();获得个数：
length：$对象，数组的长度。
数组的遍历：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
</head>
<body>
<script type="text/javascript">
/*
* $div.each(function(index, currentValue){});
*
* $.each(obj, function(){});
*/
/*用JS语法创建一个一维数组，存入string类型的姓名，再迭代*/
var nameArray = new Array("哈哈","呵呵","嘻嘻","嘿嘿");
/*
* 遍历数组： 使用传统的for循环：
*/
for(var i=0; i<nameArray.length;i++){
document.write(nameArray[i]);
document.write("<br/>");
}
/*
* 使用jquery 提供的方式进行遍历：
* 方式一：
*/
/* $(nameArray).each(function(i,v){
alert(i+":"+v);
})
*/
/*
* 方式二：
* $.each(obj, function(){});
*/
/* $.each(nameArray, function(i,v) {
alert(i+":"+v);
});*/
//使用this对象：
/* $.each(nameArray, function(){
alert(this);
})*/
// var obj={};
// var obj=[{"username":"lis","address":[]},{},{}];
/*用JSON语法创建一个一维数组，存入string类型的姓名，再迭代
var nameArray = ["哈哈","呵呵","嘻嘻","都都"];//js对象
var $nameArray = $(nameArray);//jquery对象
$nameArray.each(function(){
this表示数组中每一个元素，this属性js对象，this代表string类型
alert(this);
});*/
//用JSON语法创建一个一维数组，存入object类型的姓名和薪水，再迭代
var nameArray = [
{
name : "哈哈",
sal : 6000
},
{
name : "嘿嘿",
sal : 7000
},
{
name : "笨笨",
sal : 8000
}
];
//需求： 遍历得到name 和 sal
//创建的数组是一个js对象： 转换成jquery对象：
/* $(nameArray).each(function(index,curValue){
//this： 遍历得到的每一个元素： {}
alert(this.name+": sal:"+this.sal);
});*/
$(nameArray).each(function(index, val){
alert(val.name+" "+val.sal);
});
</script>
</body>
</html>
下面是一堆API方法的使用例子：
https://download.youkuaiyun.com/download/qq_41517071/10828594
扫一扫
335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
