Jquery第一章 Jquery基础

最新推荐文章于 2022-07-19 14:34:58 发布

穿林来了

最新推荐文章于 2022-07-19 14:34:58 发布

阅读量334

点赞数 1

分类专栏： jquery笔记文章标签： jquery

本文链接：https://blog.csdn.net/chuanlinlaile/article/details/79565123

版权

jquery笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一章 Jquery基础

一.基础介绍

什么是jquery？jquery就是一个javascript库,这个库封装了很多函数和对象,其目的就是为了简化我们的javascript操作dom的代码。在书写jquery程序中,对于页面元素的选择,内置的功能函数,都必须用$符号,而这个$符号就是jquery对象。因此jquery是可以完全替代$符号,其二者是等意。

<script type="text/javascript">
    $(function(){
        $('#test').css('background','deeppink');
        jQuery('#test').css('color','white');
        alert(jQuery===$);//jQuery==$
        alert(jQuery); //本身返回的是jQuery整个方法
        alert(jQuery()); //[object Object]
        alert(jQuery('#test')); //[object Object]
        alert(jQuery('#test').css('color','white'));//[object Object]
//注意：在执行.css()这个功能函数并不是直接被$调用,而是先获取页面元素,返回jQuery对象,
//该对象再调用.css()功能函数。由此可见能够使用连缀方式
        $('#test').css('background','deeppink').css('width','100px');
    });
</script>

二.加载方式

在jquery中程序代码,为了让方法在浏览器中加载完毕后的页面执行,一般会使用$(function(){...});将方法进行首尾包裹。为什么要包裹呢？那是因为jquery代码文件是在<body>标签元素之前加载的,而jquery代码文件里的方法一般都需要操作dom元素。而此时的body并为加载。为了让方法能够正常执行,则必须等待所有的dom元素加载完之后才能进行dom元素操作,于是就需要通过包裹的方式延迟等待加载功能。

而在javascript原生代码中,原本是通过load事件来实现延迟等待加载的。而jquery就提供了$(function(){...});来包裹完成。

<script type="text/javascript">
    window.onload=function(){};//javascript延迟加载
    $(function (){});//jQuery延迟加载
</script>

javascript和jqueryt延迟加载的区别
执行时机	必须等待网页的全部加载,再执行代码	只需要等待网页中的DOM元素加载完毕
执行次数	只能执行一个,多次则会被覆盖	可以执行多次,第N次都不会被覆盖
多种写法	没有	$(document).ready(function (){ });

在实际应用中,很少直接使用window.onload事件来实现延迟等待加载,这是因为该事件所关联的方法必须要等待网页的全部加载,然后再执行包裹代码,那倘若网页中有很多个大型元素,例如:图片。最令人烦心的就是在网速及其缓慢的情况下,页面已经全部展开,图片还在缓慢加载,这时页面上的所有javascript交互功能全部处于假死状态,并且只能执行单次,这会在开发上带来困难。

<script type="text/javascript">
//javascript和jquery的执行次数的区别
    window.onload=function(){
        alert('window.onload-1');
    }
    window.onload=function(){
        alert('window.onload-2');
    }//第一个onload会被覆盖
    $(function(){
        alert('$(function(){});-1')
    });
    $(function(){
        alert('$(function(){});-2')
    });//不会被覆盖,且按序执行
</script>

三.对象间的转换

jquery对象是jquery库特有的对象,jquery其实就是一个“类”,不仅封装了许多的方法,而且还可以动态的通过动态的加载,插件扩展类。

<script>
    $(function () {
//**********获取对象
        alert($('#div'));//[object Object]
        alert(document.getElementById('div'));//[object HTMLDivElement]
//不难看出,jQuery对象就是用jQuery类库中选择器返回的对象
//而DOM对象,就是使用原生的javascript代码获得的对象
    });
</script>

1.jQuery对象转换成DOM对象

jquery对象是特殊的数组对象,即使只有一个元素，jquery对象仍然是一个数组。之所以说特殊,是因为实际上jquery对象包含一个数组对象的各种方法的类。而jquery对象的数组里存放的是dom对象,因此可以通过索引的方式将jquery对象转换成dom对象。

<script>
    $(function () {
//***********jQuery对象转换成DOM对象
        alert($('#div'));//[object Object]//返回的是jQuery对象
        alert($('#div')[0]);//[object HTMLDivElement]第一种方式
//jQuery对象专门提供了一个get()方法将jQuery对象转换成DOM对象
        alert($('#div').get(0));//[object HTMLDivElement]第二种方式
    });
</script>

2.DOM对象转换jQuery对象

<script>
    $(function () {
//***********DOM对象转换成Jquery对象
//对于DOM对象,只需要将$()把DOM对象包装起来即可
        alert(document.getElementById('div'));//[object HTMLDivElement]
        alert($(document.getElementById('div')));//[object Object]
    });
</script>

建议,如果在开发具体项目时,如果无法确定一个对象的类型是jquery还是dom对象,可以使用$()将其进行转化,这样就可以保证此对象一定是jquery对象了。

<script>
    $(function () {
//推荐:在开发项目时，如果获取的对象是jQuery对象,那么在变量标识符前面加上一个$，
// 这样更容易识别出哪些是jQuery对象。
        var $div=$('#div');
        var div=document.getElementById('div');
        alert($div+'\n'+div);//[object Object] [object HTMLDivElement]
    });
</script>

四.$符所有权

当引入多个库,导致”$”符号有冲突时：

1. jQuery库在其他库之前引入,那么”$”所有权归其他库。

var $$=jQuery;

2. jQuery库在其他库之后引入,那么”$”所有权归jquery库。

<script type="text/javascript">
    jQuery.noConflict();//取消$符所有权
    var $$=jQuery;//$$代替jQuery
    alert($$('#div').css('color','red'));//[object Object]
</script>

五.jQuery容错机制

<body>
<p id="show">我是一个P</p>
<script type="text/javascript">
    $(function () {
        $('#show').css('color','deeppink');
        $('#sho').css('background','black');
//这里我们发现并没有ID为sho的元素,但jQuery并不会报错,这就是jQuery的容错机制
//而相比之下javascript就会报错
    });
    var sho=document.getElementById('sho');
    sho.style.background='black';
</script>
</body>

<body>
<p id="show">我是一个P</p>
<script type="text/javascript">
    //倘若也想javascript容错,可以这样做
    if(document.getElementById('sho')){
        sho.style.background='black';
    }
    //而jQuery能够容纳错误的元素存在,那么又怎么判断这个元素到底存不存在呢？
    //因为不论是存在与否的元素,返回的都是jQuery对象,
    //则不能依照像判断javascript一样用返回的对象判断,则可以
    if($('#sho').get(0)){
        $('#sho').css('background','black');
    }
    if($('#sho')[0]){
        $('#sho').css('background','black');
    }
    if($('#sho').size()>0){
        $('#sho').css('background','black');
    }
    if($('#sho').length>0){
        $('#sho').css('background','black');
    }
</script>
</body>

穿林来了

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Jquery第一章 Jquery基础

第一章 Jquery基础一.基础介绍什么是jquery？jquery就是一个javascript库,这个库封装了很多函数和对象,其目的就是为了简化我们的javascript操作dom的代码。在书写jquery程序中,对于页面元素的选择,内置的功能函数,都必须用$符号,而这个$符号就是jquery对象。因此jquery是可以完全替代$符号,其二者是等意。&lt;script type="text/j...
复制链接

扫一扫