常用基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select id</title>
<!--
作者：1783917640@qq.com
时间：2017-08-10
描述：jQuery 常用基本选择器
-->
<!-- 引入jQuery 库 -->
<script type="text/javascript" src="scripts/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function(){
//获得id选择器，id=“ID”的标签的值
alert($("#ID").val());
//获得普通元素标签的值。由于没有value属性，所以用.html()方法获得标签的值
alert($("a").html());
//获得类选择器class属性为classname的标签的值
alert($(".classname").val());
//获得所有标签的总数<html><head><meta><title><script>
//<script><dody><input><a><input>总共10个
alert($("*").length);// answer:10
//组合查找 input标签两个 ，a 标签一个 ，一共3个
alert($("input,a").length);
});
</script>
</head>
<body>
<input type="text" id="ID" value="根据ID选择"/>
<a>根据元素名称选择</a>
<input type="text" class="classname" value="根据元素CSS类名选择"/>
</body>
</html>
常用常用层次选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用层次选择器</title>
<!--
作者：1783917640@qq.com
时间：2017-08-10
描述：jQuery常用层次选择器测试
-->
<script type="text/javascript" src="scripts/jquery-3.2.1.js"></script>
<script type="text/javascript">
// $(function(){
//
// });
jQuery(document).ready(function(){
//查找id=divText中所有的a标签的个数
// alert($("#divText a").length);
//获得id=divText中所有属于div标签的直接孩子的input标签的总数
// alert($("#divText>input").length);
//使用id=next的元素的之后下一个同辈元素的值
// alert($("#next+input").val());
//使用id=next的元素的之后所有同辈元素的值
alert($("#next~input").length);
});
</script>
</head>
<body>
<div id="divText">
<input type="text" value="通分"/>
<input id="next" type="text"/>
<input type="text" value="VB发生的借款" />
<input type="text" title="学习" value="学习">
<a><input type="text" value="VB发生的航空"/></a>
<a>2<a>3</a></a>
</div>
</body>
</html>
常用基本过滤选择器
<!DOCTYPE html>
<html>
<head>
<!--
作者：1783917640@qq.com
时间：2017-08-10
描述：常用的基本过滤选择器
-->
<meta charset="UTF-8">
<title>常用的基本过滤选择器</title>
<!--
通过script标签引入jQuery库
-->
<script type="text/javascript" src="scripts/jquery-3.2.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
//找出所有li标签的第一个元素进行查询
// alert($("li:first").html());
//找出所有li标签的最后一个元素进行查询
// alert($("li:last").html());
//查询ul标签里的所有不被选中的input元素的个数，以及value值
// alert($("ul input:not(:checked)").length);
// alert($("ul input:not(:checked)").val());
// 注意序号从零开始计数
//将所有序号为偶数的标签的元素拿出来组成jQuery数组
// alert($("li:even").get(1).innerHTML);
//将所有序号为奇数的标签的元素拿出来组成jQuery数组
// alert($("li:odd").get(1).innerHTML);
//获得所有li标签元素中下标为2的元素
// alert($("li:eq(2)").html());
//获得所有li标签元素中下标大于2的元素
// alert($("li:gt(2)").html());
//获得所有li标签元素中下标小于2的元素
// alert($("li:lt(2)").get(1).innerHTML);
// alert($("li:lt(3)").length);
//获得所有h标签的长度
alert($(":header").length);
});
//jQuery 脚本的另外一种书写形式
// $(function({
// });
</script>
</head>
<body>
<div id="divText">
<ul>
<li>投资</li>
<li>理财</li>
<li>学习</li>
<li>上进</li>
<input type="radio" value="不学习" checked="checked"/>
不学习
<input type="radio" value="学习"/>
学习
<h1>header 1</h1>
<h2>header 2</h2>
</ul>
</div>
</body>
</html>
常用基本内容过滤选择器以及可见性过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用基本内容过滤选择器以及可见性过滤选择器</title>
<!--
作者：1783917640@qq.com
时间：2017-08-10
描述：常用基本内容过滤选择器以及可见性过滤选择器用法的测试
-->
<!-- 引入jQuery库-->
<script type="text/javascript" src="scripts/jquery-3.2.1.js"></script>
<!-- javascript脚本-->
<script type"tex/javascriptt">
// jQuery(document).ready(function(){
//
// });
$(function(){
//查找所有<li>标签中包含aa的所有<li>标签
//2
// alert($("li:contains('aa')").length);
// alert($("li:contains('aa')").get(1).innerHTML);
//查找所有<li>标签中的空的所有<li>标签
// alert($("li:empty").length);
//查找所有<li>标签中包含a元素所有<li>标签
// alert($("li:has(a)").html());
//查找所有<li>标签中包含子元素或者文本元素所有<li>标签
//4个
alert($("li:parent").length);
});
</script>
</head>
<body>
<li>aa投资</li>
<li>理财</li>
<li></li>
<li>aa学习</li>
<li><a>心在远方</a></li>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用基本内容过滤选择器以及可见性过滤选择器</title>
<!--
作者：1783917640@qq.com
时间：2017-08-10
描述：常用基本内容过滤选择器以及可见性过滤选择器用法的测试
-->
<!-- 引入jQuery库-->
<script type="text/javascript" src="scripts/jquery-3.2.1.js"></script>
<!-- javascript脚本-->
<script type"tex/javascriptt">
jQuery(document).ready(function(){
//查找不可见元素
// alert($("li:hidden").html());
//查找可见元素
alert($("li:visible").html());
});
</script>
</head>
<body>
<li>可见的</li>
<li style="display:none;">不可见</li>
</body>
</html>
常用的属性过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用的属性过滤选择器</title>
<!--
作者：1783917640@qq.com
时间：2017-08-10
描述：常用的属性过滤选择器
-->
<script type="text/javascript" src="scripts/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function(){
//查询所有input标签内中含有name属性的input标签的总数
// 6
// alert($("input[name]").length);
//查询所有input标签内中type属性为text的input标签的总数
// 5
// alert($("input[type='text']").length);
//查询所有input标签内中type属性不为text的input标签的总数
// 1
// alert($("input[type!='text']").length);
//查询所有input标签内中name属性以s开头的input标签的总数
// 3
// alert($("input[name^='s']").length);
//查询所有input标签内中name属性以u结尾的input标签的总数
// 3
// alert($("input[name$='u']").length);
//查询所有input标签内中name属性包含so的input标签的总数
// 2
// alert($("input[name*='so']").length);
//查询所有input标签内中name属性包含xi且以空格隔开的input标签的总数
// 兮兮的人世间
// alert($("input[name~='xi']").val());
//组合查询
// 百度
alert($("input[name*='a'][name^='b'][name$='du'][name~='bai'][value]").val());
});
</script>
</head>
<body>
<table align="center" border="0" cellspacing="2" cellpadding="2">
<tr>
<td><input type="text" name="bai du" value="百度"/></td>
</tr>
<tr>
<td><input type="text" name="sohu" value="搜狐"/></td>
</tr>
<tr>
<td><input type="text" name="google" value="谷歌"/></td>
</tr>
<tr>
<td><input type="text" name="sogou" value="搜狗"/></td>
</tr>
<tr>
<td><input type="text" name="sina" value="新浪"/></td>
</tr>
<tr>
<td><input type="button" name="xi xi" value="兮兮的人世间"/></td>
</tr>
</table>
</body>
</html>
常用的子元素过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用的子元素过滤选择器</title>
<!--
作者：1783917640@qq.com
时间：2017-08-10
描述：常用的子元素过滤选择器测试代码
-->
<script type="text/javascript" src="scripts/jquery-3.2.1.js"></script>
<script type="text/javascript">
// jQuery(document).ready(function(){
//
// });
$(function(){
//获取所有div中的第一个子元素
alert($("div :first-child").text());
//获取所有div中的第一个子元素为span的所有元素值
alert($("div sapn:first-child").text());
//获取所有div中的第一个子元素
alert($("div :last-child").text());
//获得一个span标签的所有内容
alert($("div span:first-of-type").text());
//获得div标签中只有一个子元素<b>的所有元素
// fsaefe
alert($("div b:only-child").text());
//获得前后没有同名的兄妹节点的子元素的所有元素
// 空字符串
alert($("div span:only-of-type").text());
//获得所有div元素中的第一个子元素，下标从1开始
alert($("div span:nth-child(1)").text());
//获得所有div元素中的最后一个子元素，下标从1开始，倒着数
alert($("div span:nth-last-child(1)").text());
//查找所有div标签的span元素序号为偶数的所有元素
alert($("div span:nth-child(even)").text());
//查找所有div标签的span元素序号为奇数的所有元素
alert($("div span:nth-child(odd)").text());
});
</script>
</head>
<body>
<div>
<span>aaaa </span>
<span>bbbb </span>
<span>cccc </span>
<span>dddd </span>
</div>
<div>
<b>bb </b>
<span>sdf </span>
<span>fdgdfg </span>
<span>thrthet </span>
</div>
<div>
<b>fsaefe </b>
</div>
<div>
<b>setbwv </b>
<b>sdfgvs </b>
<i>dsfsdfvsdfv </i>
</div>
</body>
</html>
常用的表单选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用的表单选择器</title>
<!--
作者：1783917640@qq.com
时间：2017-08-11
描述：常用的表单选择器的测试代码
-->
<script type="text/javascript" src="scripts/jquery-3.2.1.js"></script>
<script type='text/javascript'>
/**
* 常用的表单选择器的测试
* author:xixi
*
**/
jQuery(document).ready(function(){
//；input 表示要匹配所有的<input><textarea><button><select>
// answer: 15
alert($(":input").length);
//选取所有单行文本框,由于本例中只有两个type=“text”的文本框
// answer:2 xixi
alert($(":text").length);
alert($(":text").val());
//获得type=password的input中的值
//answer: 111111
alert($(":password").val());
//获得type=radio的input中的值
//answer: male
alert($(":radio").val());
//获得type=reset的input中的值
//answer: 重置
alert($(":reset").val());
//获得type=submit的input中的值
//answer: 提交
alert($(":submit").val());
//获得type=image的input的图像按钮
//answer: 2
//<input type="image" src="img/2.jpg"/><br/>
//<input type="image" src="img/1.jpg"/><br/>
alert($(":image").length);
//获得type=button的input中的长度
//answer: 2
//<input type="button" value="input button"/><br/>
//<button type="button">Button</button>
alert($(":button").length);
//获得type=file的input标签的个数
// answer: 1
alert($(":file").length);
});
// $(function(){
// });
</script>
</head>
<body>
<form name ="myform">
<input type="button" value="input button"/><br/>
<input type="checkbox" value="football"/><br/>
<input type="file" name="upload"/><br/>
<input type="hidden" value="ok"/><br/>
<input type="image" src="img/2.jpg"/><br/>
<input type="password" name="pwd" value="111111"/><br/>
<input type="radio" value="male"/>male<br/>
<input type="reset" value="重置"/><br/>
<input type="submit" value="提交"/><br/>
<input type="text" name="name" value="xixi"/><br/>
<input type="text" name="age" value="age"/><br/>
<select name="select">
<option>Option1</option>
<option>Option2</option>
</select><br/>
<textarea cols="10" rows="5">多行文本框</textarea><br/>
<button type="button">Button</button>
<input type="image" src="img/1.jpg"/><br/>
<img src=""img/1.jpg/>
</form>
</body>
</html>
常用的表单对象属性过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用的表单对象属性过滤选择器</title>
<!--
作者：1783917640@qq.com
时间：2017-08-11
描述：常用的表单对象属性过滤选择器测试
-->
<script type="text/javascript" src="scripts/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function(){
//type="text" 的不可用input标签数量
// answer: 2
alert($(":text:disabled").length);
//type="text" 的可用input标签数量
// answer: 2
alert($(":text:enabled").length);
//type="text" 的可用input标签数量
// answer: 1
alert($(":input:checked").length);
//选区所有下拉列表中的默认被选中的元素
// answer:浙江 天津
alert($("select :selected").text());
});
</script>
</head>
<body>
<form id="myform" action="" method="post">
<input type="text" name="myname" value="xixi"/><br/>
<input type="text" name="myage" value="12" disabled="disabled"/><br/>
<input type="text" name="pass" value="12332"/><br/>
<input type="text" name="dog" value="mmm" disabled="disabled"/><br/>
<input type="checkbox" name="hobby" value="football" checked="checked"/>足球<br/>
<input type="checkbox" name="hobby" value="basketball" />篮球<br/>
<input type="checkbox" name="hobby" value="tennis" />网球<br/>
<input type="checkbox" name="hobby" value="diskball" />桌球<br/>
<select name="test" multiple="mutiple">
<option selected="selected">浙江</option>
<option>上海</option>
<option>南京</option>
<option>武汉</option>
<option>长沙</option>
<option selected="selected">天津</option>
</select>
</form>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
