jQuey入门到精通（一）连载

飞熊 • 2023年4月25日上午9:59 • 技术随笔 • 阅读 78

入门jQuery

1.初识理解

1.1 原生JS的固定写法

window.onload = function(ev){ };

1.2 jQuery的固定写法

$(document).ready(function(){ });

1.3 原生JS查找DOM元素，第一个div

window.onload = function (ev) {
    var div1 = document.getElementsByTagName('div')[0];
    console.log(div1);
};

1.4 jQuery查找DOM元素，第一个div

$(document).ready(function(){
    var $div1 = $("div")[0];
    console.log($div1);
});

2.jQuery和JS入口函数的区别

2.1 原生JS和jQuery入口函数的加载模式不同，原生JS会等到DOM函数加载完毕，并且图片也加载完毕才会执行，jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行.

window.onload = function(ev){
    //通过原生的JS入口函数可以拿到DOM元素
    var img = document.getElementsByTagName("img")[0];
    console.log(img);
    //通过原生JS入口函数可以拿到DOM元素的宽高
    var width = window.getComputedStyle(img).width;
    console.log("onload",width);
};

$(document).ready(function(){
    //通过jQuery入口函数可以拿到DOM函数
    var $img = $("img");
    console.log($img);
    //通过jQuery入口函数不可以拿到DOM函数的宽高
    var $width = $img.width();
    console.log("ready",$width);
});

2.2 原生的JS如果编写了多个入口函数，后面编写的会覆盖前名编写的，jQuery中编写多个入口函数，后面的不会覆盖前面的。

window.onload = function(ev){
    alert('hello');
};
window.onload = function(ev){
    alert('world');
};

$(document).ready(function(){
    alert('hello');
});
$(document).ready(function(){
    alert('world');
});

2.3 jQuery的四种写法

//1.第一种
$(document).ready(function(){
    alert("hello world")
});
//2.第二种
jQuery(document).ready(function(){
    alert("hello wold")
});
//3.第三种 (推荐第三种,最简洁)
$(function(){
    alert("hello boys")
});
//4.第四种
jQuery(function(){
    alert("hello girls;")
});

3.jQuery冲突问题

使用jQuery语法需要引入jQuery库，jQuery中对$定义语法并使用，如果引用的其他js文件也有对$符号的引用产生冲突。解决方法如下：

3.1 释放$的使用权

注意点：释放操作必须在编写其他jQuery代码之前编写,释放之后就不能再使用$,改为使用jQuery。

jQuery.noConflict();

3.2 自定义一个访问符号

var nj = jQuery.noConflict();
nj(function(){
    alert("hello world");
});

4.jQuery核心函数

$();jQuery();就代表调用jQuery的核心函数

//1.接受一个函数
$(function(){
    alert("hello world")
    //2.接受一个字符串
    //2.1接受一个字符串选择器
    //返回一个jQuery对象，对象中保存了找到的DOM元素
    var $box1 = $(".box1");
    var $box2 = $("#box2");
    console.log($box1);
    console.log($box2);
    //2.2接受一个代码片段
    var $p = $("<p>我是段落</p>");
    console.log($p);
    $box1.append($p);
    //3.接受一个DOM元素
    //会被包装成一个jQuery对象返回给我们
    var span = document.getElementsByTagName("span")[0];
    console.log(span);
    var $span = $(span);
    console.log($span);
});

<body>
    <div class="box1"></div>
    <div id="box2"></div>
    <span>我是span</span>
</body>

5.jQuery对象

$(function(){
    /* 
    jQuery对象是一个伪数组
    伪数组：有0到length-1的属性，并且有length属性
    */
    var $div = $("div");
    console.log($div);
});

下一篇：https://blog.csdn.net/qq_53123067/article/details/124462198?spm=1001.2014.3001.5501

喜欢的可以点赞关注加评论，你的支持就是博主写作的最大动力！

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/140157.html