2015-07-22 JQuery 第二课(JQ元素获取,添加,删除,判断,遍历,取值,样式设置,改变对象,切换)

1、获取元素:

  1).size(): 获取元素的个数。

    $(“img”).size():获取有多少个img。

  2).eq():获取元素。

    $(“img[title]”).eq(1):获取第二个带有title属性的img标签。

    也可以写作: $(“img[title]”)[1],此括号里的1代表索引1,所以是对应第二个,一般多用eq()。

  3).get() :获得由选择器指定的DOM元素。

    x=$("p").get(0):获取第一个 p 元素的值。

  4)index():获取某项标签的索引。

    $(“div”).index($(this)):获取当前操作的这个div在所有div中的索引。

  5)find():搜寻标记获得新的集合。

    $(“p”).find(“span”): 在所有p标记元素中搜索span标记,获取一个新的元素集合。

  *$(this):表示当前操作对象。

  【例】var iNum=$(“li”).index($(“li[title=isaac]”)[0]) ,说明这句话的意思。

    答案: 1)  $(“li”):对所有的li标签进行查找;

        2)  $(“li”).index() :查找()内对象在所有li标签中的索引;

        3)  $(“li[title=isaac]”)[0]:查找第一个拥有“title=isaac”这个title属性的li标签;

        4)  最终解释为:对所有的li标签进行查找,查找出“第一个拥有‘title=isaac’这个属性的li标签"在所有li标签中的索引。

2、添加元素:addClass()

  $(“img[title]”).addClass(“myClass”) :给所有带有title属性的img标签,添加上myClass的样式。

3、删除元素:not()

  $(“li[title]”).not(“[title*=isaac]”) :在所有设置了title属性的li标签中,删除掉带有[title*=isaac]这种title属性的li标签。([title*=isaac]:含有isaac字符串的title)

  

注意:not()方法所接受的参数不能包含特定的元素,只能是通用的表达式。
错误:$(“li[title]”).not(“img[title*=isaac]”)
正确: $(“li[title]”).not(“[title*=isaac]”)

4、过滤元素:filter()

  $(“li”).filter(“[title*=isaac]” ) 等同于 $(“li[title*=isaac]”) :对所有的li标签,过滤筛选出包含有[title*=isaac]这种title属性的标签。

注意:

1)filter中的参数,不能直接是等于匹配,只能是前匹配^=,后匹配&=,任意匹配*=

2)filter(函数) 函数要求返回布尔值,对于返回值为true的元素保留,否则去除

5、判断元素:is()

  var bImge=$(“div”).is(“img”) :判断页面中的div块中是否包含img标记,返回布尔值,是或否。

6、遍历元素:each()

  *遍历:将选中的标签,一个一个全部经历一遍。

  在js中:

$(function(){
  $(“img”).each(function(index){
    this.title="这是第"+index+"副图,id是"+this.id+",name是"+this.name;
  });
});

  在html中:

  <img id="img1" name="a1" src="1.jpg">

  遍历所有的img,让每一个img都设置一个title属性值为:这是第 n 幅图,id是img1,name是a1

7、获取属性/设置属性值:attr()

  attr()有2个作用:一个是获取属性值,一个是为属性设置值。

  1)获取属性值:

    var s = $("#txt").attr("value");  获取到txt里面的value属性值

  2)设置属性值:

    $("#txt").attr({"value":"xxxxx","title":"aaaaa"});  查询txt,为其中的value设值xxxxx的值,为title设值aaaaa的值

8、设置元素样式:

  1)添加样式:addClass()

$("#btn").click(function(){    
  $(this).addClass("b");    //找到id为btn的标签,点击后让它在原样式基础上加上样式b
});

  2)删除样式:removeClass()

$("#btn").click(function(){    
  $(this).removeClass("b");    //找到id为btn的标签,点击后让它在原样式基础上移除样式b
});

  3)写入样式:css()

$("#btn").click(function(){    
  $(#d1).css("color","blue");    //找到id为btn的标签,点击后让id为d1的标签拥有“颜色变成蓝色”的css样式
});

4)切换样式:toggleClass()

$("#btn").click(function(){    
  $(#d1).toggleClass("highlight");    //点击时不断切换,样式交替执行,一会儿有此样式一会儿没有
});

  

9、改变操作对象:

  1).end():为当前对象的前一步对象进行操作

  2).andself():为当前对象和它的前一步对象都进行操作

  【例】说明以下三句话的含义:

  1)$(“p”).find(“span”).addClass(“myClass1”).addClass(“myClass2”)

  2)$(“p”).find(“span”).addClass(“myClass1”).end().addClass(“myClass2”)

  3)$(“p”).find(“span”).addClass(“myClass1”).andself().addClass(“myClass2”)

  答:1)在所有p标签中,找到span标签为它们加上myClass1样式,再加上myClass2样式

    2)在所有p标签中,找到span标签为它们加上myClass1样式,然后返回至上一个对象$(“p”),为所有p标签加上myClass2样式

    3)在所有p标签中,找到span标签为它们加上myClass1样式,并且为它们自己以及上一个对象$(“p”)加上myClass2样式

10、动态切换:

  1)mouseover():鼠标移动上去时改变样式

$(“p”).mouseover(function(){

  $(this).css(“color”,”red”);

});

  2)mousetout():鼠标移走后改变样式

$(“p”).mouseout(function(){

  $(this).css(“color”,”red”);

});

  3)hover(事件1,事件2):鼠标放上去事件1,移开事件2

$(“p”).hover(function(){

  $("#d1").addClass(“c”);

  },function(){

      $("#d1").removeClass(“c”);

});

    对p标签中id=d1的标签,鼠标放上时加c样式,移开时移除c样式。

11、判断样式:hasClass()

  $(“li”).hasClass(“myClass”);  判断li中是否含有myClass的样式,返回为布尔型,是或否

时间: 2024-10-14 09:05:09

2015-07-22 JQuery 第二课(JQ元素获取,添加,删除,判断,遍历,取值,样式设置,改变对象,切换)的相关文章

jQuery 复制节点的元素实现添加到购物车功能

描述: 用户点击左边div中的商品,对应商品会自动添加到右面的div中,类似电子商城中的添加到购物车功能. 主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将相应信息进行克隆,然后添加到右面的div中. 效果如果: show you code: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery test</tit

Jquery 第二课(jq:元素获取、添加、删除、过滤、判断、遍历、取值,样式设置、改变对象、切换、判断)

1.获取元素: 1).size(): 获取元素的个数. $(“img”).size():获取有多少个img. 2).eq():获取元素. $(“img[title]”).eq(1):获取第二个带有title属性的img标签. 也可以写作: $(“img[title]”)[1],此括号里的1代表索引1,所以是对应第二个,一般多用eq(). 3).get() :获得由选择器指定的DOM元素. x=$("p").get(0):获取第一个 p 元素的值. 4)index():获取某项标签的索引

2015.7.22 第十一课 课程重点(jq:元素获取、添加、删除、过滤、判断、遍历、取值,样式设置、改变对象、切换、判断)

1.获取元素: 1).size(): 获取元素的个数. $(“img”).size():获取有多少个img. 2).eq():获取元素. $(“img[title]”).eq(1):获取第二个带有title属性的img标签. 也可以写作: $(“img[title]”)[1],此括号里的1代表索引1,所以是对应第二个,一般多用eq(). 3).get() :获得由选择器指定的DOM元素. x=$("p").get(0):获取第一个 p 元素的值. 4)index():获取某项标签的索引

Jquery第二课 Javascript基础

基础知识 网页由三个部分组成:HTML.CSS和JavaScript.它们分别完成不同的功能,其中HTML描述页面内容.CSS负责内容的展示.JavaScript添加交互功能和动态效果.三者一起组成一个完整的Web页面. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>长沙戴维营教育jQuery教程 第二课</title> <!-- CS

jquery操作select下拉框的多种方法(选中,取值,赋值等)

jQuery获取Select选择的Text和Value:语法解释:1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text3. var checkValue=$("#select

jquery操作select下拉框的多种方法(选中,取值,赋值等) 转载

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text 3. var checkValue=$("#se

DOM元素属性值如果设置为对象

结论:内部会调用toString方法,将设置的对象转换为字符串添加给相应的属性: 这个问题呢,是通过jQuery的each方法中,回调函数的this指向问题而来: 我们知道,回调函数中的this如果指向的是基本数据类型,那么系统会自动将这个基本数据类型的值包装为对应的对象类型: 就比如: 数组里面存的是string类型的值,然后jq实例调用each方法,打印的this如下图所示: this指向的基本数据类型的值被转换为了String类型: 但是这里说的不是这个问题,而是和这个问题类似,我们在给D

jquery操作select(取值,设置选中)

最近工作中总出现select 和 option问题,整理一下,内容大部分源于网络资料 一.基础取值问题 例如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector").val("pxx"); 2.设置text为pxx的项选中 $(".selector").find("option[text='pxx']").

jquery操作select(取值,设置选中) 基础

每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector").val("pxx"); 2.设置text为pxx的项选中 $(".selector").find("option[text='pxx']").attr(&qu