大多数人,都低估了编程学习的难度,而高估了自己的学习能力和毅力。
当前系列: Bootstrap和JQuery 修改

复习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还提供了很一些“花哨”的动画效果:

其他

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重新实现之前的DOMBOM作业。


源栈 JavaScript JQuery
觉得很 ,不要忘记分享哟!

任何问题,都可以直接加 QQ群:273534701

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

我们的 特色

  • 先学习,后付费
  • 线上/线下,自由组合

更多了解

QQ群:273534701

答疑解惑,远程debug……

B站 源栈-小九 的直播间

写代码要保持微笑 (๑•̀ㅂ•́)و✧