jQuery(一)-- 初步了解

jQuery(一)– 初步了解

jQuery介绍

由John Resig创建于2006年一月的开源项目,jQuery凭借着跨平台的兼容性,简洁的语法,极大的简化了JavaScript人员遍历HTML文档,操作DOM,处理事件,执行动画,和开发Ajax的操作。

jQuery优点

  • 轻量级。采用Uglifys压缩后保持再30kb左右。
  • 拥有强大的选择器。jQuery允许开发者使用CSS1到CSS3几乎所有选择器,以及jQuery独创的高级而复杂的选择器。
  • 出色的DOM封装操作。jQuery封装了大量常用的DOM操作,使开发者再编写DOM操作相关程序的时候能够得心应手。
  • 可靠的事件处理机制。jQuery的事件处理机制吸收了Javascript专家编写的Dean Edwards编写的事件处理函数的精华,使得jQuery再处理事件绑定的时候相当可靠。在预留退路(graceful degradation)、循序渐进以及非入侵式(Unobtrusive)编程思想方面,jQuery也做得非常不错。
  • 完善的Ajax。jQuery将所有的ajax操作封装到一个函数$.ajax()里,使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用问题。
  • 不污染顶级变量。jQuery只建立一个名为jQuery的对象。其所有的函数方法都在这个对象之下。其别名$也可以随时交出控制权,绝对不会污染其他的对象。使得jQuery库可以与其他Js库共存
  • 出色的浏览器兼容性
  • 链式操作方式。对发生在同一个jQuery对象上的一组动作,可以直接连写无需重复获取对象。
  • 隐式迭代。当用jQuery找到带有.myClass类的全部元素时,无需循环遍历每一个返回的元素。
  • 行为层与结构层的分离。开发者可以使用jQuery选择器选中元素,然后直接给元素添加事件。简单的来说就是可以在js中操作html。
  • 丰富的插件支持。
  • 完善的文档。
  • 开源

jQuery使用

下载

可以通过node.js自带的包管理器npm或者bower等包管理器下载,也可以通过官网下载

npm下载/cnpm下载/bower下载

npm i jquery/cnpm i jquery/bower i jquery

官网下载

https://code.jquery.com/jquery-3.4.1.min.js,另存为Js文件即可,也可以在线引用

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

第一个jQuery程序

开始之前需要知道一点,在jQuery库中,$就是jQuery的一个简写形式,例如$("#foo")jQuery("#foo")是等价的,$.ajaxjQuery.ajax是等价的。

//引入jQuery
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function(){    //等待DOM元素加载完毕
           alert("hello world"); 
});    
</script>

其中$(document).ready();这段代码类似于window.onload的作用,但是其中有些差别

window.onload$(document).ready()
执行时机必须等待网页中所有的内容加载完毕后(包括图片)才能执行网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完
编写个数不能同时编写多个,以下代码无法正确执行:window.onload = function(){alert("test")};window.onload = function(){alert("test2");}结果只会输出“test2”能同时编写多个,以下代码能够正确执行:$(document).ready(function(){alert("hello world");}) $(document).ready(function(){alert("hello again")};);结果两次都输出
简化写法 $(document).ready(function(){//....};)可以简写为$(function(){});
链式代码风格

我的理解是通过.运算符来链接层级操作,类似于Js原生的document.getElementById('#app').value这样的。

代码规范

(1)对于同一个对象不超过三个操作的,可以直接写成一行。

“$(‘li’).show().unbind(‘click’);

(2)对于同一个对象不超过三个操作的,建议每行写一个操作

$(this).removeClass('mouseout')
       .addClass('mouseout')
       .stop()
       .fadeTo('fast',0.6)
       .fadeTo('fast',1)
       .unbind('click')

(3)对于多个对象的少量操作,可以每个对象写一行,如果涉及子元素,可以考虑适当地缩进,例如上面提到的代码。

$(this).addClass('highlight').children('li').show().end()
---------------------------------------------------------
$(this).addClass('highlight')
       .children('li').shiw().end()
注释的重要性

$('#table > tbody > tr:has(td:has(:checkbox:enabled))').css('background','red');

这一行代码就算是精通jQuery的人也不一定能一眼就看出作用,通过有意义的注释可以提高开发效率

//在一个id为table的表格的tbody中,如果每行的一列中的checkbox没有被禁用,则把这行的背景设为红色
$('#table > tbody > tr:has(td:has(:checkbox:enabled))').css('background','red');

jQuery对象和DOM对象

DOM对象(Document Object Model,文档对象模型)

每一份DOM都可以表示成一颗树,树的内容为html代码的标签元素,按层级表示

<html>
    <head>
        <title></title>
    </head>
    <body>
        <table>
             //...   
        </table>
        <p>
            //...
        </p>
        。。。
    </body>
</html>

《jQuery(一)-- 初步了解》

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。

//通过获取id为foo的元素内的html代码。.html()是jQuery里的方法

DOM对象操作jQuery对象操作
document.getElementById(‘foo’).innerHTML$(‘#foo’).html()

注意

在jQuery对象中无法使用DOM对象的任何方法。,DOM对象中也不能使用任何jQuery方法。

像DOM对象有innerHTML方法,但是jQuery中没有;jQuery对象中有html()方法,但是DOM中没有。

jQuery对象和DOM对象的互相转换

在讨论此之前规定好代码规范:

  • 如果获取的是jQuery对象,那么在变量前面加上$

var $variable = jquery对象

  • 如果获取的是DOM对象,

var variable = DOM对象

jQuery对象转成DOM对象

jQuery 对象不能使用DOM 中的方法,但如果对 jQuery 对象所提供的方法不熟悉,或者 jQuery 没有封装想要的方法,不得不使用 DOM 对象的时候,有以下两种处理方法。

jQuery 提供了两种方法将一个jQuery对象转换成 DOM 对象,即[index]get(index)

案例html代码:

<input name="Checkbox" type="checkbox" id="cr">

(1)jQuery对象是一个类似于数组的对象,可以通过[index]的方法得到相应的DOM对象

var $cr = $('#cr');   //jquery 对象
var cr = $cr[0];      //DOM 对象

alert(cr.checked);    //检测这个checkbox是否被选中

(2)另一种方法是jQuery 本身提供的,通过get(index)方法得到相应的 DOM 对象

var $cr = $('#cr');   //jquery 对象
var cr = $cr.get(0);      //DOM 对象

alert(cr.checked);    //检测这个checkbox是否被选中
DOM对象转成jQuery对象

对于一个 DOM 对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。方式为$(DOM对象)

var cr = document.getElemntById('cr');   //DOM 对象
var $cr = $(cr);                         //jQuery 对象

转换后,可以任意使用jQuery 中的方法。

通过以上方法,可以任意相互转换jQuery 兑现和 DOM 对象。

范例代码)

解决jQuery库与其他库的冲突

在jQuery 库中,几乎所有的插件都被限制在它的命名空间里 — jQuery。通常,全局对象都被很厚地储存在jQuery 命名空间里,因此当jQuery 库和其他JavaScript 库一起使用时不会引起冲突。

默认情况下,jQuery用 — $作为快捷方式。

一共有三种方式,其中第三种有两种方法

  • 方式一:移交“$”使用权
jQuery.noConflict();    //将变量$ 的控制权交给prototype.js

/**
                 * 在该函数内就可以用“jQuery”代替字符“$”使用jquery
                 */
jQuery(function(){//使用jQuery
    jQuery("p").click(function(){
        alert(jQuery(this).text());
    })
})
$('pp').style.display = 'none'; //使用pototype.js隐藏元素
  • 方式二:起别名
var $J = jQuery.noConflict();    //自定义快捷方式
            
            /**
             * 同样的,在这里可以使用“$J”代替字符“$”使用jquery
             */
            $J(function(){
                $J('p').click(function(){
                    alert($J(this).text());
                })
            })
            $('pp').style.display = 'none';
  • 方式三:既可以使用字符$,又不用起别名

    • 其一:移交使用权时传参,之后就可以在jQuery方法内使用字符$而不用别名
    jQuery.noConflict();
    //使用jQuery设定页面加载时执行的函数传参
    jQuery(function($){
        $("p").click(function(){
            alert($(this).text());
        })
    });
    $('pp').style.display = 'none';
  • 其二:类似于一,不过是使用匿名函数

    jQuery.noConflict();
    //匿名函数内部的 $ 均为jQuery
    (function($){
        $("p").click(function(){
            alert($(this).text());
        })
    })
    $('pp').style.display = 'none';
    原文作者:Bill
    原文地址: https://segmentfault.com/a/1190000020047187
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞