JQuery选择器

jQuery选择器是jQuery类库最重要功能之一。

这些选择器的用法和CSS的语法非常相似,结合jQuery类库的方法你可以很方便快速地定位页面中任何元素,并为其添加响应的行为。

一、什么是选择器?

  jQuery提供获取页面元素一种语法。

二、选择器的组成?

  选择器一般由“特殊符号”+“字符串”组成。
  比如:“#”代表id   “mydiv”是一个字符串,那么整体#mydiv代表,id为mydiv的元素对象。

三、使用选择器获取元素?

   $(“选择器”)    , $ (“#mydiv”)

注意:如果通过jQuery方法获取页面中元素,没有查找到,返回值不是null,返回值为一个空数组[],所以判断是否获取到元素,通过jquery.length!=0来判断。

JQuery常用方法

jQuery方法特征:

一、jQuery对象方法,支持读写操作。
            //使用jquery的方法获取值.
           console.debug($("#username").val());
           //使用jquery的方法设置值.
           $(#username).val("小码哥教育");
   如果没有参数,那么获取,如果有参数那么是赋值;
二、jQuery采用链式编程方式。
   链式编程:jquery调用了一个赋值的方法,那么返回值是jquery对象本身,所有我们可以继续调用方法.
   //由于jquery赋值方法返回值返回的是jquery对象本身,所有可以在继续使用这个对象.
                  $("#h1").html("张三").html("赵六");

jQuery常用方法:

  jquery.size()//获取jquery获取dom的个数.
  jquery.val();//获取表单标签相关的值。
  jquery.html();//获取标签中的HTML代码。
  jquery.text();//获取标签中的纯文本,忽略html代码。

基础选择器

jQuery最常用,最简单选择器.通过元素的id,class,标签等查找DOM元素.
在网页中,每个id名称只能使用一次,class允许重复使用.

1、#id 用法: $(”#myDiv”); 返回值 单个元素的组成的集合

   说明: 这个就是直接选择html中的id=”myDiv”

2、Element 用法: $(”div”) 返回值 集合元素

   说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如 div, input, a 等等.

3、class 用法: $(”.myClass”) 返回值 集合元素

   说明: 这个标签是直接选择html代码中class=”myClass”的元素或元素组(因为在同一html页面中class是可以存在多个同样值的).

4、 用法: $(””) 返回值 集合元素

  说明: 匹配所有元素,多用于结合上下文来搜索

5、selector1, selector2, selectorN 用法: $(”div,span,p.myClass”) 返回值 集合元素

  说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合并到一个结果内.其中p.myClass是表示匹配元素
   p class=”myClass”

层次选择器

先说需求:
如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.
1 、ancestor descendant

  用法: $(”form input”) ;   返回值  集合元素
  说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开.

2、parent > child 用法: $(”form > input”) ; 返回值 集合元素

  说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素

3、prev + next

  用法: $(”label + input”) ;   返回值  集合元素
  说明: 匹配所有紧接在 prev 元素后的 next 元素

4、prev ~ siblings

  用法: $(”form ~ input”) ;    返回值  集合元素
  说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.
  注意:  (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

过滤选择器

过滤选择器:通过特定的过滤规则来筛选所需要的DOM元素.过滤规则与CSS中的伪类选择器语法相同.
即选择器以一个冒号(:)开头.
按照不同的过滤规则,可分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤,表单对象属性过滤选择器.

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注