jQuery2--入口函数和核心方法

jiaody111

于 2019-07-22 23:37:20 发布

阅读量152

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_42139212/article/details/96885269

版权

jQuery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Jquery = JS + Query (查询）是JS的一个轻量级的库

引入jQuery：

<script src='../jQuery/jquery-1.12.4.js'></script>

jQuery的固定写法：

$ 等价于 jQuery

	<script>
			$(document).ready(function(){
				console.log('hello world')
			})
			//原生JS的固定写法
			window.onload = function(){
			}
			//jQuery的固定写法
			$(document).ready(function(){})
		</script>

原生JS和jQuery入口函数的区别1：

		<script>
			/*
			* 原生JS和jQuery入口函数的区别：
			* 1. 如果编写多个入口函数，原生JS中，后边的会覆盖前边的入口函数
			*    但是jQuery中，后面的不会覆盖前面的
			*/ 
		   $(document).ready(function(){
			   console.log('hello jQuery1')
		   })
		   $(document).ready(function(){
			   console.log('hello jQuery2')
		   })
		   //输出是 hello jQuery1 和 hello jQuery2
		   window.onload = function(){
			   console.log('hello js1')
		   }
		   window.onload = function(){
			   console.log('hello js2')
		   }
		   //输出是 hello js2
		</script>

原生JS和jQuery入口函数的区别2：

<script>
			/*
			* 区别2：
			*  原生JS和jQuery的入口函数都能获取到DOM元素
			*  加载顺序：
			*  原生JS的入口函数会等到所有元素加载完毕，而且src也加载完毕才会执行（等到图片加载完毕后才执行）
			*  jQuery的入口函数，在DOMTree解析完毕就执行（浏览器知道DOM指的是什么，但不知道具体是什么？？？），不会等到DOM元素解析完毕（不等图片加载完就执行）。
			*/ 
			window.onload = function(){
				var img = document.getElementsByTagName('img')[0]
				console.log(img)
				console.log(getComputedStyle(img).width)
				 //能获取到具体元素的宽度			
				 }
			$(document).ready(function(){
				var $img = $('images')
				console.log($img)
				console.log($img.width()) //获取不到元素的宽度
			})
		</script>

入口函数的四种写法：

    <script>
        // 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");
        });
    </script>

解决冲突问题:

<script>
    // 1.释放$的使用权 ：jQuery.noConflict();
    //释放操作必须在编写其它jQuery代码之前编写，释放之后就不能再使用$,改为使用jQuery ：
    // 2.自定义一个访问符号
    var nj = jQuery.noConflict(); //释放 $ 的使用权
    nj(function () {
        alert("hello lnj");
    });
</script>

核心函数的参数类型：

引入jQuery库后, 直接使用$即可

当函数用: $(xxx)

参数为函数 : 当DOM加载完成后，执行此回调函数
参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
参数为DOM对象: 将dom对象封装成jQuery对象
参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象

当对象用: $.xxx()

$.each() : 隐式遍历数组
$.trim() : 去除两端的空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <script>
        /*
         需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框
         需求2. 遍历输出数组中所有元素值
         需求3. 去掉"  my atguigu  "两端的空格
         */
        $(function(){
            var $btn = $('#btn');
            /*需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框*/
            $btn.click(function () {
                //this指向触发事件的DOM元素
                //$(this)指向触发事件的jQuery元素
                console.log($btn.html()+'----'+this.innerHTML+'----'+$(this).html());
                $('<input type="text" name="msg3"/>').appendTo('div'); //参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
            })
            /*需求2. 遍历输出数组中所有元素值*/
            var arr=[1,23,1];
            $.each(arr,function (index,item) {
                console.log(index+'---'+item);
            })
            /*需求3. 去除"  my atguigu  "两端的空格*/
            var str="  my atguigu  ";
            console.log('===='+$.trim(str)+'====');
        })
    </script>
</head>
<body>
<div>
    <button id="btn">测试</button>
    <br/>
    <input type="text" name="msg1"/><br/>
    <input type="text" name="msg2"/><br/>
</div>
</body>
</html>

在这里插入图片描述

trim,isFunction,isArray,isWindow方法

		<script>
			var str = '    aaaa    ' //字符串
			var arr = [1, 2, 3, 4, 5] //数组
			var falseArr = {
				length: 3,
				0: 1,
				1: 2,
				2: 3
			} //伪数组
			var obj = {
				name: "j",
				age: "23"
			} //对象
			var func = function() {} //函数
			var win = window //window对象
			/*
			 * $.trim() 去除字符串首尾两端的空格
			 *  返回去除空格后的新字符串 不会改变原字符串
			 */
			var res1 = $.trim(str)
			console.log('---' + res1 + '---') //---aaaa---
			console.log('---' + str + '---') //---    aaaa    ---
			/*
			 * $.isArray() 判断传入的对象是否是真数组 返回true/false
			 */
			var res2 = $.isArray(arr)
			console.log(res2) //true
			var res3 = $.isArray(falseArr)
			console.log(res3) //false
			/*
			 * $.isWindow() 判断传入的对象是否是window对象 返回true/false
			 */
			var res4 = $.isWindow(win)
			console.log(res4) //true
			/*
			 * $.isFunction() 判断传入的对象是否是函数 返回true/false
			 * jQuery框架本质上是一个函数
			 */
			var res5 = $.isFunction(func)
			console.log(res5) //true
			var res = $.isFunction(jQuery)
			console.log(res) //true

holdReady方法：暂定ready执行

<head>
    <meta charset="UTF-8">
    <title>12-静态方法holdReady方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        // $.holdReady(true); 作用: 暂停ready执行
        $.holdReady(true);
        $(document).ready(function () {
            alert("ready");
        });
    </script>
</head>
<body>
<button>恢复ready事件</button>
<script>
    var btn = document.getElementsByTagName("button")[0];
    btn.onclick = function () {
        $.holdReady(false);
    }
</script>

json和js转换

    <script>
        $(function () {
            //$.parseJSON(jsonStr) : 解析json字符串转换为js对象/数组
            var jsonStr = '{"name":"jiaody","school":"bupt"}'
            console.log($.parseJSON(jsonStr));//{name: "jiaody", school: "bupt"}
            var jsonArr = '[{"name":"zs","age":1},{"name":"ls","age":2}]'
            console.log($.parseJSON(jsonArr));//(2) [{age: 1,name: "zs"}, {age: 1,name: "zs"}]
        })
        /*
        JSON.parse(jsonString)   json字符串--->js对象/数组
        JSON.stringify(jsObj/jsArr)  js对象/数组--->json字符串
        */
    </script>

jiaody111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery2--入口函数和核心方法

Jquery = JS + Query (查询）是JS的一个轻量级的库引入jQuery：<script src='../jQuery/jquery-1.12.4.js'></script>jQuery的固定写法：$ 等价于 jQuery <script> $(document).ready(function(){ console.lo...
复制链接

扫一扫