jQuery 第二章

最新推荐文章于 2024-04-26 16:47:03 发布

chuosaomeng9354

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量163

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/xiaojunx/blog/836028

版权

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")选取所有上传域

。。。。。。还有很多

转载于:https://my.oschina.net/xiaojunx/blog/836028

chuosaomeng9354

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 第二章

1.jQuery选择器 jQuery找到元素后添加行为，而css是找到元素后添加样式。 jQuery比css更强大，并有跨浏览器的兼容性。 2.使一个表格隔行变色步骤：1.根据id获取表格 2.在表格内获取<tbody>元素 3.在<tbody>元素下获取&lt...
复制链接

扫一扫