jQuery基础（jQuery概念，jQuery与js入口函数的区别及其入口函数的其他写法和冲突问题）

╰+哭是因爲堅強的太久メ 2024-04-17 17:40 61阅读 0赞

### 1、jQuery是什么？ ###

jQuery是javascript库。可以简化对原生js的操作

### 2、为什么使用jQuery ###

强大选择器，方便快速查找DOM元素。浏览兼容好

### 3、jQuery和JS入口函数的区别 ###

实例代码如下：

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

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

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

window.onload = function (ev) { 
                alert("hello lnj1");
            }
            window.onload = function (ev) { 
                alert("hello lnj2");
            }
    		//只弹出第二个

$(document).ready(function () { 
                alert("hello lnj1");
            });
            $(document).ready(function () { 
                alert("hello lnj2");
            });
           //都弹出

1.原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的  
2.jQuery中编写多个入口函数,后面的不会覆盖前面的

### 4、jQuery的入口函数其他写法 ###

// 1.第一种写法
            $(document).ready(function () { 
                // alert("hello lnj");
            });
    
            // 2.第二种写法
            jQuery(document).ready(function () { 
                // alert("hello lnj");
            });
    
            // 3.第三种写法(推荐)
            $(function () { 
                // alert("hello lnj");
            });
    
            // 4.第四种写法
            jQuery(function () { 
                alert("hello lnj");
            });

### 5、jQuery冲突问题 ###