文档章节

jQuery 第二章

hey--老妖
 hey--老妖
发布于 2017/02/11 17:39
字数 1245
阅读 1
收藏 0

1.jQuery选择器

jQuery找到元素后添加行为,而css是找到元素后添加样式。 jQuery比css更强大,并有跨浏览器的兼容性。

2.使一个表格隔行变色

步骤:1.根据id获取表格 2.在表格内获取<tbody>元素 3.在<tbody>元素下获取<tr> 4.循环输出获取的<tr>元素 4.<tr>取膜2,根据奇偶设置不同颜色

<body>
  <table id="tb">
    <tbody>
      <tr>
        <td>第一</td>
        <td>第一</td>
      </tr>
      <tr>
        <td>第二</td>
        <td>第二</td>
      </tr>
       <tr>
        <td>第一</td>
        <td>第一</td>
      </tr>
      <tr>
        <td>第二</td>
        <td>第二</td>
      </tr>
    </tbody>
  </table>
 <script type="text/javascript">
   var tbs=document.getElementById("tb");
   var tbodys=tbs.getElementsByTagName("tbody")[0];
   var trs=tbodys.getElementsByTagName("tr");
   for(var i=0;i<trs.length;i++){
    if(i%2==0){
      trs[i].style.backgroundColor="pink"
    }
   }
 </script>
</body>

用jQuery写就是:

<script>
  $("#id tbody tr:even").css("background","red")
</script>

厉害了,我的jQuery,一句话就搞定

  3.判断多选框是否被选中

<body>
  <input type="checkbox" name="check" id="" value="1" >
  <input type="checkbox" name="check" id="" value="2">
  <input type="checkbox" name="check" id="" value="3" >
  <button id="btn">你选中的个数</button>
  新建一个空数组
  获取所有name为“check”的多选框
  循环判断多选框是否被选中,如果被选中则添加到数组中
  获取输出按钮 然后为按钮添加onclick事件,输出数组的长度即可
 <script type="text/javascript">
  var btn=document.getElementById("btn");          //获取ID为"btn"的元素
  btn.onclick=function(){                          //为变量btn绑定点击事件
    var arr=new Array();                           //创建一个新数组
    var item=document.getElementsByName("check");  //获取名字为"check"的元素
    for(var i=0;i<item.length;i++){                //循环这组数据
      if(item[i].checked){                         //判断多选框是否被选中
        arr.push(item[i].value);                   //把符合条件的添加到数组里
      }                                            //push()是JavaScript数组中的方法
    }
    alert(arr.length)                             //弹出 数组的长度
  }
 </script>
</body>

用jQuery写

<script type="text/javascript">
    $("#btn").click(function(){
      var items=$("input[name='check']:checked")
      alert(items.length)
    })
  </script>

4.层次选择器

$("div span") 选取div里所有的span元素
$("div>span") 选取div元素下元素名是span的子元素
$(".one+div") 选取class为one的下一个div同辈元素           //$(".one").next("div") 这样写更方便
$("#two~div") 选取ID为two的元素后面的所有div同辈元素       //$("#two").nextAll("div")

选取#prev所有的同辈div元素,无论前后位置

$("#prev").siblings("div").css("color","red")

5.过滤选择器

:first    //$("div:first")选取所有div元素的第一个div

:last    //$("div:last")选取所有div元素的最后一个div

:not(selector)  //$("input:not(.myclass)") 选取class不是myclass的input元素

:even    //$("input:even")选取索引是偶数的input元素

:odd     //$("input:odd") 选取索引是奇书的input元素

:eq(index)     //$("input:eq(1)") 选取索引等于1的input元素

:gt(index)    //$("input:gt(1)") 选取索引大于1的input元素

:lt(index)    //$("input:lt(1)")选取索引小于1的input元素

:header    //$(":header")选取所有的标题元素,例如<h1>、<h2>......

:animated   //$("div:animated")选取正在执行动画的div元素

:fous      //$(":fous") 选取当前获取焦点的元素

6.内容过滤选择器

:contains(text)  //$("div:contains("我")") 选取文本含有“我”的div元素

:empty             //$("div:empty")选取不包含子元素(包括文本元素)的div元素

:has(selector)   //$("div:has(p)") 选取含有p元素的div元素

:parent           //$("div:parent") 选取拥有子元素(包括文本元素)的div元素

7.可见性过滤选择器

:hidden           //$("div:hidden") 选取所有不可见的div元素

:visible            //$("div:visible")选取所有可见的div元素

8.属性过滤选择器

[attribute]     //$("div[id]") 选取拥有属性id的元素

[attribute=value]       //$("div[id=xx]") 选取id为xx的div元素

[attribute!=value]      //$("div[id!=xx]")  选取id不等于xx的div元素

[attribute^=value]     //$("div[id^=xx]") 选取属性id以 xx 开始的div元素

[attribute$=value]     //$("div[id$=xx]") 选取属性id以 xx为结束的div元素

[attribute*=value]    //$("div[id*=xx]")选取属性id含有xx的div元素

[attribute|=value]     //$("div[id|=xx]")  选取属性id等于xx 或以xx为前缀的元素(例xx-arr)

[attribute~=value]   //$("div[id~=xx]") 选取属性id用空格分割的值中包含字符xx的div元素

[attribute1][attribute2]   //$("div[id][title$='test']") 选取拥有属性id,并且属性title以“test”结束的div元素

9.子元素过滤选择器

:nth-child(index)         //$("div:nth-child(index)")选取每个父元素下的第index个子元素或者奇偶元素(index从1算起)

:first-child              //$("ul li:first-child") 选取每个父元素的第一个子元素

:lasst-child            //$("ul li:last-child")选取每个父元素的最后一个子元素

:only-child            //$("ul li:only-child")选取ul中唯一一个li元素

10.表单对象属性过滤选择器

:enabled            // $("#form1:enabled")选取id为form1的表单内的所有可用元素

:disabled         //$("#form1:disabled")选取id为form1的表单内所有的不可用元素

:checked          //$("input:checked")选取所有被选中的input元素

:selected         //$("select option:selected")选取所有被选中的选项元素

11.表单选择器

:input           //$(":input")选取所有<input>、<textarea>、<button>元素

:file              //$(":file")选取所有上传域

。。。。。。还有很多

 

© 著作权归作者所有

共有 人打赏支持
hey--老妖
粉丝 3
博文 38
码字总数 21133
作品 0
潮州
前端工程师
私信 提问
分享26本关于Jquery的学习书籍(免费下载)

分享26本关于Jquery的学习书籍(免费下载) 1、精通JavaScript+jQuery 2、网友small6分享锋利的jQuery实例源码 3、网友small6分享jQuery权威指南配套源代码 4、犀利开发jQuery内核详解与实践...

邓剑彬
2012/11/30
3.3K
8
Zepto.js简介(第二章)

接着上章的继续记录。 zepto 特点: 1、体积8kb 2、针对移动端的框架 3、语法同jquery大部分一样,都是$为核心函数 4、目前功能完善的框架体积最小的左右 zepto同jquery不同的API attr同pro...

张靖bibibi
2018/06/22
0
0
Web前端开发必备:《Jquery实战》第3版 介绍

目标读者 本书适合想深入学习jQuery的Web开发人员、全栈工程师、架构师。jQuery是互联网上最流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了...

frankxulei
2018/06/26
0
0
8 个最新的 jQuery Mobile 在线教程推荐

jQuery Mobile目前已经发布了RC2版本, 随着类库的完善,jQueryMobile必将成为移动端开发的利器之一,今天我们收集了2011年最新的8个jQuery移动开发教程,从最简单的入门介绍,到高级的开发应...

MrMign
2011/11/01
4.1K
3
从零实现一个简易的jQuery框架之二—核心思路详解

如何读源码 整体框架甚是复杂,也不易读懂。但是若想要在前端的路上走得更远、更好,研究分析前端的框架无疑是进阶路上必经之路。但是庞大的源码往往让我们不知道从何处开始下手。在很长的时...

余大彬
2018/08/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Redis之父表示ARM服务器没戏!

ARM表示Neoverse N1平台和E1 CPU即将发布,Neoverse N1和E1采用7nm制程,并且为服务器和通信设备增加重要提升,拥有高可扩展性、高处理量以及高性能,将分别在2020年和2021年投入使用。 与C...

linuxCool
13分钟前
1
0
YARN 内存参数终极详解

YARN环境中应用程序JAR包冲突问题的分析及解决 Hadoop框架自身集成了很多第三方的JAR包库。Hadoop框架自身启动或者在运行用户的MapReduce等应用程序时,会优先查找Hadoop预置的JAR包。这样的...

stys35
18分钟前
0
0
Mybatis常用总结一

这一节的学习强烈建议实际操作 主键自增和自定义主键 实现描述:我们在写程序时,时常会遇到这样的问题:插入一条数据,但因有主键的存在,而有时候会报“违反唯一性约束”的错误,我们可以使...

大笨象会跳舞吧
19分钟前
0
0
计数二进制子串

leetcode:https://leetcode.com/problems/count-binary-substrings/ 给定一个字符串 s,计算具有相同数量0和1的非空(连续)子字符串的数量,并且这些子字符串中的所有0和所有1都是组合在一起...

woshixin
22分钟前
0
0
mysql utf8mb4字符集,存储emoji表情

字符集utf8mb4 utf8mb4兼容utf8,且比utf8能表示更多的字符。 看unicode编码区 从1 ~ 126就属于传统utf8区,当然utf8mb4也兼容这个区,126行以下就是utf8mb4扩充区,什么时候你需要存储那些...

我心中有猛狗
24分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部