1. jQuery入门
1.1jQuery介绍
jQuery是一个工具库,是对于ECMAScript、DOM、BOM的一个浅封装
功能:
- 使用css选择器进行元素查询
- 事件机制
- DOM操作
- 属性操作
- 工具方法
- Ajax
1.2.jQuery安装
网页中jquery的引入有两种方式:本地下载引入、CDN载入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.本地下载引入 -->
<script src="./js/jquery-3.6.0.js"></script>
<!-- 2.CDN载入 进入bootcdn网页复制最新版jquery链接-->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> -->
</head>
<body>
<script>
// jQuery $
console.log(jQuery);
console.log($);
console.log(jQuery===$);
</script>
</body>
</html>
1.3.jQuery函数
$(匿名函数) 匿名函数在文档加载完毕之后执行
$(选择器) 选中符合条件的element元素,转换为jQuery对象
$(element) 将element元素转换为jQuery对象
$(dom) 将dom节点转换为jQuery this $(this)
jQuery和原生js的区别:
- 原生js和jQuery入口函数加载模式不同,原生js会等到DOM元素加载完毕,图片加载完毕才会执行;jQuery会等到DOM元素加载完毕但不会等图片加载完毕就执行
原生js的入口函数是:window.onload(function(){})
jQuery的入口函数是: $(decument).ready(function(){})
在编写了多个入口函数的情况下,原生js后面编写的会覆盖前面的;jQuery后面编写的不会覆盖前面的,会全部按顺序执行
1.4 jQuery对象
jQuery对象是类数组对象,即它的方法都是对类数组中元素的批量操作
<script>
$(function(){
// 1.说明$()返回的是一个Object对象
console.log($);
console.log($());
console.log($() instanceof Object);//true
$('div').click(function(){
//this指向的是element对象
console.log(this)
})
})
</script>
-
$.each(类数组,function(){}) 或 $(element).each()
遍历jQuery对象(遍历类数组对象)
实例:
<script>
$(function(){
var arr = [1,2,3,4,5]
//隐式遍历数组 $.each()
$.each(arr,function(index,item){
console.log(index,item)
})
//遍历所有的div标签且修改css样式
$('div').each(function(){
$(this).css('color','red')
})
})
</script>
<body>
<div> head </div>
<div class="content"> content </div>
<div id="foot"> foot </div>
</body>
- $.trim() 去点字符串起始和结尾的空格字符
var str=' hello jQuery ';
console.log($.trim(srt));//"hello jQuery"
2.jQuery选择器
- 基本选择器
$(‘div’) 标签选择器
$(’#div’) id选择器
$(’.div’) 类选择器
$(‘div[]’) 通过数组下标选择页面中div标签选择器
- 属性选择器
$(’[href]’) 选取所有带href属性的元素
$(’[href=’#‘]’) 选取所有带href值等于’#‘的元素
- css选择器
$('p').css("background-color","red") //修改单个属性
//修改多个属性
$('p').css({
"background-color":"red",
"color":"blue"
})
3.jQuery事件
3.1事件的基本使用
<script>
$(function(){
// 1.给按钮绑定事件 通过点击按钮获取按钮的文本
// $('button').on('click',function(){
//触发后执行的代码
// console.log($(this).text());
// })
//2.给函数设置事件属性
function myfun(){
console.log($(this).text());
}
// 绑定事件
//$('button').on('click',myfun) ;
// 解绑事件
//$('button').off('click',myfun)
// 一次绑定
// $('button').one('click',myfun)
//3. 快捷绑定
// $('button').click(function(){
//触发后执行的代码
// console.log('我被点击了')
// })
//trigger 触发被选元素的指定事件类型
$('button').trigger('click')
})
</script>
</head>
<body>
<button>按钮1</button>
<button class="two">按钮2</button>
<button id="three">按钮3</button>
</body>
3.2事件类型
常用的jQuery事件快速绑定方法
-
$(document).ready() 允许在文档完全加载完成后执行函数
-
click() 当按钮点击事件被触发时会调用一个函数
-
dbclick() 当双击元素时,会发生dbclick事件
-
mouseenter() 当鼠标指针穿过元素时,会发生mouseenter事件
与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。
-
mouseleave() 当鼠标指针离开元素时,会发生mouseleave事件
-
mousedown() 当指针移动到元素上方,并按下鼠标按键时,会发生的事件
-
mouseup() 当元素上松开鼠标按钮时,会发生的事件
-
hover() 用于模拟光标悬停事件。 鼠标移动到元素上触发mouseenter函数,移出元素触发mouseleave函数
-
blur() 当元素失去焦点时,发生的事件
-
keydown() 键盘按下事件
-
keyup() 键盘抬起事件
-
等等
4.jQueryDOM操作
插入方法:
-
$(‘目标节点’).append(‘插入节点’) 添加在目标节点之前,形成父子结构
-
$(‘插入节点’).appendTo(‘目标节点’) 添加在目标节点之后,形成父子结构
-
$(‘目标节点’).before(‘插入节点’) 添加在目标节点的前面,形成兄弟结构
-
$(‘目标节点’).after(‘插入节点’) 添加在目标节点的后面,形成兄弟结构
移除方法:
- $(‘div’).empty() 删除匹配的元素集合中所有的子节点。
- $(‘div’).remove() 删除匹配的元素,匹配的元素还在jQuery的对象中,可以再次调用其元素本身,绑定事件附加数据会被删除
克隆/复制节点:
- $(‘被选元素’).clone(true/false).appendTo() 一般结合appendTo使用复制插入
当clone为false时为浅复制,只复制被选元素内容不复制事件
当clone为true时为深复制,复制被选元素内容和事件
5.属性操作
-
$(‘被选元素’).attr(‘属性’) 获取被选元素的某个属性
-
$(‘被选元素’).attr(‘属性’,‘要修改的属性值’)
-
$(‘被选元素’).removeAttr(‘被选元素中的一个属性’)
从每一个匹配的元素中删除一个属性
$(function(){
console.log($('input').attr('title'));//hello
//console.log($('input').attr('title'));//hi
$('input').removeAttr('tilte');
console.log($('input').removeAttr('tilte'))
//如果删除前属性有修改删除失败,会返回修改过后的属性值;如果属性没有修改过则会返回undefined,删除成功
})
CSS样式
- $(‘被选元素’).addclass (‘类名’) 添加类样式
- $(‘被选元素’).removeClass(‘类名’) 删除类样式
- $(‘被选元素’).toggleClass(‘类名’) 如果有该class就删除,没有就添加
内容
- html() 设置或返回所选元素的内容
- text() 设置或返回所选元素的文本内容
- val() 设置或返回表单字段的值
6.jQuery静态方法
数组及对象操作
-
$.each() 用于遍历对象和数组
不同于遍历 jQuery 对象的 $().each() 方法,此方法可用于遍历任何对象
第一个参数 要遍历数组或对象 第二个参数处理函数
// 遍历对象 var obj = { name: 'zach', age: 18, height: '1.88' } // 第一个参数 要遍历的数组或对象 第二个参数 处理函数 $.each(obj, function (key, value) { console.log(key, value); }) //遍历数组 $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
-
map() 将一个数组中的元素转换到另一个数组中
-
toArray() 把jQuery集合所有DOM元素恢复成一个数组
-
merge() 合并两个数组
返回的结果会修改第一个数组的内容
第一个数组的元素后面跟着第二个数组的元素。要去除重复项,请使用$.unique()
console.log(($.merge([1,2,3],[3,4,5])));//[1,2,3,3,4,5] console.log($.unique($.merge([1,2,3],[3,4,5])));//[1,2,3,4,5]
测试操作
type()
用于检测obj的数据类型
console.log($.type($)); //function
console.log(jQuery.type(true) === "boolean");//true
console.log(jQuery.type(3) === "number");//true
console.log(jQuery.type("test") === "string");//true
console.log(jQuery.type(function(){}) === "function");//true
console.log(jQuery.type([]) === "array");//true
isEmptyObject()
测试对象是否是空对象(不包含任何属性),这个方法既检测对象本身的属性,也检测从原型继承的属性
console.log(jQuery.isEmptyObject({})); // true
console.log(jQuery.isEmptyObject({ foo: "bar" })); //false
isPlainObject()
测试对象是否是纯粹的对象(通过 “{}” 或者 “new Object” 创建的)
console.log(jQuery.isPlainObject({})); // true
console.log(jQuery.isPlainObject("test")); // false
console.log($.isPlainObject($('body')))//false
isNumberic()
确定它的参数是否是一个数字
$.isNumeric() 方法检查它的参数是否代表一个数值。如果是这样,它返回 true。否则,它返回false。该参数可以是任何类型的
console.log($.isNumeric("-10")); // true
console.log($.isNumeric(16)); // true
console.log($.isNumeric(0xFF)); // true
console.log($.isNumeric("0xFF")); // true
console.log($.isNumeric("8e5")); // true (exponential notation string)
console.log($.isNumeric(3.1415)); // true
console.log($.isNumeric(+10)); // true
console.log($.isNumeric(0144)); // true (octal integer literal)
console.log($.isNumeric("")); // false
console.log($.isNumeric({})); // false (empty object)
console.log($.isNumeric(NaN)); // false
console.log($.isNumeric(null)); // false
console.log($.isNumeric(true)); // false
console.log($.isNumeric(Infinity)); // false
console.log($.isNumeric(undefined)); // false
注意:其他更多关于测试的操作,例如$.isArray(obj)判断是否是数组、$.isFunction(obj)判断是否是函数等,请移步[https://jquery.cuishifeng.cn/](https://jquery.cuishifeng.cn/)
6.3 字符串操作
param()
将表单元素数组或者对象序列化。
例如:
var obj={name:"张三",age:12}
var str = jQuery.param(obj);
$("#results").text(str);
trim()
去掉字符串起始和结尾的空格,多用于用户数据的清洗
例如:
console.log('--'+$.trim(" hello, how are you? ")+'--');
补充:进入网页查看更详细的字符操作https://jquery.cuishifeng.cn/