JQuery的基本选择器使用总结以及过滤,文本,可见度的选择代码
来源:互联网 发布:如何用支付宝付款淘宝 编辑:程序博客网 时间:2024/06/14 02:14
选择器可以说是jquery的灵魂所在,因为有着强大的选择器,所以jquery才会几乎可以任意的取东西,在平时的开发中发现,不能仅仅的只会使用基本的选择器操作,把其它的选择器学习一下,有利于力高自己在开发效率和代码质量,减少代码量,下面是在测试学习过程中的代码总结(注:为了更加贴近实际开发,都采用了外部文件引入的方式):
01.html
<!DOCTYPE html><html><head><title>测试jquery</title><meta charset="utf-8"/><link rel="stylesheet" type="text/css" href="01.css"/><script type="text/javascript" src="./JQuery/jquery.js"></script><script type="text/javascript" src="01.js"></script></head><body><h1>JQuery选择器测试</h1><input type="button" id="test1" value="测试1"><input type="button" id="test2" value="测试2"><input type="button" id="test3" value="测试3"><input type="button" id="test4" value="测试4"><input type="button" id="test5" value="测试5"><input type="button" id="test6" value="测试6"><input type="button" id="test7" value="测试7"><input type="button" id="test8" value="测试8"><input type="button" id="test9" value="测试9"><p id="a">abcdefg</p><div id="div_1" class="div1">div1 A1<div id="div_2" class="div2">div2 A2<div id="div_3" class="div3">div3 A3<div id="div_4" class="div4">div4 A4A<div id="div_5" class="div5"></div></div></div></div></div><div id="div_2_1" class="div_2_1"></div></body></html>01.css:
body{background-color: #efefef;}.div1{position: absolute;margin-left: 350px;margin-top: 80px;width: 600px;height: 600px;background-color: red;}.div2{position: absolute;margin: 50px 0px 0px 50px;width: 500px;height: 500px;background-color: green;}.div3{position: absolute;margin: 50px 0px 0px 50px;width: 400px;height: 400px;background-color: blue;}.div4{position: absolute;margin: 50px 0px 0px 50px;width: 300px;height: 300px;background-color: white;}.div5{position: absolute;margin: 50px 0px 0px 50px;width: 200px;height: 200px;background-color: black;}.div6{width: 100px;height: 100px;margin-top: 50px;margin-left: 50px;position: absolute;background-color: yellow;}.div_2_1{position: absolute;margin: 50px 0px 0px 1000px;width: 300px;height: 300px;background-color: yellow;display: none;}.div_2_2{position: absolute;margin: 300px 0px 0px 1000px;width: 300px;height: 300px;background-color: yellow;}01.js
body{background-color: #efefef;}.div1{position: absolute;margin-left: 350px;margin-top: 80px;width: 600px;height: 600px;background-color: red;}.div2{position: absolute;margin: 50px 0px 0px 50px;width: 500px;height: 500px;background-color: green;}.div3{position: absolute;margin: 50px 0px 0px 50px;width: 400px;height: 400px;background-color: blue;}.div4{position: absolute;margin: 50px 0px 0px 50px;width: 300px;height: 300px;background-color: white;}.div5{position: absolute;margin: 50px 0px 0px 50px;width: 200px;height: 200px;background-color: black;}.div6{width: 100px;height: 100px;margin-top: 50px;margin-left: 50px;position: absolute;background-color: yellow;}.div_2_1{position: absolute;margin: 50px 0px 0px 1000px;width: 300px;height: 300px;background-color: yellow;display: none;}.div_2_2{position: absolute;margin: 300px 0px 0px 1000px;width: 300px;height: 300px;background-color: yellow;}
02.html
<!DOCTYPE html><html><head><title>测试jquery</title><meta charset="utf-8"/><link rel="stylesheet" type="text/css" href="01.css"/><script type="text/javascript" src="./JQuery/jquery.js"></script><script type="text/javascript" src="02.js"></script></head><body><h1>JQuery选择器测试</h1><input type="button" id="test1" value="测试1"><input type="button" id="test2" value="测试2"><input type="button" id="test3" value="测试3"><input type="button" id="test4" value="测试4"><input type="button" id="test5" value="测试5"><input type="button" id="test6" value="测试6"><input type="button" id="test7" value="测试7"><input type="button" id="test8" value="测试8"><input type="button" id="test9" value="测试9"><br><input type="hidden" value="文本隐藏域1"><input type="hidden" value="文本隐藏域2"><input type="hidden" value="文本隐藏域3"><input type="hidden" value="文本隐藏域4"><input type="hidden" value="文本隐藏域5"><div id="div_1" class="div1">div1 A1<div id="div_2" class="div2">div2 A2<div id="div_3" class="div3">div3 A3<div id="div_4" class="div4">div4 A4A<div id="div_5" class="div5"><div id="div_6" class="div6">This is div6</div></div></div></div></div></div><div id="div_2_1" class="div_2_1">外部兄弟div1</div><div id="div_2_2" class="div_2_2">外部兄弟div2</div></body></html>
02.js
$(document).ready(function(){/*var myarray1 = [1,3,5,7,9];$.each(myarray1,function(i,n){alert(i+"---"+n);});*///可见度选择器,凡是可见的都被选中$("#test1").click(function(){$("div:visible").css("background-color","yellow");});//类选择器$("#test2").click(function(){$("div.div6").css("background-color","red");});//显示隐藏元素$("#test3").click(function(){$("div:hidden").css("background-color","red");$("div:hidden").show();});$("#test4").click(function(){$MyInputHidden=$("input:hidden");//window.alert($MyInputHidden.length);//for(var i=0; i<$MyInputHidden.length; i++){//var DomInputHidden=$MyInputHidden[i];//window.alert(DomInputHidden.value);//alert($MyInputHidden[i].val());//}//这是jquery自己的方法遍历/*$.each($MyInputHidden,function(i,obj){window.alert($(obj).val());});*///第二种方法$.each($MyInputHidden,function(){window.alert($(this).val());});});});
关于选择器的使用规则如下:
1:使用什么选择器要根据需求来定
2:如果是针对文档内容,用内容选择器
3:如果是父子等关系,用层次选择器
4:如果是ID 类 等用基本选择器
5:如果是表单元素,用表单选择器或表单对象属性选择器
6:如果是可见或则不可见元素,用可见性选择器
7:如果选择某个元素里面的某个属性或则属性值,用属性选择器
8:如果要考虑元素,要用过滤选择器
0 0
- JQuery的基本选择器使用总结以及过滤,文本,可见度的选择代码
- jQuery 的基本过滤选择器
- jQuery的基本过滤选择器
- Jquery内容、可见度、属性过滤选择器的理解和简单语句说明
- jQuery选择器之过滤选择器之可见度过滤选择器
- jQuery 过滤选择器的使用
- jQuery过滤选择器的使用
- jQuery选择器 – 可见度过滤(Visibility Filters)
- jQuery过滤选择器——可见度过滤选择器
- 使用jQuery基本过滤选择器
- 使用Jquery基本过滤选择器
- 黑马day16 jquery&内容过滤选择器&可见度选择器
- jquery内容过滤选择器、属性过滤选择器和jquery可见度过滤选择器
- jQuery的过滤选择器
- Jquery的过滤选择器
- jquery的过滤选择器
- jQuery基础教程之强大的选择器(过滤选择器-基本过滤选择器)
- jQuery基础教程之强大的选择器(过滤选择器-基本过滤选择器)
- java系统中使用调度器Quartz实现对正在执行任务的停止
- Object-C 类,对象,运行时,isa
- Nand Flash与Nor Flash的区别
- cscope ctags shell
- ImageView的属性android:scaleType,即ImageView.setScaleType(ImageView.ScaleType)
- JQuery的基本选择器使用总结以及过滤,文本,可见度的选择代码
- web应用,web服务器,TLS的引入,以及证书认证整理
- 在Linux下编译.pc文件
- Android 开源框架Universal-Image-Loader的使用
- 普通用户授予select any table 权限
- DM6437 DSP系列之启动过程全析
- 位操作
- 如何与移动开发者交谈 给测试员的六条建议
- 命名空间namespace的用法