复习JQuery的介绍：方便的Ajax调用

除此以外，JQuery还有一系列的优势，使其成为十余年来最流行的（没有之一）JavaScript库！

1. 超级流畅的语法/书写模式（链式调用）
2. 强大的选择器 （querySelector()）
3. 大量第三方插件（plugin）的支持（bootstrap, Vue, JQuery UI, mobile UI……）
4. 常用方法封装（toggle/hide/animate……）
5. 完美解决浏览器兼容问题（cross-browser）
6. ……

引入JQuery

官网：https://jquery.com/

（和bootstrap类似）本质上就是下载一个（核心）jquery.js文件，及其配套文件：

• jquery.min.js：压缩文件
• jquery.min.map：映射文件

可以使用npm（复习）安装，也可以使用jquery的CDN（复习）

npm install jquery

PS：如果使用的是VS，新建的ASP.NET项目中会自带jquery类库（演示）

引入时注意顺序，首先是JQuery，然后才是基于JQuery的第三方插件（比如：jquery.validate.js）

先睹为快：

        $(document).ready(function () {           // 起手式
            $("p").click(function () {            // 选择器和事件
                $(this).hide();                   // 常用封装
            })
        });

JQuery对象

使用$()包裹：

1. 原生JavaScript/DOM对象，比如：$(document) 、（以后事件中的）$(this)，或者：

   $(document.getElementById("xj")) 

2. 选择器字符串，比如：$("p")
3. html字符串，比如：

   var $p = $('<p>jquery直接生成</p>')

就会

生成

一个JQuery对象。

演示：

PS：$()实际上是一个方法调用：（演示）

$ === jQuery

使用JQuery对象才可以调用JQuery的属性/方法，比如：

$(this).length;
$('p').hide();
$('<p>jquery直接生成</p>').appendTo($('div')) 

书写惯例：JQuery对象的变量以$开头

var $p = $('p');

转化

通过$()获得的是一个集合对象。演示：

$('p').length     //3，表明其中共有3个p标签元素

有时候我们还是需要拿到原生的JavaScript对象，这时候可以在JQuery对象上使用下标：

$('p')[0];    //使用方括号
$('p').get(0)  //使用get()方法

可以把JQuery对象视为一个集合。

注意：不要混淆了原生JavaScript对象和JQuery对象，JQuery对象的方法不能和原生DOM对象方法混用：

$('p').style = 'color:blue';       //错误
$('p')[0].style = 'color:blue';    //正确

$('p').hide();//正确
document.getElementsByTagName('p').hide()//错误

选择器

引入HTML页面

即$()方法中的字符串参数，指示JQuery在文档中筛选/获取到相应的DOM元素。

JQuery selector完全借鉴了CSS选择器（复习）：

• 标签 / 类 / Id：'tagName' / '.className' / '#Id'

  $('p')
  $('.red')
  $('#xj')

• 属性：含有 / 值等于(不等于/以...开头/结尾）

  $('[href]')
  $('[href="\join"]')

• 位置：:first / :last / :even / :odd /

  $('p:first')

• 组合：, > +~

  $('p,h1')

再次强调：通过selector返回的是JQuery对象不是一个DOM元素，而类似于集合。

另外，即使JQuery对象中没有任何元素，调用其方法也不会报错……（理由类似于：调用空集合对象的方法）

对于这个问题，如果未找到任何元素有特别的处理，可以首先检查JQuery对象length是否大于0。

PS：ES6的selectQuery其实是借鉴的，但ES6的querySelector()避免了$('')[0]的麻烦

DOM树关系

通过位置，在DOM树中

祖先

• parent() ：父（上一）代
  
• parents() ：（所有）祖先
  
• parentsUntil(selector)：selector可选，向上寻找，直到找到满足selector条件的为止（但不包含selector对应元素）

$('strong').parent()
$('strong').parents()
$('strong').parentsUntil('body')

后代

• children()：孩子（下一代）
  
• find(selector)：（所有）子孙，seletor必须的，否则结果为null

$('div').find('a')

同胞

• next()/nextAll()/nextUntil()：后面的（一个）/全部/直到
• prev()/prevAll()/prevUntil()：上一个（一个）/全部/直到
  
• siblings() ：不分前后

以上方法，都还可以带一个selector参数作为筛选条件。

$('p:first').siblings('quote')

过滤 

• first()：第一个
• last()：第二个
• eq(index)：和[]、get()的区别，eq()返回的仍然是JQuery对象

  $('div').children()[0].hide()    //报错
  $('div').children().eq(1).hide()    //OK

• filter(selector)

  $('div').children().filter('p')
  //等同于：
  $('div').children('p')

• not(selector)

  $('div').children().not('p')

@想一想@：有了JQuery选择器，为什么还需要遍历？

DOM操作

添加

• append() / appendTo() 
• prepend() / prependTo() 
• before() / after()

$('div').append($('h1').eq(0));//在div中附着第一个h1标签
$('h1').appendTo($('div'))//将第一个h1标签附着到div中

注意：append/prepend和after/before的区别（复习）

删除

remove()

$('p').remove();//所有p标签元素全部删除
$('p').remove(':first');//删除第一个p标签元素

替换

replaceWith()

$('p:first').replaceWith($('img'))

内容属性

• hide() / show() / toggle() / empty()：隐藏 / 显示 / （在隐藏和显示间）切换 / 清空文本
• text() / html() ：同innerText和innerHTML
• attr()：统一了原生JavaScript中set/getAttribute()和“.”出来的对象属性

和原生DOM元素的属性一样，JQuery中的这些方法，不给参数就取值，给参数就赋值。

但赋值取值时，究竟是作用的JQuery对象中所有元素，还是第一个元素，有些混乱，¯\_(ツ)_/¯，我们写代码的时候最好指明！

CSS

因为css的操作如此广泛，所以JQuery专门为CSS配置了一些方法：

• css()：传入两个参数，css属性和它的值

  $('h1').css('color', 'red')    //设置颜色
  $('h1').css('color')    //获取颜色

• width()/height()：px和百分比，

  $('h1').height(120)    //px可以用整数
  $('h1').height('50%')     //百分百必须用字符串

• addClass() / removeClass()：添加/删除CSS类
• toggleClass()：在有类修饰和没有类修饰间切换

  setInterval(function () {
      $('h1').toggleClass('red');
  }, 600);

另外，JQuery还提供了很一些“花哨”的动画效果：

• hide()/show()/toggle()
• 淡入淡出：fade...()
• 滑动：slide
• 自定义动画：animiate

其他

data-*和data()

HTML5引入了新属性data-*，可以专门用于存放数据：

<h1 data-id="23">源栈欢迎您！</h1>

然后，JQuery也为我们提供了非常方便的获取data-*值的方法data()：

$('h1').data('id')

回调函数

JQuery的很多方法还可以使用回调函数。比如attr()方法：

    $('p').attr('style', function (index, attr) {
        if (index !== 0) {
            return attr + '; font-size: 20px;';
        }
    })

作业

利用JQuery重新实现之前的DOM和BOM作业。

源栈学历

在当前系列 Bootstrap和JQuery 中继续学习：

多快好省！前端后端，线上线下，名师精讲

• 先学习，后付费；
• 不满意，不要钱。
• 编程培训班，我就选源栈

更多了解 加：