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的样式,返回为布尔型,是或否

转载于:https://www.cnblogs.com/jtfdh/p/4675393.html

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

  1. 编写Java程序,从键盘输入一个正整数n(n≥2),随机生成一个n阶方阵,每个元素均为整数,其取值范围为[100,999]。然后输出该方阵元素中的最大值和最小值。

    编写Java程序,从键盘输入一个正整数n(n≥2),随机生成一个n阶方阵,每个元素均为整数,其取值范围为[100,999].然后输出该方阵元素中的最大值和最小值. ```java package Ja ...

  2. jQuery循环遍历取值

    1:循环遍历取值 var arr = new Array(); $(".plus-tag a span").each(function(i) { arr[i] = $(this). ...

  3. Jquery第二课 Javascript基础

    基础知识 网页由三个部分组成:HTML.CSS和JavaScript.它们分别完成不同的功能,其中HTML描述页面内容.CSS负责内容的展示.JavaScript添加交互功能和动态效果.三者一起组成一 ...

  4. jq select 修改选中_「jquery select」jquery操作select(取值,设置选中) - seo实验室

    jquery select 最近工作中总出现select 和 option问题,整理一下,内容大部分源于网络资料 一.基础取值问题 例如 1.设置value为pxx的项选中 $(".sele ...

  5. jquery 向html body 元素内添加子元素并设置样式知识点.txt

    // 向网页body中添加元素. let innerHTML = '<div id="BIMFloors">BIM分层</div>'; $("bo ...

  6. jq 如何获取多选框选中的值

    jquery如何获取多选框选中的值,有两种方法 1.通过id获取是否选中(单个) 1)引入jquery文件 2)Html设计如下 <div><span>运动类:</spa ...

  7. jq 遍历取值某一行内某元素的值

    jq取表格中某一行内某元素的值 : //click事件,取表格中某一行内某元素的值 $('li').each(function(){var thisHang = $(this);$(thisHang) ...

  8. java 添加用户 数据库,跟屌丝学DB2 第二课 建立数据库以及添加用户

    在安装DB2 之后,就可以在 DB2 环境中创建自己的数据库.首先考虑数据库应该使用哪个实例.实例(instance) 提供一个由数据库管理配置(DBM CFG)文件控制的逻辑层,可以在这里将多个数据 ...

  9. 第二课(2)添加导航栏

    self.view.backgroundColor = gray; 第二句的代码的意思就是:我的界面颜色等于gray self=我的意思. 我是谁呢? 我们是ViewController文件之中 Vi ...

最新文章

  1. 【原创译文】Jive Circle案例学习:以用户为中心的设计
  2. python获取计算机信息系统数据罪_工作心得:破坏计算机信息系统罪与非法获取计算机信息系统数据罪的区分...
  3. WLAN高密无线网络部署的信道问题
  4. Cocos2d-JS v3.0 alpha
  5. List集合的remove一个对象的方法
  6. python装饰器_Python基础-装饰器
  7. Android现学现用第十一天
  8. 【Web技术】(实验一)HTML静态网页设计
  9. 强制浏览器使用webkit内核
  10. 深度优先搜索DFS详解2(非常详细,容易理解)
  11. STM32之贪吃蛇游戏
  12. ae渲染存在偏移_以后请不要问我AE和PR有什么区别了...
  13. 计算三维空间中直线和三角形的交点
  14. 【考研英语语法】复杂句的逻辑
  15. python调用word_Python调用win32com.client.Dispatch('Word.Application')报错汗血宝马
  16. 中国1978-2008年GDP与M2关系的实证分析
  17. Spring框架之AOP详解(带实战详细步骤)
  18. 紫外线强度检测传感器GUVA-S12SD的应用
  19. Windows SDK DDK WDK (Windows Driver Kit) 区别
  20. React 入门:JSX

热门文章

  1. textview 滚动显示.txt
  2. 底层经典书籍-编译原理
  3. Eratosthenes筛选求质数
  4. 再探文件输入和输出函数
  5. C#之windows桌面软件第一课:倒时器软件
  6. UART, SPI, IIC的详解及三者的区别和联系
  7. STM32中I2C总线上数据的读、写。
  8. 设计模式:单例模式之双重检查
  9. Linux 常见的六大 IPC 通信方式
  10. Vue 教程第十七 篇—— Vuex 之 module