jQuery选择器
2022/3/30 6:19:57
本文主要是介绍jQuery选择器，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery class选择器应用</title>
<!-- 引入jquery.js库 -->
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
<script type="text/javascript">
/* 点击按钮获取所有具有'c_1' class值的元素
并显示数量是多少，对符合要求的元素进行判断，
哪些是INPUT元素 */
function getEle(){
var c_1ClaArr = $('.c_1');//获取class属性值中是c_1
alert("符合class值是c_1的元素个数是 "+c_1ClaArr.length);
c_1ClaArr.each(function(i){
if (this.tagName === 'INPUT') {//符合是input元素的对象
alert("这是一个input元素："+this.value);
}else{
alert("不是input元素，它是 "+this.tagName)
}
});
}
</script>
</head>
<body id="body_">
名著1：<input class="c_1 c_2" id="book1" value="红楼梦" /><br>
名著2：<input class="c_1 c_3" id="book2" value="西游记"/><br>
名著3：<input class="c_2 c_3" id="book3" value="水浒传"/><br>
请选择书籍：
<select class="c_1" id="sel">
<option>--请选择你想阅读哪个书籍--</option>
<option value="HLM">红楼梦</option>
<option value="XYJ">西游记</option>
<option value="SHZ">水浒传</option>
</select><br>
<button onclick="getEle()">获取c_1类所有元素</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery ID选择器应用</title>
<!-- 引入jquery.js库 -->
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
<script type="text/javascript">
//点击按钮实现将第一个文本框的值与第二个文本框
function changeValue(arg){
var temp = $('#book1').val();//获取id为book1元素的值
$('#book1').val($('#book2').val());//为book1 value属性赋值
$('#book2').val(temp);
if (arg === 'JH') {
$('#jh')[0].disabled = true;
$('#hf')[0].disabled = false;
}else if (arg === 'HF') {
$('#jh')[0].disabled = false;
$('#hf')[0].disabled = true;
}
}
</script>
</head>
<body id="body_">
<input id="book1" style="font-size: 25px" value="红楼梦" /><br><br>
<input id="book2" style="font-size: 25px" value="西游记"/><br><br>
<button onclick="changeValue('JH')" id="jh">交换</button>
<button onclick="changeValue('HF')" id="hf" disabled>恢复</button>
<p id="p1">他好</p>
<p id="p1">你好</p>
<p id="p1">我好</p>
<div>
<p id="p1">大家好</p>
</div>
</body>
<script type="text/javascript">
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery ready(Fun)函数应用</title>
<!-- 引入jquery.js库 -->
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
<script type="text/javascript">
function sayHello(name){
alert("你好 "+name)
}
/*$('#book1').ready(function(){
$('#book1')[0].value = "三国志";
});*/
/* 当整个文档加载准备完毕后执行JS操作 */
$(document).ready(function(){
alert('文档准备好了');
alert($('.c_3').val());
})
/* ready函数的简写方式 */
$(sayHello('无限极'));
function loadFun(){
alert("onload注册的事件");
}
</script>
</head>
<body onl oad="loadFun()">
名著1：<input class="c_1 c_2" id="book1" value="红楼梦" /><br>
名著2：<input class="c_1 c_3" id="book2" value="西游记"/><br>
名著3：<input class="c_2 c_3" id="book3" value="水浒传"/><br>
请选择书籍：
<select class="c_1" id="sel">
<option>--请选择你想阅读哪个书籍--</option>
<option value="HLM">红楼梦</option>
<option value="XYJ">西游记</option>
<option value="SHZ">水浒传</option>
</select>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery 祖先与后代选择器应用</title>
<!-- 引入jquery.js库 -->
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
<script type="text/javascript">
/* 编写jquery代码，实现点击'获取form1中所有input后代元素';
实现点击'获取form2中所有直接input子元素'并显示input的值信息 */
function getInputInF1(){
var inputArrInF1 = $('#f1 input');
alert(inputArrInF1.length);
}
function getInputInF2(){
var inputArrInF2 = $('#f2 > input');
inputArrInF2.each(function(i){
alert(this.value);
});
}
</script>
</head>
<body id="body_">
<h2>Form1中Input元素</h2>
<form id="f1">
名著1：<input class="c_1 c_2" id="book1" value="红楼梦" /><br>
名著2：<input class="c_1 c_3" id="book2" value="西游记"/><br>
名著3：<input class="c_2 c_3" id="book3" value="水浒传"/><br>
<div>
名著4：<input class="c_1 c_3" id="book4" value="儒林外史"><br>
名著5：<input class="c_2 c_3" id="book4" value="牡丹亭"><br>
</div>
</form><br>
<button onclick="getInputInF1()">获取form1中所有input后代元素</button>
<h2>Form2中Input元素</h2>
<form id="f2">
作者1：<input class="c_1 c_2" id="book1" value="曹雪芹" /><br>
作者2：<input class="c_1 c_3" id="book2" value="吴承恩"/><br>
作者3：<input class="c_2 c_3" id="book3" value="施耐庵"/><br>
<div>
作者4：<input class="c_1 c_3" id="book4" value="吴敬梓"><br>
作者5：<input class="c_2 c_3" id="book4" value="汤显祖"><br>
</div>
</form><br>
<button onclick="getInputInF2()">获取form2中所有input后代元素</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery 同辈与紧随其后选择器应用</title>
<!-- 引入jquery.js库 -->
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
<script type="text/javascript">
/* 实现获取id值是book2 元素 紧随其后的唯一class值为t_1的元素 */
/*$(function(){
var classT_1 = $('#book2 + .t_1');
if(classT_1.length !=0){
alert(classT_1.text());
}
});*/
/* id值是book2元素后的所有同级p元素 */
$(function(){
var pSubings = $('#book2 ~ p');
pSubings.each(function(i){
alert(this.innerText);
});
})
</script>
</head>
<body id="body_">
<p>俄罗斯</p>
<p>英格兰</p>
<input id="book2" value="西游记"/>
<p class="t_2">中国</p>
<p><p>美国</p></p>
<select id="s1" class="t_1">
<option value='dz'>大专</option>
<option value='ss'>硕士</option>
<option value='bs'>博士</option>
</select>
<input class="t_1" id="book1" value="红楼梦" />
<div>
<p>中国2</p>
<p>美国3</p>
</div>
<p>中国5</p>
<select id="add">
<option value='jl'>吉林</option>
<option value='hlj'>黑龙江</option>
<option value='ln'>辽宁</option>
</select>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery 选择器条件筛选应用示例</title>
<!-- 引入jquery.js库 -->
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
<script type="text/javascript">
function divFirst(){//获取文档中的第一个div
alert($('div:first').text());
}
function divLastPLast(){//获取最后一个div中最后一个段落内容
alert($('div:last > p:last').html());
}
function notHaving(){//获取文档中第一个form中类值不是cla2的input
var inputNotClasscla2 = $('form:first input:not(.cla2)');
inputNotClasscla2.each(function(){
alert(this.value);
})
}
function evenHaving(){//显示第一个div中P段落内容，只要索引为偶数的
var pInFirstDivForEven = $('div:first p:even');
pInFirstDivForEven.each(function(){
alert(this.innerHTML);
});
}
function eqHaving(){//点击获取表格中第4行中所有<td>内容并将此行背景色设为黄色
var tr = $("table tr:eq(3)");
var tdArr = $('td',tr);
tr[0].style.backgroundColor = "yellow";
alert(tdArr.length);
tdArr.each(function(i){
alert(this.innerText);
});
}
function cotainerHaving(){//获取id值为div_0的DIV元素内P元素，内容必需包含'好'的
var pArr = $('#div_0 p:contains("好")')
pArr.each(function(){
alert($(this).text());
});
}
function hasHaving(){//获取段落内有input元素的P元素
var pHasInput = $('p:has(input)');
pHasInput.each(function(){
alert(this.innerHTML);
});
}
</script>
</script>
</head>
<body id="body_">
<div id="users" style="background-color: skyblue;">
<p>日照香炉生紫烟，</p>
<p>遥看瀑布挂前川。</p>
<p>飞流直下三千尺，</p>
<p>疑是银河落九天。</p>
</div>
<div id="users" style="background-color: skyblue;">
<p>李白诗仙</p>
<p>杜甫诗圣</p>
<p>子建鬼才</p>
<p>东坡词圣</p>
</div>
<div id="users" style="background-color: skyblue;">
<p>卧龙诸葛舌如剑</p>
<p>郭靖逝去居第一</p>
<p>翼德骁勇将碎胆</p>
<p>云长横刀笑诸雄</p>
</div>
<form>
<input class="cla1" value="人类"><br>
<input class="cla2" value="阿修罗"><br>
<input class="cla1" value="仙人"><br>
</form>
<button onclick="divFirst()">显示第一个div中html内容</button>
<button onclick="divLastPLast()">显示最后一个div中最后一个p段落内容</button>
<button onclick="notHaving()">获取文档中第一个form中类值不是cla2的input</button>
<button onclick="evenHaving()">显示第一个div中P段落内容，只要索引为偶数的</button>
<br><br>
<table border="1" cellpadding="5" width="600">
<tr>
<td>EMO100</td> <td>诸葛孔明</td> <td>南阳卧龙岗</td> <td>男</td>
</tr>
<tr>
<td>EMO110</td> <td>周公瑾</td> <td>江南水乡</td> <td>男</td>
</tr>
<tr>
<td>EMO120</td> <td>貂 蝉</td> <td>月宫</td> <td>女</td>
</tr>
<tr>
<td>EMO130</td> <td>曹孟德</td> <td>许 昌</td> <td>男</td>
</tr>
<tr>
<td>EMO140</td> <td>赵子龙</td> <td>常 山</td> <td>男</td>
</tr>
<tr>
<td>EMO150</td> <td>孙尚香</td> <td>苏州</td> <td>女</td>
</tr>
</table>
<button onclick="eqHaving()">点击获取表格中第4行中所有<td>内容并将此行背景色设为黄色</button><br><br>
<div id="div_0">
<p>心好命又好，</p>
<p>富贵直到老。</p>
<p>命好心不好，</p>
<p>福变为祸兆。</p>
<p>心好命不好，</p>
<p>祸转为福报。</p>
<p>心命俱不好，</p>
<p>遭殃且贫夭。</p>
<p>心可挽乎命，</p>
<p>最好存仁道。</p>
</div>
<button onclick="cotainerHaving()">获取id值为div_0的DIV元素内P元素，内容必需包含'好'的</button><br><br>
<p><input value="我是文本值"></p>
<p><input value="我是密码内容" type="password"></p>
<p><input value="我是地址内容"></p>
<p><input value="我是密码确认" type="password"></p>
<button onclick="hasHaving()">获取段落内有input元素的P元素</button>
</body>
</html>
这篇关于jQuery选择器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-03-06jquery对css样式（jquery中的css方法）-icode9专业技术文章分享
- 2023-05-27JQuery的认识和安装
- 2023-01-06JQuery应用技巧：如何定义 HTML 模板并使用 JQuery 进行加载-icode9专业技术文章分享
- 2022-09-29复习-jQuery
- 2022-09-04Python3项目初始化10-->前端基础jquery、ajax，sweetalert--更新用户改造
- 2022-08-30day 27 jquery
- 2022-08-29jQuery筛选器，bootstrap
- 2022-08-20JQuery事件绑定
- 2022-08-20JQuery案例
- 2022-08-07关于jQuery的学习
