juery学习总结(一)——juery选择器

juery在工作中经常使用,遇到不会的问题往往百度一下,事后就忘。使用到现在也感觉不到有什么提高,为了每天进步一点点,从今天起抽时间记录下对juery的学习。

学习之前,首先要了解什么是网页元素,网页的本质就是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选择器的文章很多,也介绍的比较清晰,虽然大部分都没用到过。

下面就按照我自己的理解一一介绍。

一、基本选择器


1、选取同类型元素

  • 通过标签名选择 : $("div")
  • 通过id选择:$("#id")
  • 通过class选择:$(".class")

2、选取不同类型元素

1 <div id="demo" class="example" ></div>

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>   

3、选取特殊元素(主要针对form表单)

 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、根据集合的特点来过滤

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)")    //不在其中的元素

2、根据页面元素的要素来过滤

  • 根据标签
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标签

3、表单元素

1  $("input:selected")
2  $("input:chicked")
3  $("input:enable")
4  $("input:disable")

4、特殊属性(非表单元素也可以使用)

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

时间: 2024-10-10 16:44:16

juery学习总结(一)——juery选择器的相关文章

juery学习总结(二)——juery操作页面元素

所有的操作都可以分为增.删.改.查四种,juery选择器代表查看的功能,那么剩下的操作就是对页面元素增.删.改.页面元素有3部分构成:标签,属性和内容,juery对元素的操作可以从这3方面入手. 一.juery对标签的操作 新建元素 1 //js创建元素 2 var ele_div = document.createElement("<div>") 3 //元素属性 4 //ele_div.setAttribute("id","demo&quo

Jquery的学习(三)选择器

1.Jquery中最重要的就是选择器了. 学习要点: 1.简单选择器 2.进阶选择器 3.高级选择器 ①简单选择器. 最简单的也就是最常用的,最常用的一般也是最简单的. 在使用 jQuery 选择器时,我们首先必须使用"$()"函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象.随后,我们就可以对这个获取到的 DOM 节点进行行为操作了. #box { //使用 ID 选择器的 CSS 规则 color

jQuery学习笔记——jQuery常规选择器

一.简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象.随后,我们就可以对这个获取到的 DOM 节点进行行为操作了.#box {//使用 ID 选择器的 CSS 规则color:red;//将 ID 为 box 的元素字体颜色变红}在 jQuery 选择器里,我们使用如下的方式获取同样的结果:$('#box').css('color', 'red

juery学习总结——例子

1.select元素在选择是找到选择的值和option中的值 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="jquery-1.11.2.js"&

HTML 学习笔记 JQuery(选择器)

学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地方能够迅速找到.今天也是站在前辈大神的肩膀上学习JQuery. 1.属性选择器 属性选择器的语法 jQuery( "[attribute|='value']" ) attribute: 一个属性名. value: 一个属性值,引号是可选的. 可以是一个不带引号的一个单词或带一个引号的字符串

锋利的jQuery学习笔记之jQuery选择器

在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 td{font-size:10px;} a{tetx-decoration:none;} ID选择器 #ID{CSS规则} 以文档元素的唯一标示ID为选择符 #node{corlor:red;} 类选择器 .className{CSS规则} 以文档元素的class作为选择符 div.node{backgro

CSS学习笔记02 CSS选择器

1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选择器 标签选择器就是选择当前页面中相同名字的标签 /*设置所有p标签的文字颜色为红色*/ p { color: red; } 3.ID选择器 id选择器使用"#"进行标识,后面紧跟id名 /*设置id为title的标签的文字颜色为红色*/#title { color: red; } <

jquery学习(一)-选择器

参考锋利的jquery第二版 1.基本的选择器 Id选择器 $(“#Id”) class类选择器 $(“.class”) Element元素选择器 $(“element”) *匹配所有元素 $(“*”) Selector1....n 组合选择器 $(“selector1 selector2 ..n”) 2.层次选择题 $(“ancester descendant ”) 选取ancestor元素里面的所有descendant(后代)元素 $(“parent>child”) 选取parent元素下面

前端学习笔记之jQuery选择器一

一.查找 按选择器查找:过滤选择器 1.基本过滤 :位置过滤--------jquery独有, css没有 什么是:根据元素在查找结果集合中的下标位置选择元素 强调:1.将所有元素查找到集合中 再按照下标过滤 2.下标从0开始 3.和元素在父元素中的相对位置无关 何时使用:只要希望根据元素在结果集合中的位置查找元素 如何使用: 包括: (1) elem(s):first/last  获取结果集合中第一个/最后一个元素 (2) elem(s):even/odd  获取结果结合中偶数/奇数位置的元素