Jquery

一、回顾JS DOM 操作

DOM属性操作：

elementNode.属性名＝属性 （DHTML） 

elementNode.style.样式

　elementNode.innerHTML="<p></p>"

onmouseout 与onmouseleave

函数属性：

标签对象.事件＝function(){};
事件绑定：为每个事件都绑定

例子回顾：
饶晕了。。。。

<script type="">
    var s=10;
    function foo(){
      console.log(s);
      var s=5;
      console.log(s);
      function s(){console.log("ok")}// 函数的定于或声明是在词法分析时完成的,执行时已不再有任何操作

      console.log(s);
    }
    foo();
    function bar(age) {
            console.log(age);  //age=function
            var age = 99;      //age=99
            var sex= 'male';
            console.log(age);   //99
            function age() {
                alert(123)
            };
            console.log(age);   //99
            return 100;
    }
    result=bar(5);
</script>

二、Jquery 

 

 

在使用Jquery前，要先导入jquery 

<script src="jquery-3.2.js"></script>

jquery 寻找元素的方式：

$("p").css("color",""red) 都是由$号开头 p 是标签，

如：

    console.log($("p").innerText)//innerText 是DOM对象的属性，这里用的是jquery对象
    console.log($("p")[0].innerText) //这样就可以在JQUERY下使用js 的dom对象

三、Jquery 基本语法 

jquery 声明变量：

声明变量还是和js 一样 ,  用 var 声明：

var ele=document.getElem....//这是一个DOM 对象
var $ele=$("p") //这是一个jquery对象

jquery 选择器：

语法：$(selector).action()

四、选择器系列

　　基本选择器：

    *: 表示所有的  $("*").css("color","red")
    #: $("#p2").css("color","blue")  //表示ID查找<p id="p2">I'm p2</p>
    .: $(".p3").css("color","blue")  //表示class 查找<p class="p3">I'm p3</p>

　　层级选择器：

先看html

<div class="outer">
   <p>ppp</p>
   <div class="inner">
        <p>pppp</p>
   </div>
</div>

<p>abcdefg</p>

    $(".outer p").css("color","red") //父代选择器
    $(".outer>p").css("color","red") //子代选择器
    $(".outer+p").css("color","red") //毗聆选择器
    $(".outer~p").css("color","red") //兄弟选择器

       属性选择器：

先看HTML
<div abc="dada">pppppp</div>
<div abc="dadaa">pppppp</div>

<input type="text" value="123">
    属性选择器：
<script src="jquery-3.2.1.js"></script>
<script>
    $("[abc]").css("color","green");//找到名字为abc的标签，并给标签样式
    $("[abc=dada]").css("color","green"); //找到名字abc=data的标签，并给标签样式；
    $([type="text"]).css("border","3px solid black"); //找到type="text" 的标签，并给border样式
    //表单选择器可以 简写如下：
    //$(:"text").css("border","3px solid black");

</script>

 

五、筛选器系列

   基本筛选器：

<ul>
       <li class="item">111</li>
       <li class="item">222</li>
       <li class="item">333</li>
       <li class="item">444</li>
 </ul>
--------------------------JS---------------现在要拿到一个指定的item元素，那for循环里就要再加一个条件，显得稍麻烦
    var eles=document.getElementsByClassName("item")
    for (var i=0;i<eles.length;i++){
        eles[i].style.color="blue";
    }

------------------------jquery--------------现在要拿 ul 其下面的第一个标签
$("ul .item:first").css("color","green")

----------拿最后一个
$("ul .item:last").css("color","green")

---------指定其中的第三个li变样式
$("ul .item:eq(2)").css("color","green") //索引为2，第三个值
------------还可以按奇数，偶数取
$("ul .item:odd").css("color","green")
------------找位置为 3 后面的标签
$("ul .item:lt(3)").css("color","green")

 

查找筛选器：

<div class="div1">
    <div class="div2">
        <p id="p1">pppp</p>

    </div>
    <p class="p2">abcdefg</p>
    <a href="#"> click</a>
    <ul>
        <li class="item active">111</li>
        <li class="item">333</li>
        <li class="item">333</li>
        <li class="item">333</li>
        <li class="item">333</li>
        <li class="item items">333</li>
        <li class="item">333</li>
    </ul>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
$(".div1").children()//这是找到所有的子代标签----子代查找
$(".div1").children("a")//只找到a标签

在运用时，经常用到的
$(".div1").children("p").css("color","red") //子代标签
$(".div1").find("p").css("color","red")//后代选择器

 

兄弟标签 next() nextAll() nextUntil() siblings()

 $(".active").next().css("background-color","red");//下面的一个标签
$(".active").nextall().css("background-color","red")//下面的所有
$(".active").nextUntil(".items").css("background-color","red")//直到items。items是结束条件

//兄弟查找
//siblings
$(".div").siiblings().css("background-color","red")

 

 　 过滤筛选器：

<ul>
    <li class="item">111</li>
    <li class="item">333</li>
</ul>

<script src="jquery-3.2.1.js"></script>
<script>
    指定其中的第三个li变样式//推荐使用这种方式，
    $("ul .item:eq(2)").css("color","green")
    $("ul li").eq(2).css("color","green");
      
     //jquery 支持链式操作(一直点，如:$("ul  li").eq(1).hasClass("item").css("color","black"))
    var $res=$("ul li").eq(1).hasClass("item");
    console.log($res);

</script>

 全选：反选功能：

function checkboxall(){
        checkbox=$('#tbody').find('input[type=checkbox]');
        for(i=0;i<checkbox.length;i++){
            console.log(checkbox[i])
            if(checkbox[i].checked==false){
                checkbox[i].checked=true;
            }

        }
    }
    function checkbox_reverse() {

        chebo=$('#tbody').find('input[type=checkbox]');
        for(i=0;i<chebo.length;i++){
             if(chebo[i].checked==false){
                 chebo[i].checked=true
             }
             else if(chebo[i].checked==true){
                 chebo[i].checked=false
             }
        }
    }