jQuery入门

前言：

上次说到了JavaScript，对其有一定了解，本文就来说说jQuery。jQuery就是一个由JavaScript编写的轻量库，简单的说就是封装了一些JavaScript的操作，所以使用jQuery比使用原生的JavaScript可以达到用更少的代码做更多的事的效果。

一、初识jQuery：

1、使用方法：
去官网http://jquery.com/download/下载jQuery的包，然后放到项目中存放js代码的目录下，最后在需要用jQuery的HTML中用<script type="text/javascript" src="js目录/jquery.js"/>引入即可。

2、jQuery对象与DOM对象：
jQuery对象与DOM对象是不一样的，看下面例子：
需求：我们要获取页面上这个id为test的p元素，然后给这个文本节点增加一段文字：“hello world”，并且让文字颜色变成红色。

<p id="test"></p><!-- 用原生JavaScript的做法-->var p = document.getElementById('test');
p.innerHTML = 'hello world';
p.style.color = 'red';<!-- 通过jQuery操作-->var $p = $('#test');
$p.html('hello world').css('color','red');

用JavaScript操作是过取到DOM对象，再进行操作，而jQuery获取到的$p是jQuery对象。
jQuery对象与DOM对象的转换：

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>var $div = $('div') //jQuery对象var div = $div[0] //转化成DOM对象var div = $div.get(0) //通过get方法，转化成DOM对象var div = document.getElementsByTagName('div'); //dom对象var $div = $(div); //jQuery对象var $first = $div.first(); //找到第一个div元素

二、jQuery选择器：

1、id选择器 $( "#id" )：
所谓id选择器，就是相当于JavaScript的getElementById()方法。语法：$( "#id" )，也就是说#号后面跟上要操作的标签的id的值即可。

2、类选择器 $( ".class" )：
就是通过标签的class属性来选择标签的选择器。语法：$( ".class" ),也就是 . 后面跟上标签的class的值即可。

3、元素选择器 $( "element" )：
也就是直接通过标签名选择标签，比如$("p").css("border", "3px solid blue");就是通过jQuery的元素选择器选择到所有的p标签，然后改变其样式。

4、全选择器 $( "*" )：
顾名思义，全选择器就是选择所有的标签。

5、层级选择器：
一个页面就是由各种标签构成的，各个标签之间存在着不同的关系，父子关系、兄弟关系等，层级选择器就可以处理这种关系。用法如下表：

选择器	描述
$("parent > child")	子选择器，选择所有指定“parent” 元素中指定的“child”直接子元素
$("ancestor descendant")	后代选择器，选择给定的祖先元素“ancestor” 的所有descendant后代，包括儿子、孙子、曾孙等
$("prev + next")	相邻兄弟选择器，选择紧 接在“prev”元素后的“next”元素
$("prev ~ siblings")	一般兄弟选择器，与相邻兄弟选择器的区别是 ，相邻的指挥选择相邻的，而这个是选所有。

6、基本筛选选择器：
筛选选择器的用法与CSS中的伪元素相似，选择器用冒号“：”开头，通过一个列表，看看基本筛选器的描述：

image.png

7、内容筛选选择器：
基本筛选选择器针对的都是元素DOM节点，如果我们要通过内容来过滤，jQuery也提供了一组内容筛选选择器。其描述如下：

image.png

8、可见性筛选选择器：
元素有显示状态与隐藏状态，jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden

选择器	描述
$(":visible")	选择所有显示的元素
$(":hidden")	选择所有隐藏元素

9、属性筛选选择器：
属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性，这样所有使用该属性而不管它的值，这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素，这就是属性选择器展示它们的威力的地方。

image.png

10、子元素筛选选择器：
这个不是很常用，用法如下：

image.png

11、表单元素选择器：
顾名思义，表单元素选择器就是方便操作表单的选择器。

image.png

12、表单对象属性筛选选择器：
除了表单元素选择器外，表单对象属性筛选选择器也是专门针对表单元素的选择器，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行筛选。

image.png

13、特殊选择器this:
this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。直接看案例代码：

$('p').click(function(){    //把p元素转化成jQuery的对象
    var $this= $(this) 
    $this.css('color','red')
})

三、jQuery的属性与样式：

1、.attr()与.removeAttr()：
操作特性的DOM方法主要有3个，getAttribute方法、setAttribute方法和removeAttribute方法，就算如此在实际操作中还是会存在很多问题，这里先不说。而在jQuery中用一个attr()与removeAttr()就可以全部搞定了，包括兼容问题。直接看案例来体会其用法：

<form>
        <input type="text" value="设置value" />
        <input type="text" value="获取value"/>
        <input type="text" value="回调拼接value" />
        <input type="text" value="删除value" />
    </form><script type="text/javascript">
        $("input:first").attr('value','测试')// 把“设置value”改成“测试”
        $("input:eq(1)").attr('value')// 获取第二个input的value属性的值
        //把新的值与现有的值联系在一起：
        $("input:eq(2)").attr('value',function(i, val){// 拼接第三个input的value属性的值
            return '通过function设置' + val
        })
        $("input:eq(3)").removeAttr('value')// 删除第四个input的value属性的值
    </script>

运行结果如下图：

image.png

2、.html()、.text()和.val()：
读取、修改元素的html结构或者元素的文本内容又或者操作表单字段value值是常见的DOM操作，jQuery针对这样的处理提供了3个便捷的方法.html()、.text()和.val()。

.html()的用法：操作元素的html结构
语法：$("element").html()、$("element").html(htmlString)、
$("element").html(function(index,html){...})
案例：

<div class="demo">
   <p> <a href="#">baidu</a></p></div><script type="text/javascript">
   //第一种用法(如果有多个p标签，那么只能获取第一个p标签的内容)
   alert($(".demo p").html());//会弹出 “ <a href="#">baidu</a> ”

   //第二种用法(如果有多个p标签，那么每一个p标签都会加上 .html方法里面的内容)
  ($(".demo p").html('<a href="#">taobao</a>'));  // 结果会把html方法里面的a标签添加到p标签里面，p标签里面就有两个a标签了

  //第三种用法
  $(".demo p").html(function(index,oldHtml){       return "我是第" + (index+1) + "个p标签：" + oldHtml;
  })  //结果就是(假设已经执行了第二种用法中的演示代码)：
  /*
   <p>我是第1个p标签<a href="#">baidu</a></p>
   <p>我是第2个p标签<a href="#">taobao</a></p>
  */</script>

.text()的用法：操作元素的纯文本内容
语法：$("element").text()、$("element").text(textString)、
$("element").text(function(index,text){...})
案例：

<div class="demo">
   <p> <a href="#">baidu</a></p></div><script type="text/javascript">
   //第一种用法(如果有多个p标签，那么其他p标签里的文本内容也能获取到)
   alert($(".demo p").text());//会弹出 “baidu ”，所以该方法只能获取纯文本内容

   //第二种用法(如果有多个p标签，那么每一个p标签都会被替换成纯文本内容)
  ($(".demo p").text('<a href="#">taobao</a>'));  // 结果会把class为demo的div下面的所有p标签替换成text方法里面的纯文本内容

  //第三种用法
  $(".demo p").text(function(index,oldText){       return "我是第" + (index+1) + "个p标签里面的文本：" + oldText;
  })  //结果就是：
  /*
    我是第1个p标签里面的文本：baidu
  */</script>

.val()的用法：操作表单字段value值
语法：$("element").val()、$("element").val(value)、$("element").val(function(index,value){...})
案例：

<div id="test">
  <input type="radio" name="color" id ="rd1" value="red" />红色  <input type="radio" name="color" id ="rd2" value="blue" />蓝色</div><script type="text/javascript">
  // 第一种用法(只会获取到第一个input的值，跟有没有选中没关系)
  alert($("#test input:radio").val());// 弹出“红色”
  //第二种用法(获取用户选中的值，而不是返回第一个)
  alert($("input:radio[name=color]:checked").val());// 弹出用户选中的颜色
  // 第三种用法
  $("input").val("blank");// 会把所有input的value值替换成blank
  //第四种用法(会依次获取input的value值)
  $("input:radio[name=color]").val(function(index,oldVal){    return "color-"+(index+1)+":"+oldVal;
  })</script>

3、.addClass():
过动态改变类名（class），可以让其修改元素呈现出不同的效果。直接看案例：

<style>
   .firstClass{        background: #bbffaa;
    }   .secondClass{        background: red;
    }</style><div class="left">
  <div class="aaron">
      <p>测试1</p>
  </div>
  <div class="aaron">
      <p>测试2</p>
  </div></div><script type="text/javascript">
  $('.left div').addClass('firstClass')</script>

本来“测试1”和“测试2”都是没有颜色的，下面的js代码运行后，就会给这两个div添加“firstClass”，所以“测试1”和“测试2”背景就会变成红色。还有删除class的removeClass()方法和切换class的toggleClass()方法，用法类似。

4、.css()：
在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了。看案例：

<div class="first">获取颜色</div>
    <p></p><script type="text/javascript">
        $('p:eq(0)').text( $('.first').css("background-color","red") )</script>

本来“获取颜色”这四个字是没有颜色的，运行了js代码后，就会有红色的背景颜色。添加样式还有.addClass()方法，它的优先级低于.css()方法。

5、元素的数据存储：
jQuery提供的存储接口:

jQuery.data( element, key, value )   //静态接口,存数据jQuery.data( element, key )  //静态接口,取数据   .data( key, value ) //实例接口,存数据.data( key ) //实例接口,存数据

看到这些语法也是摸不着头脑，直接看案例体会其用法：

  <h2>jQuery.data()静态方法</h2>
    <div class="left">
        <div class="aaron">
            <p>点击看结果</p>
            <p>jQuery.data</p>
        </div>
        <div><span></span></div>
    </div>
    <h2>.data()实例方法</h2>
    <div class="right">
        <div class="aaron">
            <p>点击看结果</p>
            <p>.data</p>
        </div>
        <div><span></span></div>
    </div>
    <script type="text/javascript">
    $('.left').click(function() {        var ele = $(this);        //通过$.data方式设置数据
        $.data(ele, "a", "data test")
        $.data(ele, "b", {            name : "简书"
        })        //通过$.data方式取出数据
        var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name
        ele.find('span').append(reset)
    })    </script>
    <script type="text/javascript">
    $('.right').click(function() {        var ele = $(this);        //通过.data方式设置数据
        ele.data("a", "data test")
        ele.data("b", {            name: "简书"
        })        //通过.data方式取出数据
        var reset = ele.data("a") + "</br>" + ele.data("b").name
        ele.find('span').append(reset)
    })    </script>

没点击“点击看结果”的时候是这样的：

image.png

点击了“点击看结果”后是这样的：

image.png

也就是说，data可以用来暂时存储数据，然后还可以取出来。

四、DOM操作：

1、jQuery创建节点：

var div = $("<div>我是文本节点</div>")
$body.append(div)

这段代码就会在html的body中添加一个div节点，并且内容是“我是文本节点”。

2、内部插入的append()和appendTo：
这两个方法都是向页面追加内容，不同的是append()前面是被插入的对象，后面是要在对象内插入的元素内容，而appendTo()前面是要插入的元素内容，而后面是被插入的对象。具体用法如下：

<div class="content"></div><script type="text/javascript">
        //.append(), 内容在方法的后面，
        //参数是将要插入的内容。
        $(".content").append('<div class="append">通过append方法添加的元素</div>')        //.appendTo()刚好相反，内容在方法前面，
        //无论是一个选择器表达式 或创建作为标记上的标记
        //它都将被插入到目标容器的末尾。
        $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))</script>

3、外部插入的after()和before()：
上面的append和appendTo是插入到匹配元素的内部，而这两个是插入到匹配元素的外部。看下面代码：

<div class="aaron">
     <p class="test1">测试before</p></div><div class="aaron">
     <p class="test2">测试after</p></div><script type="text/javascript">
        //在匹配test1元素集合中的每个元素前面插入p元素
        $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', 
                           '<p style="color:red">多参数</p>')
        //在匹配test1元素集合中的每个元素后面插入p元素
        $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>',
                          '<p style="color:blue">多参数</p>')</script>

看运行结果：

image.png

通过上面的代码和运行结果就很容易理解什么是外部插入了。类似的还有prepend()、prependTo()、insertBefore()、insertAfter()方法。

4、empty()和remove()：
通过下面的代码理解empty()用法：

<div class="hello">
  <p>百度</p></div>//通过empty处理
$('.hello').empty()
//结果：<p>百度</p>被移除<div class="hello"></div>

可以发现empty会清空选中的元素的内部结构。
通过下面的代码理解remove()用法：

<div class="hello">
  <p>百度</p></div>//通过remove处理
$('.hello').remove()

结果是整个div都被移除了，且如果这个div绑定有事件，使用remove方法会自动销毁这个事件。remove还可以根据条件移除，如下：

div class="test2">   <p>p元素3</p>
   <p>p元素4</p></div>//找到所有p元素中，包含了3的元素
$("p").remove(":contains('3')")

这样就只会移除“p元素3”，“p元素4”不会被移除。detach()也是移除元素，但是这个删除只是页面中不可见，这个节点还是保存在内存中。

5、克隆节点clone()：
克隆可以理解为复制，用法如下：

//clone处理一$("div").clone()   //只克隆了div结构，事件丢失//clone处理二$("div").clone(true) //div结构、div绑定的事件与数据都克隆

6、替换节点之replaceWith()和replaceAll():
这两个方法作用类似，主要是语法不一样。看下面的例子：

<div>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p></div><script>
    //replaceWith操作：
    $("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')    //replaceAll操作：
    $('<a style="color:red">替换第二段的内容</a>').replaceAll('p:eq(1)')</script>

结果就是“第二段”被替换成了“替换第二段的内容”，并且文字为红色。

7、wrap()、unwrap()、wrapAll()和wrapInner()方法：
如果要将元素用其他元素包裹起来，也就是给它增加一个父元素，针对这样的处理，JQuery提供了一个wrap方法。看案例：

<p>哈哈</p><script>
  // 给p增加一个div
  $('p').wrap('<div></div>')  //或者这样写
  $('p').wrap(function() {    return '<div></div>';   //与第一种类似，只是写法不一样
  })</script>

结果就是给p增加了一个div包裹，如下：

<div>
    <p>哈哈</p></div>

unwrap()方法就是删除一个元素的父元素，作用与wrap()刚好相反。wrap()方法只能包裹一个元素，比如说如果有多个p元素，需要用div来包裹，那么就得用wrapAll()方法。看下面代码：

<p>哈哈</p><p>嘻嘻</p><script>
  //给所有p元素增加一个div包裹
  //方式一
  $('p').wrapAll('<div></div>')  //方式二
  $('p').wrapAll(function() {    return '<div><div/>'; 
  })</script>

不过这两种方式处理的结果有差别，结果如下：

<!-- 方式一处理结果--><div>
    <p>哈哈</p>
    <p>嘻嘻</p></div><!-- 方式二处理结果--><div>
    <p>哈哈</p></div><div>
    <p>嘻嘻</p></div>

wrapInner()方法的作用说起来就感觉很绕，直接看代码感受一下：

<div>哈哈</div><div>嘻嘻</div><script>
  //给所有元素增加一个p包裹
  //方式一：
  $('div').wrapInner('<p></p>')  //方式二：
  $('div').wrapInner(function() {     return '<p></p>'; 
  })</script>

两种方法处理结果相同，结果就是：

<div>
    <p>哈哈</p></div><div>
    <p>嘻嘻</p></div>

五、jQuery的遍历：

jQuery的遍历有很多种方式，下面来看一下都如何使用。
1、children()和find()方法：
快速查找合集里面的第一级子元素，此时可以用children()方法。比如：

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul></div><script>
  //找到所有class=div的元素
  //找到其对应的子元素ul，然后筛选出最后一个，给边宽加上颜色
  $('.div').children(':last').css('border', '3px solid blue')</script>

注意，  $('.div').children()只能找到ul，因为div与ul是父子关系，li与div是祖辈关系，因此无法找到。如果想连li也找到，那就得用find()方法:

$("div").find("li")

2、parent()和parents()方法：
parent方法，和children方法相反，就是查找上一级元素，这里就不再举例说明。parents方法和parent方法的不同之处在于parent只查找父级一级的元素，而parents则会一直往上查找。

3、closest()方法：
以选定的元素为中心，往内查找可以通过find、children方法。如果往上查找，也就是查找当前元素的父辈祖辈元素，jQuery提供了closest()方法，这个方法类似parents但是又有一些细微的区别，属于使用频率很高的方法。区别有以下3点：

• 起始位置不同：.closest开始于当前元素 .parents开始于父元素

• 遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合

• 结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

4、next()、prev()和siblings()方法：
用于快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合。

 <div class="div">
    <ul class="level-1">
         <li class="item-1">哈哈</li>
         <li class="item-2">嘿嘿</li>
         <li class="item-3">嘻嘻</li>
    </ul></div><div class="div">
    <ul class="level-1">
         <li class="item-1">哈哈</li>
         <li class="item-2">嘿嘿</li>
         <li class="item-3">嘻嘻</li>
    </ul></div><script>
   $('.item-1').next().css('border', '1px solid red');</script>

运行js后，那么这两个class="item-2"的元素就会被选中，然后这两个“嘿嘿”都会添上红色边框。prev方法和next()相反，next是找下一个，prev是找前一个。$('.item-1').next()是item-2，$('.item-2').prev()就是item-1。siblings方法就不管前后，反正就是找同辈的元素，$('.item-2').siblings()就是item-2的同辈元素，那么item-1和item-3都会被选到。

5、add()方法：

<ul>
    <li>list item 1</li>
    <li>list item 3</li></ul><p>新的p元素</p><script>
    $('li').add('p');</script>

p元素和ul元素本来是同一级别的，如果$('li').add('p')运行后，那么就会把p与li归结到一组。这就是add的作用。还有一种方式，就是动态创建P标签加入到合集，然后插入到指定的位置，但是这样就改变元素的本身的排列了，语法如下：

 $('li').add('<p>新的p元素</p>').appendTo(目标位置)

6、each()方法：
each是一个for循环的包装迭代器，each通过回调的方式处理，并且会有2个固定的实参，索引与元素each回调方法中的this指向当前迭代的dom元素。看案例：

<ul>
    <li>哈哈</li>
    <li>嘻嘻</li></ul><script>
   $("li").each(function(index, element) {        //index 索引 0,1
        //element是对应的li节点 li,li
        //this 指向的是li
        $(this).css('color','red');
   })</script>

这样就会把“哈哈”和“嘻嘻”的颜色设置为红色。

作者：贪挽懒月
链接：https://www.jianshu.com/p/4f6dc5539043