Jquery选择器

详细学习一下JQuery选择器。

JQuery选择器完全继承了CSS的风格,它也分标签选择器,类选择器和ID选择器,元祖选择器,层次选择器。

关于具体的说明,完全可以参考W3School或者锋利的JQuery。我这里只记录我觉得重要的以及遇到的问题。这篇文章不断更新。

为对象添加CSS样式。

$("#id").css(“color:red")

为多个元素添加样式

$("span #id").css(“color:red")

为id为“id”和span元素添加样式。

对于层次选择器,还是需要注意一些用法的区别。

$(".level1 > a")表示类为level1元素的子元素a;
$(".level1 a")表示类为level1元素里面的所有元素a;

$(".level1 + a")表示选择类为level1的元素的下一个同辈元素a,可以使用next()方法代替.
$(".level1 ~ a")表示选择类为level1的元素的所有同辈元素a.

$(function(){

    $(".level1 ul").hide();
    $(".level1 > a").click(function(){
        $(this).next().show()
            .parent().siblings().children("ul").hide();
        return false;
    });

})

siblings()表示前后所有的同辈元素。

请叫我分割线.................................................................

今天继续学习了选择器和DOM操作,其实功能很多,感觉并不能一下全记住,只能在用的时候再熟悉,不过至少你得知道到底能做什么。

DOM操作:

1、查找节点

  • 查找元素节点;
  • 查找属性节点,$("p").attr('href');

2、插入节点

主要记住各种插入节点的方法,append,appendTo,before,after等等。

3、删除节点

1)、remove 删除所有匹配的元素;

2)、detach
和remove功能一样,但会保留jquery对象;

3)、empty
该方法是清空节点

4、复制节点

clone方法,如果要新元素,复制功能,要加true。

5、复制节点
replacewith

6、属性操作

  • 获取属性,$("p").attr('href');
  • 删除属性 $("p").removeAttr('href');

7、样式操作

  • 获取样式,就是利用属性操作,属性是class;
  • 追加样式, 利用addClass方法;
  • 移除样式 ,removeClass;
  • 切换样式, toggleClass;
  • 判断是否有样式 hasClass;

8、设置、获取HTML、文本和值
- html() $("p").html(),获取html值,$("p").html(' dd ')设置内容;
- text() $("p").text();获取匹配元素的文本内容;
- var() 获取或设置元素的值,一般用来获取或设置表单值;

9、遍历节点

  • next(),后面相邻的同辈元素;
  • prev(),前面相邻的同辈元素;
  • siblings() 前后相邻的元素;
  • children() 获取匹配元素的所有子元素;
  • parent() 获取匹配元素的父级元素;
  • parents(),获取匹配元素的祖先元素;
--------EOF---------
本文微信分享/扫码阅读