有关jquery的知识点

恬淡如雪

已于 2022-08-30 15:49:39 修改

阅读量107

点赞数

文章标签： javascript 前端 jquery

于 2022-08-30 15:16:28 首次发布

本文链接：https://blog.csdn.net/qq_48639265/article/details/126596481

版权

jQuery函数

通过"jQuery"和"$"来调用jQuery函数；
$(选择器) 通过选择器选择到符合条件的Element元素，将其保存到jQuery对象；
$(html片段) 将html片段转换成Element元素，然后再封装成一个jQuery对象；
$(Element元素) 将Element元素转换成一个jQuery对象；
$(匿名函数) 匿名函数在文档加载完毕以后执行。

jquery和js入口函数的区别

window.onload = function () {
			var img = document.getElementsByTagName('img')[0];
			// js使用window方法获取标签的所有属性
			console.log(window.getComputedStyle(img).width);
			console.log(window.getComputedStyle(img).height);
		}
		// 等文档加载完毕执行代码 等同window.onload
		$(function () {
			var img = $('img:first');
			console.log(img.width());
			console.log(img.height());
		})
		// 原生js的入口函数  只会执行一个 后面的会覆盖掉前面的
		window.onload = function () {
			alert('我是入口函数1')
		}
		window.onload = function () {
			alert('我是入口函数2')
		}
			// jquery的入口函数 入口函数依次执行
		$(function () {
			alert('我是入口函数1')
		});
		$(function () {
			alert('我是入口函数2')
		});
		// 2.区别 jquery入口函数四种写法
		$(document).ready(function () {
			alert('我是入口函数1')
		});
		jQuery(document).ready(function () {
			alert('我是入口函数2')
		});
		$(function () {
			alert("我是入口函数3,推荐写法")
		})
		jQuery(function () {
			alert("我是入口函数4")
		})

jquery对象

jQuery对象是类数组对象，jQuery的方法都是对类数组中的元素的批量操作。

注意：jQuery对象可以调用jQuery.prototype中声明的方法，普通的Element元素则不能调用。在使用jquery的时候，拿到一个对象务必要搞明白该对象是Element元素还是jQuery实例。

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="./1-jquery.js"></script>
	<script>
		window.onload = function () {
			var button = document.getElementsByTagName("button")[0];
			var username = document.getElementsByTagName('input')[0];
			button.onclick = function () {
				alert(username.value)
			}
		}
		// jquery实例 $() jQuery.prototype
		$(function () {
			var button = $('button:last');
			// jquery绑定事件 
			button.click(function () {
				alert($('input:first').val())
			})
		})
	</script>
</head>

<body>
	用户名: <input type="text">
	<button>确定(js)</button>
	<button>确定(jquery)</button>
</body>

</html>

jquery核心函数和核心对象

1.jQuery核心函数作为一般函数调用的时候:$(param)

（1）参数为函数: 当DOM加载完成后，执行此回调函数

$(function(){})

（2）参数为选择器字符串:查找所有匹配的标签，并将它们封装成jQuery对象

$('div:last')

（3）参数为DOM对象:将DOM对象封装成jQuery对象

$(this)

4-参数为HTML标签字符串(很少用):创建标签对象并封装成jQuery对象

$('<p>我是一个p标签</p>')

2.jQuery静态方法，$作为对象使用:$.xxx()

数组静态方法

Array.isArray();

from();

Array.of();

（1）$.each() 隐式遍历数组

（2）$.trim 取出两端的空格

<script>
		$(function () {
			var btn=$('button:first');
			btn.click(function(){
				console.log(this,$(this)); //<button> Object { 0: button, length: 1 }
				console.log(this.innerHTML);  //点击我
				console.log($(this).html());  //点击我
				$('<input type="text">').appendTo('body');
			})
			var obj = {
				name: "zhangsan",
				age: 12
			}
			var arr = [1, 2, 3, 4, 5]
			// 参数：目标对象/数组 回调函数 
			$.each(obj, function (index, item) {
				console.log(index, item); //name zhangsan age 12
			});
			var str = '    hello world   ';
			console.log(str); //    hello world   
			console.log(str.trim());//hello world
			console.log($.trim(str));//hello world
		})
	</script>
</head>

<body>
	<button>点击我</button>
	<input type="text">
	<input type="text">
</body>

事件机制

<script>
		$(function () {
			var btn = $('button:first');
			// 绑定事件 on(事件类型, 传参（可选）, 事件处理程序)
			btn.on('click', [1, 2, 3], function (event) {
				console.log(event, '事件对象'); //事件对象
				console.log(event.data); //Array(3) [ 1, 2, 3 ]
				$(event.target).html('不想被点');
			});
			// 模拟点击事件
			btn.trigger('click');
			// 解绑事件
			btn.off('click');
			// 绑定事件方法 bind绑定 参数(事件类型,参数(可选),事件处理程序)
			btn.bind('click', [1, 2, 3], function (e) {
				console.log(e, '事件对象');
			});
			btn.unbind();//无参代表全部解绑事件
			// one 绑定事件
			btn.one('click', function (e) {
				console.log('我被绑定了', e);
			});
			// 事件代理 on(事件类型,代理对象,事件处理程序)
			$('body').on('click', 'button', function () {
				$('button').html('我被点击了')
			})
			// 事件类型
			$('button').dblclick(function () {
				console.log('我被双击了');
			});
			$('button').mouseenter(function () {
				$(this).css({
					backgroundColor: 'red'
				})
			});
			$('button').mouseleave(function () {
				$(this).css({
					backgroundColor: 'blue'
				})
			})
			$('input[type="text"]').focus(function () {
				$(this).css({
					backgroundColor: 'red'
				})
			})
			$('input[type="text"]').blur(function () {
				$(this).css({
					backgroundColor: 'blue'
				})
			})
		})
	</script>
</head>

<body>
	<input type="text">
	<button>点击我</button>
	<button>点击我</button>
	<button>点击我</button>
	<button>点击我</button>
	<button>点击我</button>
	<button>点击我</button>
</body>

DOM操作

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

<style>
		.active{
			background-color: red;
		}
		.two{
			font-size: 28px;
		}
	</style>
	<script>
		$(function(){
			// append插入内容到元素尾部
			$('div:first').append('<p>我是一个p标签</p>');
			// 创建一个div添加到body尾部
			$('<div>我是块级元素</div>').appendTo('body');
			// 克隆节点 针对事件 浅克隆不克隆事件 深克隆克隆事件
			$('button:first').click(function(){
				console.log('我被点击了');
			})
			// clone方法无参 浅克隆 有参true 深克隆
			$('button:first').clone(true).appendTo('body');
			// 获取div的id属性值
			// attr:参数1 获取该属性名对应的属性值
			// 参数:2 给当前dom元素设置/修改属性
			console.log($('div:first').attr('id','newId'));
			// removeAttr 删除属性
			$('div:first').removeAttr('title');

			// 添加类名
			$('div:first').addClass('active');
			// 删除类名 删除对应的样式
			$('div:first').removeClass('two');
			// 切换类名 --对应的是删除或者是添加类名 
			$('div:first').click(function(){
				$(this).toggleClass('active')
			});


			// 获取body标签内部的内容
			console.log($('body').html());//innerHTML 识别代码片段
			console.log($('body').text());//innerText
		})
	</script>
</head>
<body>
	<button>确定</button>
	<div id="one" class="two" title="我是一个div">我是一个div</div>
</body>

jquery静态方法

静态方法属于定义在jQuery函数上的方法，通过jQuery或者$直接调用的方法

数组及对象操作：each、map、toArray、merge
测试操作：type、isEmptyObject、isPlainObject、isNumberic
字符串操作：param、trim

<script>
		$(function () {
			var obj = {
				name: 'zhangsan',
				age: 12
			}
			$.each(obj, function (key, value) {
				console.log(key, value); //name zhangsan
			});
			var arr = [1, 2, 3];
			$.each(arr, function (index, item) {
				console.log(index, item); //0 1 1 2 2 3
			});
			// map 映射 参数:要操作的数组 回调函数
			var res = $.map(arr, function (item, index) {
				return item + 4
			});
			console.log(res); //Array(3) [ 5, 6, 7 ]
			// toArray 将类数组转成数组--实例方法
			console.log($('div').toArray()); //Array(3) [ div, div, div ]
			// 合并数组 merge 
			console.log($.merge([1, 2, 3], [4, 5, 6])); //Array(6) [ 1, 2, 3, 4, 5, 6 ]
			// 将对象转换成查询字符串
			var obj = {
				page: 1,
				pageSize: 10
			}
			console.log($.param(obj)); //page=1&pageSize=10
			var obj1 = '{"name":"zhangsan","age":12}';
			console.log($.parseJSON(obj1)); //Object { name: "zhangsan", age: 12 }
		})
	</script>
</head>

<body>
	<div>我是一个div</div>
	<div>我是一个div</div>
	<div>我是一个div</div>
</body>