<!DOCTYPE html>
<html>
<head>
<title>jq的常用选择器和常用筛选方法</title>
<script src="./jquery.js"></script>
</head>
<body>
<div id="div0">div0</div>
<div id="div1" class="div_1">div1</div>
<div id="div2" class="div_1">div2</div>
<hr>
<div>
<form action="" method="post">
<div>
<div id="username">姓名:<input type="text" name="username" value="123"></div>
<div id="hobby" style="">爱好：
<input type="checkbox" data='100' name="hobby[]" value="1" checked="checked">音乐
<input type="checkbox" name="hobby[]" value="2">读书
<input type="checkbox" name="hobby[]" value="3">画画
<input type="checkbox" name="hobby[]" value="4">书法
</div>
<div></div>
</div>
</form>
</div>
<div></div>
<script type="text/javascript">
//常用选择器
//根据id获取元素 获取到的结果：类数组对象
console.log( $('#div0') );
console.log( $('#div0')[0] );
//根据class获取元素
console.log( $('.div_1') );
//根据标签名称来获取元素
console.log( $('div') );
//根据属性获取元素
console.log( $('input[name=username]') );
//根据表单元素属性获取元素
console.log( $(':checked') );
//常用筛选方法
//获取爱好对应的div
var hobby = $('#hobby');
//获取 hobby 父元素
console.log( $('#hobby').parent() );
//获取 hobby 子元素
console.log( $('#hobby').children() );
//获取 hobby 最近的祖先元素
console.log( $('#hobby').closest('form') );
//获取 hobby 所有后代元素
console.log( $('#hobby').find('input') );
//获取 hobby 下一个兄弟元素
console.log( $('#hobby').next() );
//获取 hobby 前一个兄弟元素
console.log( $('#hobby').prev() );
//获取 hobby 所有兄弟元素
console.log( $('#hobby').siblings() );
</script>
</body>
</html>
大家把以上代码复制下来一步步的去分析测试理解即可。
|
窥视卡
雷达卡
发表于 2023-1-30 17:57:28
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-25 04:28:42
