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

1、jQuery是什么?

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

2、为什么使用jQuery

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

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

		<img src="https://img.alicdn.com/tfs/TB1P_MofwmTBuNjy1XbXXaMrVXa-190-140.gif" alt="">

实例代码如下:

		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冲突问题

	<script src="js/jquery-1.12.4.js"></script>
    <script src="js/test.js"></script>
    <script>
        // 1.释放$的使用权
        // 注意点: 释放操作必须在编写其它jQuery代码之前编写
        //         释放之后就不能再使用$,改为使用jQuery
        // jQuery原理.noConflict();
        // 2.自定义一个访问符号

		 jQuery.noConflict();
         jQuery(function () {
            alert("hello lnj");
        });
	或者
        var nj = jQuery.noConflict();
        nj(function () {
            alert("hello lnj");
        });
    </script>
posted @ 2022-04-02 09:48  coderwcb  阅读(33)  评论(0编辑  收藏  举报