jQuery

1.认识jQurey

JQ是JS库，是对JavaScript的一个封装，也即是说JQ提供了大量的API（应用程序接口），在开发时，以最少代码实现最多的功能。

于2006年开源，现在已经发展成为集JS，CSS，DOM，以及Ajax于一体的强大的框架体系。

宗旨：write less，do more！（写的少，做的多）

网址：https://www.bootcdn.cn/

2.学习文档

中文文档：https://www.jquery123.com/

API学习或查询：https://jquery.cuishifeng.cn/

3.JQ功能

1）控制页面样式

2）访问和操作DOM

3）事件处理

4）提供了大量的插件

5）Ajax技术的封装

6）提供了大量的动画处理

..........

4.使用JQ

1）本地引入

javascript

<script src="" data-missing="jquery-3.3.1.min.js"></script>

2）CDN引入（线上引入）

javascript

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>

注意：JQ必须先引入，然后才能调用它的API。可以在head标签中引入，也可以在最后引入，一般在最后引入。

jQuery选择器和DOM操作

5.选择器

jquery选择器$('selector')返回的不是数组，而是封装好的jquery对象。

1）基本选择器

id：#id

class：.class

element：element

* 选择所有标签（项目开发时，不要用，因为它要匹配完所有的标签，性能差）

, 选择多个DOM

javascript

    //id
    $("#box").css({
      color: "blue",
      background: "#eee",
    });

    //class
    $(".box").css({
      color: "red",
      background: "#eee",
      //'margin-bottom':"10px", //有短横线必须加引号
      marginBottom: "10px", //小驼峰写法
    });

    //标签名
    $("p").css({
      color: "pink",
    });
    //*
    console.log($('*'))

    //逗号
    $('#box,.box,p').click(function(){
        console.log($(this).html())
    })

2）层次选择器

选择器1 选择器2：选择选择器1的所有的后代元素（选择器2）

选择器1>选择器2：只选择选择器1的子元素

选择器1+选择器2：紧挨着选择器1的第一个相邻元素（兄弟元素）

选择器1~选择器2：选择选择器1的所有兄弟元素

html

 <body>
    <div class="wrapper">
      <span>span1</span>
      <div class="box">
        <span>span2</span>
      </div>
    </div>
    <p>ppppp</p>
    <p>ppppp</p>
    <p>ppppp</p>
    <div class="test">test</div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    $(function () {
      //1.选择所有的后元素
      $(".wrapper span").html("这是span新的内容");

      //2.选择子元素
      $(".wrapper>span").html("span1");

      //3.选择紧挨着的相邻兄弟元素
      $(".wrapper+p").css({
        color: "red",
      });

      $(".wrapper+.test").css("color", "pink"); //虽然.test是它的兄弟元素，但不是紧挨着的所以选择不到

      //4.选择所有兄弟元素
      $(".wrapper~.test").css("color", "pink");
      $(".wrapper~p").css("color", "aqua");
    });
  </script>

3）过滤选择器

a.简单过滤选择器

:first或.first（）第一个元素

:last或.last（）最后一个元素

:not(selector) 除selector之外的元素

:even 偶数（下标从零开始）

:odd 奇数

:eq(index)或.eq(index) 第n个元素

:nth-child() 匹配其父元素下的第N个子或奇偶元素,:nth-child下标从1开始的，而:eq()是从0算起的

:gt(index) 大于第n个后的元素

:lt(index) 小于第n个元素

:header 选择h1-h6所有标题元素

html

<body>
    <ul>
      <li>li1</li>
      <li>li2</li>
      <li class="li3">li3</li>
      <li>li4</li>
      <li>li5</li>
    </ul>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h6>h6</h6>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    //:first或first（）	第一个元素
    $("ul li:first").css("color", "red");
    $("ul li").first().css("color", "red");
    //:last或last（）	 最后一个元素
    $("ul li:last").css("color", "pink");
    $("ul li").last().css("color", "pink");
    //:not(selector)		除selector之外的元素
    $("ul li:not(.li3)").css({
      color: "aqua",
    });
    //:even			  偶数 （下标从0开始）
    //$("ul>li:even").mouseover(function(){
    //    $(this).css("color","pink")
    //})
    $("ul>li:even").css("color", "pink");
    //:odd			奇数
    $("ul>li:odd").css("color", "blue");
    //:eq(index)	  第n个元素
    $("ul li:eq(2)").css("color","red")
    $("ul li").eq(3).css("color","black")
    //:gt(index)		大于第n个后的元素
    $("ul li:gt(2)").css("color","black")
    //:lt(index)		小于第n个元素
    $("ul li:lt(2)").css("color","gray")
    //:header			选择h1-h6所有标题元素
    $(":header").css({
      color:"pink",
    })
  </script>

b.内容过滤选择器

:contains(text) 获取包含指定文本内容的元素

:empty 获取不包含子元素或文本内容的元素

:has(selector) 获取含有select（选择器）所匹配的元素

:parent 获取含有子元素或文本的元素

html

 <body>
    <p>aaadasfdsaf</p>
    <p>gfhfjhfj</p>
    <p>fshsfdhgs</p>
    <p></p>
    <p><span></span></p>
    <p><span></span></p>
    <p><i><span></span></i></p>
</body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    //:contains(text)		获取包含指定文本内容的元素
    $("p:contains(aaa)").css("color", "red");
    $("p:contains(h)").css("color", "red");
    //:empty			获取不包含子元素或文本内容的元素
    $("p:empty").html("新内容");
    //:has(selector)		获取含有select（选择器）所匹配的元素
    $("p:has(span)").html("aaaaaa");
    //:parent			获取含有子元素或文本的元素
    //$('p:parent').html("新内容")
  </script>

c.可见性过滤选择器

:hidden 选择display：none或隐藏文本域（hidden）

:visible 选择display：block的元素

html

  <style>
      .box1 {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <p>ppppppppppp</p>
    <input type="hidden" value="这是要上传的值" />
    <input type="button" value="提交" />
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    //:hidden 		选择display：none或隐藏文本域（hidden）
    $("div:hidden").css("display", "block");
    $("input:hidden").attr("type", "text");
    //:visible		选择display：block的元素
    $("div:visible").css("color", "red");
  </script>

d.属性过滤选择器

[attr] 获取含有指定属性的元素

[attr=value] 获取属性值为value的元素

[attr!=value] 获取属性值不为value的元素

[attr^=value] 获取属性值以value开头的元素

[attr$=value] 获取属性值以value结尾的元素

[attr*=value] 获取属性值含有value的元素

[attr1] [attr2] [attr3] 获取含有指定多个属性的元素

html

<body>
    <p title="ppp">ppppppppp</p>
    <p title="pp">ppppppppp</p>
    <p>aaaaaaaa</p>
    <p id="p1" title="p">bbbbbbb</p>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    //[attr]		获取含有指定属性的元素
    $("p[title]").css("color", "red");
    //[attr=value]	获取属性值为value的元素
    $("p[title=ppp]").css("color", "pink");
    //[attr!=value]	获取属性值不为value的元素
    $("p[title!=ppp]").css("color", "blue");
    //[attr^=value]	获取属性值以value开头的元素
    $("p[title^=p]").css("color", "black");
    //[attr$=value]	获取属性值以value结尾的元素
    $("p[title$=p]").css("color", "purple");
    //[attr*=value]	获取属性值含有value的元素
    $("p[id*=p]").css("color", "red");
    //[attr1] [attr2] [attr3]	获取含有指定多个属性的元素
    $("p[title][id]").css("color", "yellow");
  </script>

4）表单选择器

:input

:button

:submit

:text

:password

html

<body>
    <form action="#">
      <input type="text" value="" /><br />
      <input type="password" value="" /><br />
      <input type="button" value="" /><br />
      <input type="submit" value="" /><br />
      <button>bbbbb</button>
    </form>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    //:input
    $(":input").val("aaaa");
    //:button
    $(":button").val("ccc")
    //:submit
    $(":submit").val("ccc")
    //:text
    $(":text").val("ccc")
    //:password
    $(":password").val("ccc")
  </script>

6.DOM操作

1）属性操作

a.获取属性值

attr(属性名)

b.设置属性

attr(属性名，属性值)

c.删除属性

removeAttr(属性名)

html

 <body>
    <img
      src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
      alt="logo"
    />
    <img
      src="https://wwc.alicdn.com/avatar/getAvatar.do?userNick=&width=60&height=60&type=sns&_input_charset=UTF-8"
      alt="淘宝"
    />
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    //a.获取属性值
    //attr(属性名)
    console.log($("img").eq(0).attr("src"));
    //b.设置属性
    //attr(属性名，属性值)
    $("img")
      .eq(0)
      .attr("src", "https://fanyi.youdao.com/img/logo.50fdfa99.png");
    //c.删除属性
    //removeAttr(属性名)
    $("img:eq(0)").removeAttr("src");
  </script>

2）文本内容操作

a.获取文本及表单组件内容

html（）可以操作标签

text（）只能操作文本内容，不操作标签

val（）只能用于表单组件

b.设置（修改）文本及表单组件内容

html（内容）

text（内容）

val（内容）

c.删除文本及表单组件内容

html（""）

text（""）删除标签内全部内容，与html（""）效果相同

val（""）

html

<body>
    <p>
      <a href="#"><span>这是内容</span></a>
    </p>
    <input type="text" value="123312445" />
    <input type="text" value="43434343243445" />
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    //a.获取文本及表单组件内容
    //html（）	可以操作标签
    console.log($("p").html());
    //text（）  只能操作文本内容，不操作标签
    console.log($("p").text());
    //val（）	只能用于表单组件
    console.log($("input:text").val());//返回一个数组
    console.log($("input:text").eq(1).val());
    //b.设置（修改）文本及表单组件内容
    //html（内容）
    $("p").html("<strong>strong</strong>");
    //text（内容）
    $("p").text("<strong>strong</strong>");
    //val（内容）
    $("input:text").eq(1).val("qwerty");
    //c.删除文本及表单组件内容
    //html（""）
    $("p").html("");
    //text（""）
    $("p").text("");
    //val（""）
    $("input:text").val("");
  </script>

3）元素样式操作

a.设置样式

css（"属性名"，"属性值"）设置一个样式

css（{ "属性名1"："属性值1"，

"属性名2"："属性值2"，.....

}）设置多个样式

b.操作类

Ⅰ）添加类

addClass（”类名“）添加一个类名

或 addClass（”类名1 类名2 ....“）添加多个类名

Ⅱ）删除类

removeClass（）清空类名

或 removeClass（"类名"）清除指定的类名或removeClass（”类名1 类名2 ....“）清除指定的多个类名

html

    <style>
      .red {
        color: red;
      }
      .bgc {
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <p>pppppp</p>
    <div>div</div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    //a.设置样式
    //css（"属性名"，"属性值"）  设置一个样式
    $("p").css("color", "red");
    $("p").css("color", "red").css("backgroundColor", "gray");
    //css（{	"属性名1"："属性值1"，
    //"属性名2"："属性值2"，.....
    //}）	设置多个样式
    $("p").css({
      color: "pink",
      backgroundColor: "aqua",
    });
    //b.操作类
    //Ⅰ）添加类
    //addClass（”类名“）或  addClass（”类名1 类名2 ....“）
    $("div").addClass("red");
    $("div").addClass("red").addClass("bgc");
    $("div").addClass("red bgc");
    //Ⅱ）删除类
    //removeClass（"类名"）  或  removeClass（”类名1 类名2 ....“）
    $("div").removeClass("red bgc");
    $("div").removeClass();//删除全部
  </script>

4）页面元素操作

a.创建DOM节点

$(dom节点内容)

javascript

var dom = $("<p><span>这是新创建的节点</span></p>");

b.在内部添加DOM节点

append() 在内部的最后添加DOM（内部添加）

prepend() 在内部的最前面添加DOM（内部添加）

appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中$(A).appendTo(B)而是把A追加到B中。

prependTo()

c.在外部添加DOM节点

before() 在当前DOM前添加（同级添加）

insertBefore() 把DOM添加到当前元素之前（同级添加）

after() 在当前DOM之后添加（同级添加）

insertAfter() 把DOM添加到当前元素之后（同级添加）

d.复制DOM节点

clone() 只复制DOM元素而不能复制DOM上绑定的事件

clone(true) 复制DOM元素和DOM上绑定的事件

e.删除DOM节点

remove() 删除当前DOM节点及其全部子节点

remove(dom节点) 在同级DOM中删除指定DOM

empty() 删除当前DOM内的子元素，保留当前DOM

html

 <body>
    <div class="box">
      <ul>
        <li>aa1</li>
        <li>aa2</li>
        <li>aa3</li>
      </ul>
    </div>
    <div class="box2" title="box2"><span>box2</span></div>
    <p class="p">ppppppp</p>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    //a.创建DOM节点
    //$(dom节点内容)
    var dom = $("<p><span>这是新创建的节点</span></p>");
    console.log(dom);
    //b.在内部添加DOM节点
    //append()   在最后添加
    $(".box").append(dom);
    //appendTo()
    $(dom).appendTo($(".box"));
    //prepend()
    $(".box").prepend(dom);
    //prependTo()
    $(dom).prependTo($(".box"));
    //c.在外部添加DOM节点
    //before()
    $(".box").before($("<strong>strong</strong>"));
    //insertBefore()
    $("<strong>strong</strong>").insertBefore($(".box"));
    //after()
    $(".box").after($("<strong>strong</strong>"));
    //insertAfter()
    $("<strong>strong</strong>").insertAfter($(".box"));
    //d.复制DOM节点
    //clone()
    $(".p").click(function () {
      alert(1111);
    });
    $(".box").append($(".p").clone());
    //clone(true)
    $(".box").append($(".p").clone("true"));
    //e.删除DOM节点
    //remove()
    $(".p").remove();
    //remove(dom节点)
    $(".box2").remove('[title]')
    //empty()
    $(".box").empty()
  </script>

jQuery事件和动画

1.尺寸相关

1）获取和设置元素的尺寸

$(dom).width() / height() 获取元素的宽度，高度传参设置元素宽高

$(dom).innerwidth() / innerheight() 获取包括padding的宽度，高度

$(dom).outerwidth() / outerheight() 获取包括padding+border的宽度，高度

$(dom).outerwidth(true) / outerheight(true) 获取包括padding+border+margin的宽度，高度

2）获取相对页面的绝对位置

offset() 返回一个对象{top: 50, left: 108}，offset().top offset().left

3）获取浏览器可视区的宽高

$(window).width()

$(window).height()

4）获取文档的宽高

$(documnet).width()

$(documnet).height()

5）获取页面滚动距离

$(document).scrollTop() //垂直滚动距离

$(document).scrollLeft() //水平滚动距离

html

 <script>
    $(function () {
      //1）获取和设置元素的尺寸
      //$(dom).width() / height()			获取元素的宽度，高度
      console.log($(".box").width());
      console.log($(".box").height());
      $(".box").width("600px"); //传参设置宽高
      $(".box").height("400px");
      //$(dom).innerwidth() / innerheight()		获取包括padding的宽度，高度
      console.log($(".box").innerWidth()); //640
      //$(dom).outerwidth() / outerheight()		获取包括padding+border的宽度，高度
      console.log($(".box").outerWidth()); //660
      //$(dom).outerwidth(true) / outerheight(true)		获取包括padding+border+margin的宽度，高度
      console.log($(".box").outerWidth(true)); //860
      //2）获取相对页面的绝对位置
      //offset()
      console.log($(".box").offset()); //{top: 50, left: 108}
      console.log($(".box").offset().top);
      //3）获取浏览器可视区的宽高
      //$(window).width()
      console.log($(window).width());
      //$(window).height()
      //4）获取文档的宽高
      //$(documnet).width()
      console.log($(document).width());
      console.log($(document).height());
      console.log($(window).height());
      //$(documnet).height()
      //5）获取页面滚动距离
      //$(document).scrollTop()
      console.log($(document).scrollTop());

      $(window).scroll(function () {
        //窗口滚动时获取垂直滚动距离
        console.log(Math.round($(document).scrollTop()));
      });
    });
  </script>

小实列：回到顶部

html

<style>
      span {
        position: fixed; //固定定位，使其位置不变
        border: 1px solid #000;
        padding: 5px;
        cursor: pointer;
        display:none;//默认隐藏
      }
    </style>
  </head>
  <body>
    <div class="box">box</div>
    <span>回到顶部</span>
    <div style="height: 1000px"></div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    $(function () {
      //实例：回到顶端
      //当向下滚到距离top：100px时出现“回到顶部”
      var topShow = function () {
        //封装为一个函数
        var top = Math.round($(document).scrollTop());
        if (top >= 100) {
          //$("span").css("display", "block");
          $("span").fadeIn(400);
        } else {
          $("span").css("display", "none");
          //$("span").fadeOut(400);
        }
      };
      topShow();
      $(window).scroll(function () {
        //滚动时调用toShow函数
        topShow();
      });

      //单击“回到顶部”可以回到顶部
      $("span").click(function () {
        $(document).scrollTop(0);
      });
      //匀速动画
      $("span").click(function () {
        $("html,body").animate(
          {
            scrollTop: 0,
          },
          500
        );
      });
    });
  </script>

2.遍历DOM

$(doms).each(function(index,dom){ // index为下标，dom为遍历的每一个DOM元素

........

})

html

<body>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    $("ul li").each(function (index, dom) {
      console.log(index, dom);//dom为一个li标签 用$()可以拿到节点
      $(dom).html("这是列表项" + index);//$() 括号内为变量不加引号，为常量加""
    });
  </script>

3.事件

click（）鼠标单击

dblclick（）鼠标双击

mouseover（）鼠标进入（进入子元素也会触发会出现事件冒泡）

mouseout（）鼠标离开（离开子元素也触发会出现事件冒泡）

mouseenter（）鼠标进入（进入子元素不触发会阻止事件冒泡）

mouseleave（）鼠标离开（离开子元素不触发会阻止事件冒泡）

keydown（）按下键盘键

keyup（）松开键盘键

keypress（）从键盘输入字符

blur（）元素失去焦点

focus（）元素获得焦点

submit（）用户递交表单（要写在form事件上）

$('form').submit(function(){ })

hover（）同时为mouseenter和mouseleave事件指定处理函数

    $(".box").hover(function(){
	//mouseenter事件
    },function(){
    //mouseleave事件
    })

ready（） DOM加载完成后再触发事件

$(document).ready(function(){}) 或
$(function () {}

$(window).resize（）浏览器的窗口的大小发生改变（触发对象window）

$(window).scroll（）滚动条的位置发生变化（触发对象window）

html

  <body>
    <div class="box">你点我一下试试</div>
    <div class="father">
      <div class="son"></div>
    </div>
    <form action="">
      <input type="text" name="user" />
      <input type="text" name="user1" />
      <input type="submit" />
    </form>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    //click（）		鼠标单击
    $(".box").click(function () {
      $(this).html("你点我两下试试").css("color", "pink");
    });
    //dblclick（）	鼠标双击
    $(".box").dblclick(function () {
      $(this).html("我错了").css("color", "purple");
    });
    //mouseover（）	鼠标进入（进入子元素也会触发）
    $(".box").mouseover(function () {
      $(this).css("fontSize", "28px");
    });
    //mouseout（）		鼠标离开（离开子元素也触发）
    $(".box").mouseout(function () {
      $(this).css("fontSize", "16px");
    });

    /*$(".box")  连缀写法
      .mouseover(function () {
        $(this).css("fontSize", "28px");
      })
      .mouseout(function () {
        $(this).css("fontSize", "16px");
      });*/

    $(".box").on("mouseover mouseout", function () {
      console.log("111"); //两个事件触发效果相同时 可将其捆绑(bind/on)来写
    });
    $(".box").one("mouseover mouseout", function () {
      console.log("111"); //只执行一次
    });
    //mouseenter（）	鼠标进入（进入子元素不触发）
    $(".father").mouseover(function () {
      console.log("father"); //mouseover在子元素中也会触发 会出现事件冒泡
    });
    $(".son").mouseover(function () {
      console.log("son");
    });
    $(".father").mouseenter(function () {
      console.log("father"); //mouseenter在子元素中不会触发  会阻止事件冒泡
    });
    $(".son").mouseenter(function () {
      console.log("son");
    });
    //mouseleave（）	鼠标离开（离开子元素不触发）
    //keydown（）		按下键盘键
    $("form input[name=user]").keydown(function (e) {
      //console.log(e); //可以传入参数e 通过e.keyCode获取按下键的code值
      if (e.keyCode == 13) {
        //回车 13  当按下回车键时执行以下代码
        console.log($(this).val());
      }
    });
    //keyup（）			松开键盘键
    //keypress（）		从键盘输入字符
    $("input[name=user1]").keypress(function (e) {
      console.log(e);
      if (e.charCode == 65) {
        //当输入大写字母A时
        console.log($(this).val());
      }
    });
    //blur（）		元素失去焦点
    $("input[name=user],input[name=user1]").blur(function () {
      var val = $(this).val();
      if (val.length < 2 || val.length > 8) {
        alert("您输入长度不对，应该输入2-8字符之间");
      }
    });
    //focus（）		元素获得焦点
    /*$("input[name=user],input[name=user1]").focus(function(){
        alert()
    })*/
    //submit（）		用户递交表单
    $("form").submit(function () {
      alert("已提交");
    });
    $("form input:submit").click(function () {
      //实现相同效果
      alert("已提交");
    });
    //hover（）		同时为mouseenter和mouseleave事件指定处理函数
    $(".box").hover(
      function () {
        $(this).css("backgroundColor", "blue");
      },
      function () {
        $(this).css("backgroundColor", "");
      }
    );
    $(".box") //实现与hover()相同功能
      .mouseenter(function () {
        $(this).css("backgroundColor", "blue");
      })
      .mouseleave(function () {
        $(this).css("backgroundColor", "");
      });
    //ready（）		DOM加载完成
    //resize（）		浏览器的窗口的大小发生改变
    $(window).resize(function () {
      alert("窗口大小改变");
    });
    //scroll（）		滚动条的位置发生变化
    $(window).scroll(function () {
      alert("滚动");
    });
  </script>

4.动画

1）显示/隐藏/切换

show（） :显示从左上角开始出现

（可以传参：设置n毫秒的过渡动画）

hide（） :隐藏从右下角开始隐藏

toggle（） :切换

代替了diaplay：block并添加了动画

html

    <style>
      .box {
        width: 400px;
        height: 300px;
        background-color: aqua;
        display: none;
      }
    </style>
  </head>
  <body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div class="box">box</div>
  </body>
<script>
    //show（）	显示
    $("button")
      .eq(0)
      .click(function () {
        //$(".box").show();
        //$(".box").show(3000);//显示3000毫秒=3s
        //$(".box").show("fast");//表示200ms
        //$(".box").show("normal");//表示400ms
        //$(".box").show("slow");//表示600ms
        $(".box").show(""); //表示400ms
      });
    //hide（）	  隐藏
    $("button")
      .eq(1)
      .click(function () {
        //$(".box").hide();
        //$(".box").hide("fast");
        //$(".box").hide("normal");
        //$(".box").hide("slow");
        $(".box").hide(400); //与.show()参数用法一致
      });
    //toggle（）	切换
    $("button")
      .eq(2)
      .click(function () {
        //$(".box").toggle();
        $(".box").toggle(400);
      });
  </script>

2）上下滑动

slideDown（） :向下滑动显示

slideUp（） :向上滑动显示

html

 <script>
    //slideDown（）	向下滑动
    $("button").eq(0).click(function(){
        $(".box").slideDown();
        $(".box").slideDown(3000); //3000ms
        $(".box").slideDown("fast");//200ms
        $(".box").slideDown("normal");//400ms
        $(".box").slideDown("slow");//600ms
    })
    //slideUp（）	向上滑动
    $("button").eq(1).click(function(){
        $(".box").slideUp();
        $(".box").slideUp(3000);//3000ms
        $(".box").slideUp("fast");//200ms
        $(".box").slideUp("normal");//200ms
        $(".box").slideUp("slow");//200ms
    })
  </script>

3）淡入淡出

fadeIn（） :淡入不透明度0-1

fadeOut（） :淡出不透明度1-0

fadeTo（time , opacity） :淡入到指定的不透明度（time:动画时间 opacity:淡入到指定不透明度）

html

  <script>
    //fadeIn（）	:淡入
    $("button")
      .eq(0)
      .click(function () {
        //$(".box").fadeIn();
        //$(".box").fadeIn("fast"); //200ms
        //$(".box").fadeIn("norma;");  //400ms
        //$(".box").fadeIn("slow");    //600ms
        $(".box").fadeIn(3000); //自定义
      });
    //fadeOut（）	:淡出
    $("button")
      .eq(1)
      .click(function () {
        //$(".box").fadeOut();
        //$(".box").fadeOut("fast"); //200ms
        //$(".box").fadeOut("normal"); //400ms
        //$(".box").fadeOut("slow");    //600ms
        //$(".box").fadeOut("");    //400ms
        $(".box").fadeOut(3000);
      });
    //fadeTo（）	:淡入到指定的不透明度
    $("button")
      .eq(2)
      .click(function () {
        $(".box").fadeTo(3000,.5);//必须传入两个参数
        $(".box").fadeTo("normal",.5);
        $(".box").fadeTo("fast",.5);
        $(".box").fadeTo(time,.5);
      });
  </script>

4）动画

animate（）

用法：

html

$().animate({
	属性：值
	},time)

html

  <script>
    //animate（）
    $("button").click(function () {
      $(".box").animate({
        width: "100px",
        height: "100px",
        backgroundColor: "pink",  	//color属性不支持
      });
    });
    $("button").click(function () {
      $(".box").animate({
        width: "100px",
        height: "100px",
      },3000);  //设置持续时间
    });

    $("button").click(function () {
      $(".box").animate({
        width: "100px",
        height: "100px",
      },"fast");  //设置持续时间
    });
  </script>

与设置CSS样式通过 transition 效果相同

支持以下属性：（不是W3C所有属性都支持）

		backgroundPosition
        borderWidth
        borderBottomWidth
        borderLeftWidth
        borderRightWidth
        borderTopWidth
        borderSpacing
        margin
        marginBottom
        marginLeft
        marginRight
        marginTop
        outlineWidth
        padding
        paddingBottom
        paddingLeft
        paddingRight
        paddingTop
        height
        width
        maxHeight
        maxWidth
        minHeight
        maxWidth
        font
        fontSize
        bottom
        left
        right
        top
        letterSpacing
        wordSpacing
        lineHeight
        textIndent

jQuery插件开发

JQ插件库：https://www.jq22.com

1.什么是插件？

jQuery插件是对jQuery框架利用原型的扩展。

插件通常是一个完备功能的封装，它是JQ功能的一个补充或扩展。

注意：开发JQ插件，该插件是依赖jQuery的必须先引入jQuery，再引入插件。

2.jQuery的插件主要分为3种类型

1）封装对象方法的插件（原型扩展）主要的开发方式

这种是大多数采用的方法。操作原型，对jQuery框架入侵性较小，例如：parent（）方法，append（）方法和addClass（）方法等DOM操作方法。

2）封装全局函数的插件（静态扩展）

将方法或插件直接挂到对象/类上。

常见如：$.trim（）方法和$.now（）方法，都是jQuery内部作为全局函数的插件附加到内核上去的。

3）选择器插件

对jQuery选择DOM的补充或扩展。

虽然jQuery的选择器功能十分强大，但有时用户的特殊需求，还是会扩展一些自己喜欢的选择器，例如用：color（“red”）来把选择匹配的元素的文字样式一次性设置为红色。

3.命名规范

1）jquery.插件名.js

（开发模式）

2）jquery.插件名.min.js

（压缩格式，去bug调试，删除了回车和多余的空格，注释产品模式）

4.插件中的冲突

1）JQ让渡方法，让JQ让出对$的占用

jQuery.noConflict（）解绑jQuery对$的引用

其后使用jQuery中的$时用jQuery代替$：jQuery("#box").css("color","red")

2）深度让渡

jQuery.noConflict(true) （$和jQuery都不能使用）

其后使用jQuery中的$时：

javascript

    var jq = jQuery.noConflict(true)  //深度让渡  ($和jQuery都不能使用)
    console.log($.getEl("box"));
    jq("#box").css("color","red")

5.在插件中使用闭包

在封装插件时使用闭包。

闭包：闭包是指一个函数能够访问并操作其外部作用域中的变量，即使在函数被调用之后，仍然可以访问这些变量。

目的：为了避免变量的全局污染，对内部信息进行了保护（在IIFE外部不能调用闭包内的变量）。

IIFE是实现闭包的一种方式。

实现方式：

javascript

	;(function(){
		function _插件名(){
			实现插件名的代码
		}
		jQuery.prototype.插件名 = _插件名
	})()

或：

javascript

	;(function($){
		function _插件名(){
			//实现插件功能的代码
		}
		$.fn.插件名 = _插件名			//jQuery.prototype === $.fn
	})(jQuery)

6.jQuery的插件机制

1）对jQuery函数prototype函数的别名（jQuery.fn）进行（原型）扩展。

javascript

;(function ($) {
  // 在原型上绑定单个方法
   $.fn.chSize = function chSize(w, h) {
    $(this).width(w);
    $(this).height(h);
  };
  // 批量绑定方法
  $.fn.extend({
    // 扩展方法1
    setHtml: function (htmlText) {
      $(this).html(htmlText);  
      //this：原生写法  $(this)：jQuery写法 两者都可以获取到当前节点
    },
    // 扩展方法2
    getHtml: function () {
      return this.html();
    },
    // 扩展方法3......
  });
})(jQuery);

2）采用jQuery.extend（）方法进行（静态）扩展。

javascript

;(function($){
	$.extend({
		方法名：function(参数){
			//实现方法的代码
		}
	});
})(jQuery)

7.this

在插件开发中，应先把this缓存起来。这个this指向的是对象本身。

this可写成：this或$(this）

this.html()：原生写法 === $(this).html()：jQuery写法。

8.插件尽可能返回对象本身

return：this；

插件的固定格式：

JavaScript

;(function($){
	var that ;
	$.fn.插件名称 = function(){
        that = this;
		//实现插件功能的代码
        return that;
	}
})(jQuery);
或
;(function($){
	var that ;
	$.fn.extend ={
        插件名1:function(){
            that = this;
            //实现插件功能的代码
            return that;
		},
        插件名2:function(){
            that = this;
            //实现插件功能的代码
            return that;
		},
        插件名3:function(){
            that = this;
            //实现插件功能的代码
            return that;
		},
        ........
	}
})(jQuery);

9.配置参数

1）如果传的参数是两个以上，最好将参数设置成对象

html

$("p").setAttr("400px","200px","35px","pink","#0ff")

问题：如果传参过多，在调用时可能将其参数位置写错。解决上面问题办法是：把参数写成与顺序无关的对象形式

javascript

    $("p").setAttr({
      width: "400px",
      fontSize: "35px",
      color: "pink",
      background: "#0ff",
      height: "200px",
    });

javascript

;(function ($) {
  $.fn.setAttr = function (config) {//用config接收传递的对象
    var that = this;
    that.css("width", config.width);
    that.css("height", config.height);
    that.css("font-size", config.fontSize);
    that.css("color", config.color);
    that.css("background-color", config.background);
    // 返回一个对象便于链式调用
    return that;
  };
})(jQuery);

2）设置默认值

问题：如果用户在使用这个插件时，不传参或少传参，这时怎么办？

①设置默认值

JavaScript

	var 默认值对象 = {值内容}

②将默认值对象和用户传过来的对象合并成一个新的对象

JavaScript

	var setting = $.zxtend({},默认值对象,传过来的对象) //对象合并操作

eg：

JavaScript

// $("p").setAttr() //全为默认值
    $("p").setAttr({background:"aqua",fontSize:"30px"})

JavaScript

(function ($) {
  $.fn.setAttr = function (config) {
    var that = this;
    // 默认值设置
    var def = {
      width: "200px",
      height: "100px",
      fontSize: "16px",
      color: "#fff",
      background: "red",
    };
    // 将def和config合并成一个对象。注意：用户传值的对象要写在最后
    var settings = $.extend({}, def, config);
    that.css("width", settings.width);
    that.css("height", settings.height);
    that.css("font-size", settings.fontSize);
    that.css("color", settings.color);
    that.css("background-color", settings.background);
    // 返回一个对象便于链式调用
    return that;
  };
})(jQuery);

10.命名空间

问题：插件的命名经常会有冲突的情况。

解决：把所有方法以私有方法定义在命名空间下，然后再结合闭包把方法查询表对外暴露出去。

JavaScript

(function ($) {
  var that;
  // 把方法私有化
  var methods = {
    init: function (content) {
      // console.log(content);
      console.log("init");
      // this.html("这是init初始化后的内容")
      this.html(content);
    },
    setData: function () {
      console.log("setData");
    },
    getData: function () {
      console.log("getData");
    },
  };
  $.fn.namespace = function (option) {
    that = this;
    // methods[option.fn]() // 这种方法中的this指向会出问题
    methods[option.fn].call(that, option.txt); //将methods[option.fn]中的this指向that
    return that;
  };
})(jQuery);

<script>
    $(".box").namespace({fn:"init",txt:"我是前端大咖"})
</script>

JSON Ajax和JSONP

1.JSON

JSON（Javascript Object Notation：JS对象简谱）是一种轻量级的数据交换格式。

JSON是由ECMA（欧洲计算机协会）制定的一个数据表示规范，是ECMAScript的一个子集。采用独立于编程语言的文本格式来存储和表示数据

表示数据结构清晰，简洁，易于阅读和解析。

逐渐取代了XML数据格式

他实际上就是一个对象或数组，或对象中含有数组，或数组中含有对象。

2.JSON的表示方式

1）对象表示

json

var obj = {
      id: "0082648",
      name: "Tom",
      sex: "male",
      age: "18",
      addr: "ShenZhen",
    };
//添加数据
var dataTable = $(
      "<tr><td>" +
        obj.id +
        "</td><td>" +
        obj.name +
        "</td><td>" +
        obj.sex +
        "</td><td>" +
        obj.age +
        "</td><td>" +
        obj.addr +
        "</td></tr>"
    );
    $(".employee").append(dataTable);

2）数组

json

var score = [78, 89, 90, 100, , 56, 88];
//添加数据
score.forEach(function (value, index) {
      $(".score").append("<li>" + value + "</li>");
    });

3）复杂表示法（对象+数组）

json

    var studentsData = [
      {
        id: "13082648",
        name: "Tom",
        sex: "male",
        age: "18",
        score: [78, 89, 90, 100, 33, 56, 88],
        addr: "ShenZhen",
      },
      {
        id: "12482648",
        name: "Jek",
        sex: "female",
        age: "18",
        score: [78, 99, 90, 10, 94, 96, 88],
        addr: "ShangHai",
      },
      {
        id: "0082648",
        name: "Mare",
        sex: "male",
        age: "19",
        score: [48, 39, 90, 100, 45, 56, 88],
        addr: "BeiJing",
      },
    ];
    //渲染数据
    for (var i in studentsData) {
      var data = $(
        "<tr><td>" +
          studentsData[i].id +
          "</td><td>" +
          studentsData[i].name +
          "</td><td>" +
          studentsData[i].sex +
          "</td><td>" +
          studentsData[i].age +
          "</td><td>" +
//studentsData[i].score+或
studentsData[i].score.join(" ")+
          "</td><td>" +
          studentsData[i].addr +
          "</td></tr>"
      );
      //倒序添加数据
      $(".studens").prepend(data);
    }

3.JSON文件

1）不可以将数据赋给一个变量

2）键和字符型值（数值型，布尔型，null，undefined（一般没有）之外）必须用双引号引起来，不能用单引号或者不用引号

3）不允许出现分号和多余的的逗号

4）不能出现注释语句

5）文件的扩展名必须是.json

代码如下：

json

[
    {
      "id": "13082648",
      "name": "Tom",
      "sex": "male",
      "age": 18,
      "score": [78, 89, 90, 100, 33, 56, 88],
      "addr": "ShenZhen"
    },
    {
      "id": "12482648",
      "name": "Jek",
      "sex": "female",
      "age": 18,
      "score": [78, 99, 90, 10, 94, 96, 88],
      "addr": "ShangHai"
    },
    {
      "id": "0082648",
      "name": "Mare",
      "sex": "male",
      "age": 19,
      "score": [48, 39, 90, 100, 45, 56, 88],
      "addr": "BeiJing"
    }
  ]

4.Ajax

1）什么是Ajax？

Ajax (Asynchronous JavaScript And Xml：异步的Javascript和XML) 异步传输，目的是让Javascript发送http请求，与后台通信，获取数据和信息。

Ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。在通信过程中不会影响后续的JS的执行，从而实现异步操作。

2）同步和异步

同步就是做完一件事（任务）后再做另一件事，后一件的执行依赖于前一件事件的完成。同步会影响到后面的 JS代码的执行时间。

异步是指同时可以做多件事情（任务）。不会影响到后面 JS代码的执行时间。

3）局部刷新和无刷新

Ajax可以实现局部刷新，也叫无刷新，就是整个页面不刷新，只是局部刷新而已。Ajax可以自己发送http请求，不用通过浏览器地址栏，所以页面不会自动刷新。

5.用Ajax发送请求（jquery）

写法1：

javascript

$.ajax({
		type:’ get/post ‘，						//请求的方式，默认为get
		url:’ 请求文件名或后台地址 '，			 	 //请求的地址
		async:true/flase，					    //异步或同步 默认为true
		data:{									 //上传到服务器端的数据
			//数据
		}，
		dataType: 'json/jsonp/xml/text/javascript'，		//返回的数据类型或解决跨域（jsonp）
		success: function(res){							//成功回调处理
		//成功回调的处理代码
		console.log(res);//返回数据
		}，
		errror: function(err){							//失败回调处理
		//失败回调的处理代码
	  console.log(err.statusText);
	  if (err.status == 404) {	 //请求失败返回404页面
          location.href = "404.html";
        }
		}，
		timeout: 时间（毫秒），							//设置请求超时时间
		.......
	})

写法2：

JavaScript

$.ajax({
	type:’ get/post ‘，						//请求的方式，默认为get
	url:’ 请求文件名或后台地址 '，			 	 //请求的地址
	async:true/flase，					    //异步或同步
	data:{									 //上传到服务器端的数据
		//数据
	}，
	dataType: 'json/jsonp/xml/text/javascript'，		//返回的数据类型或解决跨域（jsonp）
	timeout: 时间（毫秒），							//设置请求超时时间
	.......
}).done(function(data){		//成功回调处理
	.......
}).fail(function(err){		//失败回调处理
	.......
})

写法3：（推荐写法）

JavaScript

$.ajax({
	type:’ get/post ‘，						//请求的方式，默认为get
	url:’ 请求文件名或后台地址 '，			 	 //请求的地址
	async:true/flase，					    //异步或同步
	data:{									 //上传到服务器端的数据
		//数据
	}，
	dataType: 'json/jsonp/xml/text/javascript'，		//返回的数据类型或解决跨域（jsonp）
	timeout: 时间（毫秒），							//设置请求超时时间
	.......
}).then(function(data){		//成功回调处理
	.......
}).catch(function(err){		//失败回调处理 catch失败捕获异常
	.......
})

6.JSONP

1）同源策略

同源策略是由NetScape提出的一个著名的安全策略。所谓的同源，指的是协议，域名，端口相同。浏览器处于安全方面的考虑，只允许本域名下的接口交互，不同源的客户端脚本，在没有明确授权的情况下，不能读写对方的资源。

http://127.0.0.1:8080/aabb http为协议，127.0.0.1为域名，8080为端口

只要协议，域名和端口中任意一个不相同，就会出现跨域情况。

2）在JQ中解决跨域

dataType:"jsonp",

json

&.ajax({
	......
	dataType:"jsonp",
	......
}).then(function(){
	......
}).catch(function(){
	......
})

tips：

1.是否加引号

获取DOM设置属性时，常量加“引号”变量不加引号

2.判断是否被选中

单/复选框可通过 .chencked 判断是否被选中

下拉列表框.selected

3.拿父级/子级节点

用$(DOM).parent() 获取该DOM节点的父级DOM

用$(DOM).children() 获取该DOM节点的子级DOM

4.each与forEach区别

score.forEach(function(value,index){})

forEach()是用来遍历普通数组传参：（值，下标）

each()是用来遍历DOM 传参：（下标，值）

$(doms).each(function(index,dom){})

5.rem相对长度

相对于根元素html fong-size：值的多少倍

eg：

<style>
	html{
	font-size:10px;
	}
	p{
	font-size:2.0rem;  //2.0rem = 2.0 * 10 = 20 px;
	margin-top:3.1rem; //3.1rem = 3.1 * 10 = 31 px;
	}
</style>

6.jQ get请求获取文件信息

JavaScript

      $.get(url).then(function (data) { 
        console.log(data);
       });
     }

7.JQ中的get/post请求与ajax请求的区别

jQuery中的get请求与ajax的区别在于使用的方式和功能上有所不同。

$.ajax()方法是一个通用的Ajax请求方法，可以执行各种类型的Ajax请求，包括GET、POST等。它提供了更多的配置选项，可以自定义请求的各个参数，例如请求的URL、请求的数据、请求的类型、请求的数据类型等。使用$.ajax()方法可以更灵活地处理Ajax请求。
$.get()方法是一个简化的GET请求方法，专门用于通过远程HTTP GET请求方式载入信息。它是$.ajax()方法的一种简化形式，用于处理简单的GET请求。$.get()方法的参数较少，只需要指定请求的URL和可选的回调函数即可。使用$.get()方法可以更方便地发送GET请求。

因此，如果需要进行复杂的Ajax请求或者需要自定义请求的各个参数，可以使用$.ajax()方法。而如果只需要发送简单的GET请求，可以使用$.get()方法。

范例：在jQuery中使用$.ajax()方法发送POST请求：

JavaScript

$.ajax({
  url: "example.com/api",
  type: "POST",
  data: { name: "John", age: 30 },
  success: function(response) {
    console.log(response);
  },
  dataType: "json"
});

在jQuery中使用$.get()方法发送GET请求：

JavaScript

$.get("example.com/api", function(response) {
  console.log(response);
}, "json");

jQuery ​

1.认识jQurey ​

2.学习文档 ​

3.JQ功能 ​

4.使用JQ ​

1）本地引入 ​

2）CDN引入（线上引入） ​

jQuery选择器和DOM操作 ​

5.选择器 ​

1）基本选择器 ​

2）层次选择器 ​

3）过滤选择器 ​

4）表单选择器 ​

6.DOM操作 ​

1）属性操作 ​

2）文本内容操作 ​

3）元素样式操作 ​

4）页面元素操作 ​

jQuery事件和动画 ​

1.尺寸相关 ​

1）获取和设置元素的尺寸 ​

2）获取相对页面的绝对位置 ​

3）获取浏览器可视区的宽高 ​

4）获取文档的宽高 ​

5）获取页面滚动距离 ​

小实列：回到顶部 ​

2.遍历DOM ​

3.事件 ​

4.动画 ​

1）显示/隐藏/切换 ​

2）上下滑动 ​

3）淡入淡出 ​

4）动画 ​

jQuery插件开发 ​

1.什么是插件？ ​

2.jQuery的插件主要分为3种类型 ​

1）封装对象方法的插件（原型扩展）主要的开发方式 ​

2）封装全局函数的插件（静态扩展） ​

3）选择器插件 ​

3.命名规范 ​

1）jquery.插件名.js ​

2）jquery.插件名.min.js ​

4.插件中的冲突 ​

1）JQ让渡方法，让JQ让出对$的占用 ​

2）深度让渡 ​

5.在插件中使用闭包 ​

6.jQuery的插件机制 ​

1）对jQuery函数prototype函数的别名（jQuery.fn）进行（原型）扩展。 ​

2）采用jQuery.extend（）方法进行（静态）扩展。 ​

7.this ​

8.插件尽可能返回对象本身 ​

插件的固定格式： ​

9.配置参数 ​

1）如果传的参数是两个以上，最好将参数设置成对象 ​

2）设置默认值 ​

10.命名空间 ​

JSON Ajax和JSONP ​

1.JSON ​

2.JSON的表示方式 ​

1）对象表示 ​

2）数组 ​

3）复杂表示法（对象+数组） ​

3.JSON文件 ​

1）不可以将数据赋给一个变量 ​

2）键和字符型值（数值型，布尔型，null，undefined（一般没有）之外）必须用双引号引起来，不能用单引号或者不用引号 ​

3）不允许出现分号和多余的的逗号 ​

4）不能出现注释语句 ​

5）文件的扩展名必须是.json ​

4.Ajax ​

1）什么是Ajax？ ​

2）同步和异步 ​

3）局部刷新和无刷新 ​

5.用Ajax发送请求（jquery） ​

6.JSONP ​

1）同源策略 ​

2）在JQ中解决跨域 ​

tips： ​

1.是否加引号 ​

2.判断是否被选中 ​

3.拿父级/子级节点 ​

jQuery

1.认识jQurey

2.学习文档

3.JQ功能

4.使用JQ

1）本地引入

2）CDN引入（线上引入）

jQuery选择器和DOM操作

5.选择器

1）基本选择器

2）层次选择器

3）过滤选择器

4）表单选择器

6.DOM操作

1）属性操作

2）文本内容操作

3）元素样式操作

4）页面元素操作

jQuery事件和动画

1.尺寸相关

1）获取和设置元素的尺寸

2）获取相对页面的绝对位置

3）获取浏览器可视区的宽高

4）获取文档的宽高

5）获取页面滚动距离

小实列：回到顶部

2.遍历DOM

3.事件

4.动画

1）显示/隐藏/切换

2）上下滑动

3）淡入淡出

4）动画

jQuery插件开发

1.什么是插件？

2.jQuery的插件主要分为3种类型

1）封装对象方法的插件（原型扩展）主要的开发方式

2）封装全局函数的插件（静态扩展）

3）选择器插件

3.命名规范

1）jquery.插件名.js

2）jquery.插件名.min.js

4.插件中的冲突

1）JQ让渡方法，让JQ让出对$的占用

2）深度让渡

5.在插件中使用闭包

6.jQuery的插件机制

1）对jQuery函数prototype函数的别名（jQuery.fn）进行（原型）扩展。

2）采用jQuery.extend（）方法进行（静态）扩展。

7.this

8.插件尽可能返回对象本身

插件的固定格式：

9.配置参数

1）如果传的参数是两个以上，最好将参数设置成对象

2）设置默认值

10.命名空间

JSON Ajax和JSONP

1.JSON

2.JSON的表示方式

1）对象表示

2）数组

3）复杂表示法（对象+数组）

3.JSON文件

1）不可以将数据赋给一个变量

2）键和字符型值（数值型，布尔型，null，undefined（一般没有）之外）必须用双引号引起来，不能用单引号或者不用引号

3）不允许出现分号和多余的的逗号

4）不能出现注释语句

5）文件的扩展名必须是.json

4.Ajax

1）什么是Ajax？

2）同步和异步

3）局部刷新和无刷新

5.用Ajax发送请求（jquery）

6.JSONP

1）同源策略

2）在JQ中解决跨域

tips：

1.是否加引号

2.判断是否被选中

3.拿父级/子级节点