jQuery学习二
1.id选择器:
// 4.如果页面中多个元素id相同,jquery只会获取第一个id的jquery对象 var jquery = $('#name'); alert(jquery.val()); var jquery1 = $('#name'); alert(jquery1.val());
<body>
<input type="text" name="name" id="name" value="张三">
<input type="text" name="name" id="name" value="李四">
</body>
2.class选择器:
// 5.获取出来的jquery是一个数组,如果页面中多个元素class相同,jquery只会获取第一个id的jquery对象 var jquery3 = $('.name'); alert(jquery3.val()); // 张三 // 想获取非第一个元素的对象,需要根据索引获取到指定位置的DOM对象后,再转化成jquery对象进行使用 alert($($('.name')[1]).val()) <input type="text" name="name" name ="name" value="张三"> <input type="text" name="name" name ="name" value="李四">
3.parent—child选择器:
// 6.获取div标签下所有class为name的元素 alert($('div' > .name).length); // 长度为2 <div> <input type="text" name="name" name ="name" value="张三"> <input type="text" name="name" name ="name" value="李四"> </div>
4.prev + next选择器:
匹配所有紧邻在prev元素后的next元素。
// 7.获取紧邻元素为div的之后的class元素 alert($('div + .name').length); // 只有一个元素,就是value为sssss的 <div> <input type="text" name="name" name ="name" value="张三"> <input type="text" name="name" name ="name" value="李四"> </div> <input type="text" name="name" name ="name" value="sssss"> <input type="text" name="name" name ="name" value="ttttt">
5.prev ~ siblings选择器:
获取div标签后的所有元素。
// 8.获取div标签后的所有元素,长度为2,值为sssss和ttttt alert($('div ~ .name').length); <div> <input type="text" name="name" name ="name" value="张三"> <input type="text" name="name" name ="name" value="李四"> </div> <input type="text" name="name" name ="name" value="sssss"> <input type="text" name="name" name ="name" value="ttttt">
// 8.获取div标签后的所有元素,长度为2,值为sssss和ttttt alert($('div ~ .name').length); <div> <input type="text" name="name" name ="name" value="张三"> <input type="text" name="name" name ="name" value="李四"> </div> <div> <input type="text" name="name" name ="name" value="sssss"> </div> <input type="text" name="name" name ="name" value="sssss"> <input type="text" name="name" name ="name" value="ttttt">
6.简单过滤选择器:匹配符合条件的元素
7.属性选择器:【attribute】匹配包含给定属性的元素
// 9.获取所有元素都有value属性的所有元素 alert($('[value]').length); alert($('.name[value]').length); // 所有class为name的带有value的属性