- 1类似于‘json: cannot unmarshal string into Go struct field Device.type of type uint8‘_fata[0000] load podsandboxconfig: json: cannot unm
- 2MSF+APK注入绕过手机防护上线远控及安全防护建议_520apkhook
- 3全新升级SQLCoder-7B-2：领先的自然语言至SQL转换模型，性能显著提升
- 4基于SpringBoot+ElasticSearch 的Java底层框架的实现_springboot elasticsearch-java
- 5Rust中的结构体_rust 结构体
- 6微信小程序 实现上传图片前裁剪功能_微信小程序剪裁
- 7c语言实现单链表(数据结构)_c语言单链表实现
- 8css3使边框具有渐变的效果_border-top-color 渐变
- 9下一个AI前沿与革命：KAN 下_kan网络 样条
- 10微信小程序 图片裁剪（兼容性最强）_wx.cropimage
JQuery学习笔记（2）
赞
踩
jquery的属性选择器
代码:
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<metahttp-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript"src="js/jquery-1.3.1.js"></script>
</head>
<body>
<h1>XXXX</h1>
<h2>XXXXXXX</h2>
<h3>XXXXXXXXX</h3>
<input type="button" value="含有属性title 的div元素." id="b1"/>
<input type="button" value="属性title值等于test的div元素" id="b2"/>
<input type="button" value="属性title值不等于test的div元素(没有属性title的也将被选中)" id="b3"/>
<input type="button" value="属性title值 以te开始 的div元素" id="b4"/>
<input type="button" value="属性title值 以est结束 的div元素" id="b5"/>
<input type="button" value="属性title值 含有es的div元素" id="b6"/>
<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素" id="b7"/>
<input type="hidden"value="hidden1"/>
<input type="hidden"value="hidden2"/>
<input type="hidden" value="hidden3"/>
<input type="hidden"value="hidden4"/>
<div id="one" title="test">
div id为one test
</div>
<div id="one" title="texxx">
div id为one texxx
</div>
<div id="one" title="xxxest">
div id为one texxx
</div>
<div id="one" title="xxxesxxxxxt">
div id为one xxxesxxxxxt
</div>
<div id="two" title="ate">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div id="three" class="one" >
XXXXXXXXX
</div>
</body>
<scriptlanguage="JavaScript">
//*****含有属性title 的div元素.
$("#b1").click(
function(){
$("div[title]").css("background","green");
}
);
//****属性title值等于test的div元素
$("#b2").click(
function(){
$("div[title=\"test\"]").css("background","green");
}
);
//属性title值不等于test的div元素(没有属性title的也将被选中)
$("#b3").click(
function(){
$("div[title!='test']").css("background","red");
}
);
//属性title值 以te开始 的div元素
$("#b4").click(
function(){
$("div[title^='te']").css("background","red");
}
);
//属性title值 以est结束 的div元素
$("#b5").click(
function(){
$("div[title$='est']").css("background","red");
}
);
//属性title值 含有es的div元素
$("#b6").click(
function(){
$("div[title*='es']").css("background","red");
}
);
//选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素
//我们的过滤方式有两种 :
//比如选出文本中含有 abc的 div $("div:contains['abc']")
$("#b7").click(
function(){
//选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素
$("div[title*='es'][id]").css("background","red");
}
);
</script>
</html>
子元素选择器
根据该元素是父元素下出现的位置来选中子元素.
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<metahttp-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript"src="js/jquery-1.3.1.js"></script>
</head>
<body>
<h1>XXXX</h1>
<h2>XXXXXXX</h2>
<h3>XXXXXXXXX</h3>
<input type="button" value="每个class为one的div父元素下的第2个子元素" id="b1"/>
<input type="button" value="每个class为one的div父元素下的第一个子元素" id="b2"/>
<input type="button" value="每个class为one的div父元素下的最后一个子元素" id="b3"/>
<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素" id="b4"/>
<divclass="one">
<div id="one" class="one" >
XXXXXXXXX one
</div>
<div id="two" class="one" >
XXXXXXXXX two
</div>
<div id="three" class="one" >
XXXXXXXXX three
</div>
<div id="four" class="one" >
XXXXXXXXX four
</div>
</div>
<divclass="one">
<div id="one" class="one" >
XXXXXXXXX one
</div>
</div>
</body>
<scriptlanguage="JavaScript">
//****每个class为one的div父元素下的第2个子元素
$('#b1').click(
function(){
$("div.one:nth-child(1)").css("background","red");
}
);
//*****每个class为one的div父元素下的第一个子元素
$('#b2').click(
function(){
$("div.one:first-child").css("background","red");
// $("div.one:nth-child(1)").css("background","red");
}
);
//*****每个class为one的div父元素下的最后一个子元素
$('#b3').click(
function(){
$("div.one:last-child").css("background","red");
}
);
//**如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
$('#b4').click(
function(){
$("div.one:only-child").css("background","red");
}
);
</script>
</html>
表单对象选择器
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type"content="text/html; charset=UTF-8">
<scriptlanguage="JavaScript"src="js/jquery-1.3.1.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<form>
<input type="text"/><br/>
<input type="checkbox"/><br/>
<input type="radio"/><br/>
<input type="image"/><br/>
<input type="file"/><br/>
<input type="submit"/><br/>
<input type="reset"/><br/>
<input type="password"/><br/>
<input type="button"value="按钮1" /><br/>
<select><option/></select><br/>
<textarea></textarea><br/>
<button>按钮2</button><br/>
</form>
</body>
<scriptlanguage="JavaScript">
//选择所有的button
var buttons=$(':button');
alert(buttons.length);
varbuttons=$("input[type='button']");
alert(buttons.length);
</script>
</html>
小结: 我们在获取表单元素时候,有两种方式
1. $(":表单元素名")[input button file img....] ,这种方式选择最全.
2. $("input[type='button']"); 这种方式<input type="button"/>
表单对象属性选择器
$("select option:selected")
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<metahttp-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript"src="js/jquery-1.3.1.js"></script>
</head>
<body>
<h1>XXXX</h1>
<h2>XXXXXXX</h2>
<h3>XXXXXXXXX</h3>
<input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 可用<input> 元素的值" id="b1"/>
<input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 不可用<input> 元素的值" id="b2"/>
<input type="button" value="利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/>
<input type="button" value="利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/>
<br>
<input type="text" value="篮球1"/>
<input type="text" value="篮球2"/>
<input type="text" value="篮球3" disabled="true"/>
<input type="text" value="篮球4" disabled="true"/>
<br>
<input type="checkbox" value="爱好1"/>爱好1
<input type="checkbox" value="爱好2"/>爱好2
<input type="checkbox" value="爱好3"/>爱好3
<input type="checkbox" value="爱好4"/>爱好4
<br>
<select name="job" size=9 multiple="multiple">
<option value="选项1">选项1^^</option>
<option value="选项2">选项2^^</option>
<option value="选项3">选项3^^</option>
<option value="选项4">选项4^^</option>
<option value="选项5">选项5^^</option>
<option value="选项6">选项6^^</option>
</select>
<select id="hsp" name="edu">
<option value="博士">博士^^</option>
<option value="硕士">硕士^^</option>
<option value="本科">本科^^</option>
<option value="小学">小学^^</option>
</select>
</body>
<scriptlanguage="JavaScript">
//*利用 jQuery 对象的 val() 方法改变表单内type=text 可用 <input> 元素的值
$("#b1").click(function(){
$("input[type='text']:enabled").val("hello");
})
//**利用 jQuery 对象的 length 属性获取多选框选中的个数
$("#b3").click(function(){
// alert($(":checkbox:checked").length);
alert($("input[type='checkbox']:checked").length);
})
//****利用 jQuery 对象的 text() 方法获取下拉框选中的内容
$("#b4").click(function(){
//alert($("selectoption:selected").text());
//必须用这个 val()函数把每个值打印;
var $objs=$("selectoption:selected");
/* $.each($objs,function(){
alert($(this).val());
});*/
/* $.each($objs,function(i,n){
// alert(n.value);
alert($(n).val());
})*/
/* $objs.each(function(){
window.alert($(this).val());
})*/
$objs.each(function(i,n){
window.alert("ok"+$(n).val());
})
})
</script>
</html>
☞ 总结一下过滤器使用的方式
$("div:contains('di')");//内容
$("div[type]")//属性
$("div .one")//选中div 中含 class 为 .one 的div元素
$("div, .one")// 选中div 和 class 为 .one 的div元素
☞总结jquery对象集合遍历的四种形式
//必须 用这个 val()函数把每个值打印;
var $objs=$("selectoption:selected");
/* $.each($objs,function(){
alert($(this).val());
});*/
/* $.each($objs,function(i,n){
// alert(n.value);
alert($(n).val());
})*/
/* $objs.each(function(){
window.alert($(this).val());
})*/
$objs.each(function(i,n){
window.alert("ok"+$(n).val());
})
☞如何使用我们的选择器
总结如下:
1.使用什么样的选择器根据需求定
2.如果针对文档内容，则使用内容选择器
3.如果是选择父子（祖先、后代）元素则使用层次选择器
4. 如果是根据id/class/tagname/使用基本选择器
5. 如果是选择表单中的元素，则使用表单选择器、表单对象属性选择器
6. 根据可见性选择元素，则使用可见性选择器
7. 如果是选择某个元素中包含某个属性（属性值），则使用属性选择器
8. !!!如果考虑对选中的元素，要进行过滤，则使用过滤选择器，（有三种方法）
$("div:contains('di')");//内容
$("div[type]")//属性
$("div.one")// 选中div 中含 class 为 .one 的div元素
jquery如何操作dom
jquery的dom操作分为三种 (js)
① xml dom
② html dom
③ css dom
查找节点，然后去通过attr函数去修改或者设置属性的值.
