Jquery入门

[TOC]

学习目标

什么是jquery？

jquery是一个优秀的JS库，大型开发必备

jquery的好处

简化JS的复杂操作
不再需要关心兼容性
提供大量的实用方法

如何学习jquery

www.jquery.com JQ的官方网站
JQ只是辅助工具，要正确面对
需要分阶段学习

版本问题

 1.0  兼容IE8以下<br />        2.0  兼容IE8以上<br />        3.0<br />      【注】函数大部分相同。

设计思想

选择网页元素

模拟css选择元素

请参阅我们的 CSS 选择器参考手册。http://www.runoob.com/cssref/css-selectors.html

独有的表达式选择

多种选择方法 ```javascript

div文本

p文本

<a name="8zicW"></a>
### JQ的写法

- 方法函数化(js中原有的所有通过等于号赋值的写法，全部变成了通过函数传参的方式完成)。
```javascript
$(function(){
      //这里的代码，也是页面加载完成以后去执行的。
      //添加点击 事件绑定变成了函数的写法
      $("#div1").click(function(){
        // alert("我被点击了");
        $("#div1").css("backgroundColor", 'blue');
      })
})
<div id = 'div1'><em>em文本</em>div文本<strong>strong文本</strong></div>

取值赋值一体化

$(function(){
    $("#div1").click(function(){
      //取值
      // console.log($("div").html()); //取值，直接获取第一个符合条件的元素的内容
      // $("div").html("<h1>hello world</h1>"); //赋值，将所有的被选中的元素进行赋值

      // $("div").css("backgroundColor", 'blue');

      // alert($("div").css("backgroundColor"));

      // 设置多个样式
      $("div").css({
        width: 50,
        height: "50px",
        backgroundColor: 'orange'
      })
    })
})
<div id = 'div1'><em>em文本</em>div文本<strong>strong文本</strong></div>
<div>div2文本</div>
<div>div3文本</div>

链式操作（js代码后面要跟jq函数，这样this的指向不容易乱）

$(function(){
    // $("#div1").click(function(){
    //   alert("我被点击了");
    // })

    // $("#div1").mouseover(function(){
    //   //JS代码后面要跟JQ函数
    //   $(this).css("backgroundColor", 'blue');
    // })

    // $("#div1").mouseout(function(){
    //   //JS代码后面要跟JQ函数
    //   $(this).css("backgroundColor", 'orange');
    // })

    //简便的写法，链式操作，对我们的代码进行简化

    $("#div1").click(function(){
      alert("我被点击了");
    }).mouseover(function(){
      //JS代码后面要跟JQ函数
      $(this).css("backgroundColor", 'blue');
    }).mouseout(function(){
      //JS代码后面要跟JQ函数
      $(this).css("backgroundColor", 'orange');
    }).css("backgroundColor", 'green')
})
<div id = 'div1'><em>em文本</em>div文本<strong>strong文本</strong></div>
<div>div2文本</div>
<div>div3文本</div>

JQ和JS的关系

JQ和JS可以共存，但不能混用

谁的方法就是谁的方法。例如：js里面的innerHTML方法，jq里面的HTML方法

JQ的方法

filter（）过滤，对已选择的节点进行过滤，里面可以传值
not（）是filter反义词

has（）选择子元素里面拥有括号里面的父元素 ```javascript $(function(){

//filter 过滤，对已选择节点，进行二次筛选
// $("div").filter(".box").css("backgroundColor", 'red');

//not 是 filter的反义词
// $("div").not(".box").css("backgroundColor", 'red');

  //has 拥有
  $("div").has(".box").css("backgroundColor", 'red');

})

div1文本strong文本

你好

div2文本


- prev（）兄弟节点的上一个
- next（）兄弟节点的下一个
- find（）查找子节点
```javascript
$(function(){
         $("em").prev().css("backgroundColor", 'red');
         $("em").next().css("backgroundColor", 'red');

         $("#div3").next().css("backgroundColor", 'red');

         $("div").css("backgroundColor", 'blue');

        //find方法是用于查找子节点的
         $("div").find("div").css("backgroundColor", 'pink');

         $("div div").css("backgroundColor", 'pink');
})
<body>
    <div id = 'div1'>
      <p>p</p>
      <em>em</em>
      <div id = 'div3'>div</div>
    </div>
    <div id = 'div2'>
      div2
      <p>p</p>
      <em>em</em>
      <div id = 'div3'>div</div>
    </div>
</body>

eq（）括号里面当前节点的第几个元素节点
index() 获取当前节点在兄弟节点中的下标

attr 专门操作行间的属性 ```javascript

div文本


- addClass（）给当前元素节点添加class属性
- removeClass（）删除当前元素节点的class属性
```javascript
$(function(){
      //添加class
      // $("#div1").addClass("box2 box3 box4");

      $("#div1").removeClass("box2 box3");
})
<div id = 'div1' class = 'box1 box2'></div>

width系列

<style>
    #div1{
      width: 100px;
      height: 100px;
      border: 1px solid black;
      padding: 8px;
      margin: 20px;
    }
</style>
<script>
    /*
       width()    innerWidth()    outerWidth()
       height()   innerHeight()   outerHeight()
    */
    $(function(){
      console.log($("#div1").width());             //width
      console.log($("#div1").innerWidth());        //width + padding
      console.log($("#div1").outerWidth());        //width + padding + border
      console.log($("#div1").outerWidth(true));    //width + padding + border + margin
    })
</script>
<body>
  <div id = 'div1'></div>
</body>

节点操作（插入和删除）

insertBefore() before() 前者是找到节点往后面节点前面插，后者是后面的节点往前面节点前面插。可以利用后者进行链式操作
insertAfter() after()
appendTo() append()
prependTo() prepend()

remove() ```javascript $(function(){

//找到span节点，插入到div节点的前面
// $("span").insertBefore($("div")).css("backgroundColor", 'red');
//div前面是span
$("div").before($("span")).css("backgroundColor", 'red');

  //找到div节点，插入到span节点的后面
  // $("div").insertAfter($("span"));

  //找到span，插到的div节点的子节点的末尾
  // $("span").appendTo($("div"));

  //找到span节点，插入到div节点子节点的首位
  // $("span").prependTo($("div"));

  //删除
  // $("span").remove();

})

div文本em文本

span文本

<a name="sxJeY"></a>
### on方法，事件绑定

1. 给一个事件绑定一个函数
1. 给多事件绑定一个函数
1. 给多个事件绑定多个函数
1. 可以通过on方法事件委托
```javascript
//1
$("div").on("click", function(){
      alert("点击");
})
//2
var i = 0;
      $("div").on("click mouseover", function(){
        this.innerHTML = i++;
})
//3
            function show(){
        console.log("hello world");
      }

      $("div").click(show);
      $("div").on({
        click: function(){
          this.style.backgroundColor = 'blue'
        },
        mouseover: function(){
          this.style.backgroundColor = 'orange'
        },
        mouseout: function(){
          this.style.backgroundColor = 'yellow'
        }
})
//4.中间第二个参数，写的触发对象的选择器
       $("ul").on("click", "li.box", function(){
       $(this).css("backgroundColor", 'red');
})
//off（）取消
$("button").click(function(){
        //取消某个元素节点上所有的事件
        // $("div").off();

        //取消某个元素节点上的某一个事件下的函数
        // $("div").off("click");

        //取消某个元素节点上的某一个事件下的某个函数
        $("div").off("click", show); //取消函数，必须知道函数的函数名字
})
<body>
  <button>off取消绑定</button>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <ul>
    <li>111</li>
    <li class = 'box'>111</li>
    <li class = 'box'>111</li>
    <li>111</li>
  </ul>
</body>

scrollTop（）

$(function(){
      $(document).click(function(){
        console.log($(window).scrollTop());
      })
})
<body style = 'height: 3000px'>
  <h1>hello world</h1>
  <h1>hello world</h1>
  <h1>hello world</h1>
  <h1>hello world</h1>
  <h1>hello world</h1>
  <h1>hello world</h1>
  <h1>hello world</h1>
</body>