jQuery之基础核心（demo)

Posted 2020-10-13

jQuery之基础核心

 

 

作者的热门手记

• jQuery之基础核心（demo)

   

本文主要简单的介绍下jQuery一些基础核心，大致了解jQuery使用模式。适用于有html、CSS、javascript基础，又刚刚接触jQuery的初学者。（如有错误，请指正）
咱们从基础语法说起,
基础语法是：$(selector).action()

• 美元符号$定义jQuery
• 选择符（selector）“查询”和“查找” HTML 元素

• jQuery 的 action() 执行对元素的操作

  $是什么？

  在jQuery程序中，基本上都是以“$”开头的，那么这个$到底是什么呢？调试一下就知道

  console.log(typeof $); //function

  实际上来说，一般后面带()都是函数，如

  test();

  是不是应该之前就有定义过这个函数

  function test(){
  //...
  }

  现在是不是就知道$是一个函数，那么也就是说$就是jQuery封装的一个函数。
  由于$本身就是jQuery的缩写，也就是说$和jQuery是等价的。如：

  console.log($===jQuery);    //true

  那么其实也可以用jQuery开头。

  强大的jQuery选择器

  接下来我们来了解一下selector，一直以来，jQuery强大的选择器使其广受青睐。jQuery选择器大致分为基本选择器、属性选择器、表单选择器、位置选择器、过滤选择器、用于结果集的选择器。

• 基本选择器（仿CSS选择器，基本上能写CSS选择器，jQuery的基本选择器也掌握差不多）

$(*)    //获取所有元素
$(‘#div1‘)  //获取ID名为div1的元素
...

• 属性选择器（根据页面元素属性来获取）

  $("[href]") //获取所有带有 href 属性的元素
  $("[href=‘#‘]") //所有 href 属性的值等于 "#" 的元素
  ...

  • 表单选择器(根据表单type值来获取）

    $(":password")   // 获取type="password" 的 <input> 元素
    $(":button")    //获取type="button" 的 <input> 元素
    ...

  • 位置选择器（根据页面元素在页面的位置来获取）

    $("ul li:first-child") //获取所以ul中第一个子元素li
    $("ul li:last-child")   // 获取所以ul中最后一个子元素li
    ...

  • 过滤选择器（通过特定的过滤规则来筛选出所需的 元素）

    $(":empty") //获取无子（元素）节点的所有元素
    $("p:hidden")   //获取所有隐藏的 <p> 元素
    ...

  • 用于结果集的选择器（通过jQuery方法传参来筛选所需的元素）

    $(‘div‘).has(‘span‘); // 获取包含span元素的div元素
    $(‘div‘).first(); //获取第1个div元素
    ...

    想了解更多jQuery选择器请查阅jQuery API，这里就不一一列举。

方法函数化

上文提到$是jQuery封装的函数，那么$()是什么呢？

console.log($());  //Object

显而易见，$()是一个对象。$是jQuery封装的函数，那么$()也应该是jQuery对象。

console.log($() instanceof jQuery); //true

那么通过jQuery获取一个页面元素，也应该是jQuery对象。如获取页面上id名为p1的元素。

console.log($(‘#p1‘) instanceof jQuery); //true

在获取到页面元素以后，就可以对其进行某种操作了，也是action。在原生的JS中，我们要对元素进行操作是这样写的：

document.getElementById(‘p2‘).innerHTML="Perona";

那么在jQuery里面是不是可以这样写的：

$(‘#p3‘).html="Perona";//没任何效果

没有任何反应，这显然是不对。实际上，在jQuery里，执行操作很少用=，而是通过()传参来执行，前面提到凡是带()基本上就是一个函数，那么也就是说jQuery源码中应该有html()这个函数。那么现在我们试着传参来看看:

$(‘#p3‘).html(‘佩罗娜‘);

程序运行成功。这就是方法函数化。

取值与赋值

操作网页元素，最常见的需求是取值和赋值。
有趣的是，jQuery使用同一个函数，来完成取值（getter）和赋值（setter）。到底是取值还是赋值，由函数的参数决定。
如：

alert($(‘#div1‘).html());   //html()没有参数，表示取值
$(‘#div2‘).html("爱慕课");//html()有参数，表示赋值

需要注意的是，如果结果包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（text()例外，它将取出所有元素的text内容）。

alert($(‘li‘).html());//当一组元素的时候，取值是一组中的第一个
$(‘li‘).html(‘佩罗娜‘);//当一组元素的时候,赋值是一组中的所有元素
alert($(‘li‘).text());

链式写法

前面提到$(selector)是jQuery对象，那么$(selector).action()执行完返回的又是什么呢？咱们调试一下：

console.log($(‘#div3‘).css(‘color‘, ‘red‘));//object
console.log($(‘#div3‘).css(‘color‘, ‘red‘) instanceof jQuery);//true

返回的是object，还是一个对象。这是为什么呢？其实在执行action()操作的时候，我们得先获取元素对象后才可以调用action()。如果缺乏元素对象，代码就会报错，也就是说$().css(‘color‘, ‘red‘);这种写法是错误的。我们得先获取元素对象，返回对象才可以调用action()。那么，也就是说，这个对象还是个jQuery对象。既然还是jQuery对象，那么是不是还可以接着调用action()，答案是肯定的。

console.log($(‘#div3‘).css(‘color‘, ‘red‘).html(‘imooc‘));//object
console.log($(‘#div3‘).css(‘color‘, ‘red‘).html(‘imooc‘)instanceof jQuery);//true

这也正是jQuery的魅力之一，采用了链式写法，可以连续调用action()，大大简化代码。根据基本的语法采用链式写法，便衍生出这样的$(selector).action()…action()
如下面代码：

$(‘#div3‘).css(‘color‘, ‘gold‘);
$(‘#div3‘).html(‘么么哒‘);

采用链式写法

$(‘#div4‘).css(‘color‘, ‘gold‘).html(‘么么哒‘);

jQuery与原生JS

接下来咱们说说jQuery与原生JS的关系，首先知道jQuery 是一个 JavaScript 库，它在语法上是遵循原生JS的语法，也就是说jQuery与原生JS是可以共存的。但是两者之间并不能混用，不能在jQuery对象里调用JS的事件或方法，同样也不能在JS对象里调用jQuery的事件或方法。
js的写法

document.getElementById(‘btn1‘).onclick=(function(){
            alert(‘么么哒‘);
        });

jq的写法

$(‘#btn2‘).click(function(){
            alert(‘慕女神‘);
        });

错误的写法如：
在原生JS里调用jQuery的事件

document.getElementById(‘btn3‘).click(function(){
            alert(‘慕女神‘);
        });

在jQuery里调用原生JS的事件

 $(‘#btn4‘).onclick=(function(){
            alert(‘么么哒‘);
        });

---

正所谓“知其然知其所以然”，想要更好的学习掌握jQuery,不妨去看看源码。推荐去看看Aaron艾伦的jQuery源码解析。