标签:
学习之前,首先要了解什么是网页元素,网页的本质就是HTML。HTML元素是一个统称,可以认为从一个标签开始到这个标签结束的这部分就是一个网页元素。
1 <div id="div"> //开始标签 属性
2 <p>hello world</p> //元素内容
3 </div> //结束标签
4 <script type="text/javascript">
5 $("#div").prop("tagName") //获取标签名tagName 用attr()方法没获取到
6 $("#div")[0].tagName; //获取标签名 $("#div")[0] 就是一个DOM对象 juery-->DOM
7 $("#div").html() //获取元素内容
8 $(document.getElementById("div")).html() //将DOM对象转换成juery对象 DOM-->juery
9 </script>
从上面可以看出 juery可以取到页面元素的各部分,自然也就能修改这个元素来达到想要的效果,但是前提要从页面中找到这个元素,否则后面的操作无从谈起。 网上关于juery选择器的文章很多,也介绍的比较清晰,虽然大部分都没用到过。
下面就按照我自己的理解一一介绍。
2 <p>hello world</p>
3 <script type="text/javascript">
4 $("p,div").html("hello")
5 $("p,.example").html("world")
6 $("p,#demo").html("hello world") //通过 ,隔开来选择两个不同元素也可以选择多个
7 </script>
1 <script type="text/javascript">
2 $(":text").parent().html()
3 $(":password").val("2345")
4 $(":button").html("已经提交") //会选择其中的<button>标签 另外 如果<button> 没有指明 type时 type默认为“sumbit”;浏览器之间有差别。
5 $(":reset").val("已经重置")
6 $(":input").val("全部改变")
7 //$(":submit").val("已经提交")
8 //$(":img")
9 //$(":checkbox")
10 //$(":redio") //根据type的值来选择 就是针对form表单的
11</script>
可以看做 (基本选择器)+"连接符号"+过滤条件,根据过滤条件可以分成四部分。
1 $(":text:first")
2 $(":text:last")
3 $(":text:odd")
4 $(":text:even")
5 $(":text:eq(num)") //num为索引
6 $(":text:gt(num)") //大于num
7 $(":text:lt(num)") //小于num
8 $(":text:not(:text)") //不在其中的元素
1 $("ul p").html("ul元素下的所有p元素")
2 $("ul>p").html("ul元素下一级p元素")
3 $("ul>p+li").html("p元素同级的下个元素")
4 $("ul>p~li").html("p元素下面所有同级的元素")
1 $("div[id]") //div元素中存在id属性的
2 $("div[id=new]") //id 值等于
3 $("div[id*=new]") //id值中包含
4 $("div[id!=new]") //id值不等于
5 $("div[id^=new]") //id值以..开始
6 $("div[id$=new]") //id值以..结束
7 $("div[id$=new][id]") //复合属性来查找
1 $("div:contains(‘div1‘)") //文本 包含此文本的元素和它所有的上级元素
2 $("div:has(div)") //标签 同上
3 $("div:empty") //没有内容的div标签
4 $("div:parent") //有内容的div标签
1 $("input:selected")
2 $("input:chicked")
3 $("input:enable")
4 $("input:disable")
1 $("div:hidden")
2 $("div:visible")
3 $("#div:animated")
网上关于juery选择器的文章:
http://www.360doc.com/content/13/1206/15/10504424_334970071.shtml
http://www.jb51.net/article/57753.htm
标签:
原文地址:http://www.cnblogs.com/ylink/p/5246253.html