jQuery02

jQuery选择器

 基本选择器

  标签选择器  $("h2" )选取所有h2元素

  类选择器 $(" .title")选取所有class为title的元素

ID选择器 $(" #title")选取id为title的元素

并集选择器 $("div,p,.title" )选取所有div、p和拥有class为title的元素

全局选择器 $("*" )选取所有元素

 

层次选择器

后代选择器 $("#menu span" )选取#menu下的<span>元素

子选择器 $(" #menu>span" )选取#menu的子元素<span>

相邻元素选择器 $(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl>

同辈元素选择器 $(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl>

 

属性选择器

[attribute]         $(" [href]" )选取含有href属性的元素

[attribute=value]    $(" [href ='#']" )选取href属性值为“#”的元素

[attribute !=value]   $(" [href !='#']" )选取href属性值不为“#”的元素

[attribute^=value]      $(" [href^='en']" )选取href属性值以en开头的元素

[attribute$=value]   $(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素

[attribute*=value]   $(" [href* ='txt']" )选取href属性值中含有txt的元素

过滤选择器

 基本过滤选择器

语法	描述	示例
:eq(index)	选取索引等于index的元素（index从0开始）	$("li:eq(1)" )选取索引等于1的<li>元素
:gt(index)	选取索引大于index的元素（index从0开始）	$(" li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1）
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的<li>元素（注：小于1，不包括1）
:header	选取所有标题元素，如h1~h6	$(":header" )选取网页中所有标题元素
:focus	选取当前获取焦点的元素	$(":focus" )选取当前获取焦点的元素
:animated	选择所有动画	$(":animated" )选取当前所有动画元素
语法	描述	示例
:first	选取第一个元素	$(" li:first" )选取所有<li>元素中的第一个<li>元素
:last	选取最后一个元素	$(" li:last" )选取所有<li>元素中的最后一个<li>元素
:not(selector)	选取去除所有与给定选择器匹配的元素	$(" li:not(.three)" )选取class不是three的元素
:even	选取索引是偶数的所有元素（index从0开始）	$(" li:even" )选取索引是偶数的所有<li>元素
:odd	选取索引是奇数的所有元素（index从0开始）	$(" li:odd" )选取索引是奇数的所有<li>元素

 

可见性过滤选择器

语法	描述	示例
:visible	选取所有可见的元素	$(":visible" )选取所有可见的元素
:hidden	选取所有隐藏的元素	$(":hidden" ) 选取所有隐藏的元素

 

 

 

jQuery选择器注意事项2-1

特殊符号的转义

<div id="id#a">aa</div>

<div id="id[2]">cc</div>

 

获取这两个元素的选择器

错误的

$("#id#a");

$("#id[2]");

正确的

$("#id\\#a");

$("#id\\[2\\]");

 

选择器中的空格

选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果

选取class为“test”的元素内部的隐藏元素

var $t_a = $(".test :hidden"); //带空格的jQuery选择器

选取隐藏的class为“test”的元素

var $t_b = $(".test:hidden");  //不带空格的jQuery选择器à交集选择器

 

1. 1. DOM操作分类

DOM操作分为三类：

• • • • DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
      • HTML-DOM：用于处理HTML文档，如document.forms
      • CSS-DOM：用于操作CSS，如element.style.color="green"
  • jQuery中的DOM操作

jQuery对JavaScript中的DOM操作进行了封装

jQuery中的DOM操作

• 1. 1. 1. 1. 样式操作
           2. 内容及Value值操作
           3. 节点操作
           4. 节点属性操作
           5. 节点遍历
• 设置单个属性

css(name,value) ;

或

• 同时设置多个属性

css({name:value, name:value,name:value…}) ;

示例；$(this).css("border","5px solid #f5f5f5");

或

$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});

• 获取属性值

css(name)

• 追加样式

$(selector).addClass(class);

或   $(selector).addClass(class1 class2 … classN);

示例:

$("h2").mouseover(function() {

     $("p").addClass("content border");

});

 

• 移除样式

$(selector).removeClass("class") ;

或   $(selector).removeClass("class1 class2 … classN ") ;

示例:

$("h2").mouseout(function() {

        $("p").removeClass("text content");

});

 

• 切换样式

toggleClass()

模拟了addClass()与removeClass()实现样式切换的过程

语法:

$(selector).toggleClass(class) ;

示例:

$("h2").click(function() {

    $("p").toggleClass("content  border");

});

 

• 判断是否含指定的样式

hasClass( )方法来判断是否包含指定的样式

语法:

$(selector). hasClass(class);

示例:

$("h2").mouseover(function() {

    if(!$("p").hasClass("content ")){

        $("p").addClass("content ");

        }

});

 

$("h2").mouseout(function() {

      if($("p").hasClass("content ")) {

        $("p").removeClass("content ");

    }

});

 

 

1. 内容操作

 

HTML代码操作

标签内容操作

属性值操作

 

• 获取元素中的html代码

$("div.left").html();

• 设置元素中的html代码

$("div.left").html("<div class='content'>…</div>");

 

1. 标签内容操作

 

• 获取元素中的文本内容

$("div.left").text();

 

• 设置元素中的文本内容

$("div.left").text("<div class='content'>…</div>");

 

 

• html( ) 和text( )方法的区别

html()设置可以包含文本和标签

text() 设置只能是文本

 

1. 属性值操作

• 获取元素的value属性值

$(this).val();

• 设置元素的value属性值

$(this).val(value);

 

1. 节点操作

jQuery中节点操作

查找节点（前面章节已讲）

创建节点

插入节点

删除节点

替换节点

复制节点

插入节点

 

• 元素内部插入子节点

1. append(content)

$(A).append(B)表示将B追加到A中

如：$("ul").append($newNode1);

 

1. prepend(content)

$(A). prepend (B)表示将B前置插入到A中

如：$("ul"). prepend ($newNode1);

 

• 元素外部插入同辈节点

after(content)

$(A).after (B)表示将B插入到A之后

如：$("ul").after($newNode1);

 

before(content)

$(A). before (B)表示将B插入至A之前

如：$("ul").before($newNode1);

 

• 删除节点

remove()：删除整个节点  $(selector).remove([expr]);

empty()：清空节点内容  $(selector).empty();

 

• 替换节点

replaceWith()

示例:

var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");

$(".gameList li:eq(2)").replaceWith($newNode1);

 

 

• clone()用于复制某个节点

$(selector).clone([includeEvents]) ;

参数ture或flase, true复制事件处理，flase时反之

 

• 属性操作

获取与设置元素属性

删除元素属性

 

attr()用来获取与设置元素属性

获取属性值

$(selector).attr([name]) ;

设置多个属性的值

$(selector).attr({[name1:value1]…[nameN:valueN]}) ;

示例:

$(".contain img").attr({width:"200",height:"80"});

 

删除元素属性

removeAttr()用来删除元素的属性

语法:$(selector).removeAttr(name) ;

示例  删除元素的alt属性

$(".contain img").removeAttr("alt");

 

 

节点遍历

children([expr]) 只考虑子元素而不考虑所有后代元素

 

示例

查找DIV中的每个子元素。

 

HTML 代码:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

$("div").children()

结果:

[ <span>Hello Again</span> ]

描述:

 

在每个div中查找 .selected 的类。

 

HTML 代码:

<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>

jQuery 代码:

$("div").children(".selected")

结果:

[ <p class="selected">Hello Again</p> ]

 

next([expr])返回后面那个紧邻的同辈元素

示例

 

描述:

 

找到每个段落的后面紧邻的同辈元素。

 

HTML 代码:

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

jQuery 代码:

$("p").next()

结果:

[ <p>Hello Again</p>, <div><span>And Again</span></div> ]

描述:

 

找到每个段落的后面紧邻的同辈元素中类名为selected的元素。

 

HTML 代码:

<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>

jQuery 代码:

$("p").next(".selected")

结果:

[ <p class="selected">Hello Again</p> ]