jQuery-基础

jQuery

jQuery是一个Javascript工具库，是对于ECMAScript、dom、bom的一个浅封装，让用户更方便操作。

1 jQuery入门

1 .1 引入jQuery

（1）通过本地文件引入

js文件可从https://jquery.com/download/下载

<script src="./jquery-3.6.0.js"></script>

（2）通过引入CDN的链接引入

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

1.2 jQuery函数

通过"jQuery"和"$"来调用jQuery函数

$(匿名函数)
匿名函数在文档加载完毕以后执行
$(function(){
    //js入口相当于原生js的window.οnlοad=function(){}
})

$(选择器)
通过选择器选择到符合条件的Element元素，将其转为jQuery对象

$(html片段)
将html片段转换成Element元素，然后再封装成一个jQuery对象

jQuery和原生js的区别：

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

• 原生JS如果编写了多个入口函数，后面编写的会覆盖前面编写的

  jQuery如果编写了多个入口函数，后面的不会覆盖前面的

1.3 jQuery对象

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

$(this)

$('.box').click(function(){
    // this获取到当前element元素
    console.log(this);  // <div class="box">123546</div>
    // $(this)获取到该jquery实例
    console.log($(this).html()); // 123456
})

$.each() 遍历

var arr = [1,2,3,4,5,6]
// $.each() 隐式遍历数组
$.each(arr, function (index, item) {
  console.log(index, item);
})

$.trim()

去除字符串两端的空白字符

var str = '     my jQuery    '
console.log('----' + $.trim(str) + '-------');

2 jQuery选择器

jQuery 中所有选择器都以美元符号开头：$()

jQuery的选择器与CSS3中的选择器几乎完全一致：

$("p")     选取所有p元素
$("#test") 选取id为test的元素
$(".test") 选取所有class为test的元素
$("*")	   选取所有元素	
$(this)	   选取当前 HTML 元素

3 jQuery事件

事件处理：

**on() **

在选择元素上绑定一个或多个事件的事件处理函数。

off()

在选择元素上移除一个或多个事件的事件处理函数

one()

绑定一个一次性的事件处理函数

function muFun(){
    console.log($(this).text());
}
$('button').on('click',muFun) // 绑定事件
$('button').off('click',muFun) // 解绑事件
$('button').one('click',muFun) // 触发一次事件

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。

dbclick()

当双击元素时，会发生dbclick事件

mouseenter()

当鼠标指针穿过元素时，会发生mouseenter事件

mouseleave()

当鼠标指针离开元素时，会发生mouseleave事件

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件

mouseup()

当元素上松开鼠标按钮时，会发生mouseup事件

hover()

hover()方法用于模拟光标悬停事件

当鼠标移动到元素上时，会触发指定当第一个函数（mouseenter）；当鼠标移出这个元素时，会触发指定当第二个函数（mouseleave）

blur()

当元素失去焦点时，发生blur事件

keydown()

键盘事件：按键按下事件

keyup()

键盘事件：按键抬起事件

4 jQueryDOM操作

插入方法：append、appendTo、prepend、prependTo、after、before、insertBefore、insertAfter
包裹方法：wrap、unwrap、wrapAll、wrapInner、
替换方法：replaceWith、replaceAll
移除方法：empty、remove、detach
克隆方法：clone

插入方法：

//1. append( ) 向匹配的元素内部追加内容 （父子关系）
$('body').append('<div>five</div>')

//2. appendTo( ) 将内容追加到指定的元素中 （父子关系）
$('<div>four</div>').appendTo('body')

//3. prepend() 向匹配的元素内部最前面的地方插入内容 （父子关系）
$(".box").prepend("<div>水果</div>");

//4. prepend() 将内容插入到指定的元素内部的最前面 （父子关系）
$("<div>水果</div>").prependTo(".box");

//5.after()方法在每一个匹配的元素后面插入内容 （兄弟关系）
$(".box").after("<span>这是个段落</span>");

//6.before()方法在每一个匹配的元素之前插入内容 （兄弟关系）
$(".box").before("<span>这是个段落</span>");

//7.insertBefore() 将内容插入到每一个匹配的元素之前 （兄弟关系）
$("<span>这是个段落</span>").insertBefore(".box");

//8.insertAfter() 将内容插入到每一个匹配的元素之后 （兄弟关系）
$("<span>这是个段落</span>").insertAfter(".box");

包裹方法：

a.wrap(b) //用b将a进行包裹
a.wrapAll(b) //将b所匹配到的节点统一到一起，使用一个a来包裹，因此a只包裹了一次
a.wrapInner(b) //用b将a内部的内容进行包裹

替换方法：

//replaceWith 使用后面的元素替换前面的元素
$(oldelement).replaceWith(newelement);

//replaceAll  使用前面的元素替换后面的元素
$(newelement).repalceAll(oldelement)

移除方法：

$(element).empty() 清空节点，它能清空元素中的所有子节点  
$(element).remove() 删除所有匹配的元素              

克隆方法：

$(element).clone() 复制节点

clone(true/false)  
false代表只复制元素（浅复制），true代表既复制元素也复制元素的事件（深复制）

属性操作：

attr()

attr()方法能够获取元素属性，也能能够设置元素属性

//获取title属性的属性值
console.log($('.box1').attr('title'));
//设置title属性的属性值为'你好'
$('.box1').attr('title','你好')

removeAttr() 移除属性

$('.box1').removeAttr('title')

样式操作：

addClass() //对目标元素添加相应的样式
removeClass() //移除目标元素的指定样式
toggleClass() //切换目标元素的样式
hasClass() //判断元素是否使用了样式  $(element).hasClass(class);

获取内容：

html() //获取HTML
text() //获取文本
val()  //获取值

5 jQuery静态方法

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

数组及对象操作：each、map、toArray

测试操作：type、isEmptyObject、isPlainObject、isNumberic

字符串操作：param、trim

5.1 数组及对象操作

each

遍历数组或者对象 第一个参数 要遍历的数组或对象 第二个参数 处理函数

//遍历对象
var obj={
	name:"zhangsan",
	age:12
}
$.each(obj,function(index,item){
	console.log(index,item)
})
//遍历数组
var arr=[10,20,30,40,50]
$.each(arr,function(index,item){
	console.log(index,item)
})

toArray

将类数组对象转换为数组

把jQuery集合中所有DOM元素恢复成一个数组

console.log($('li').toArray());

map()

将一个数组中的元素转换到另一个数组中

var arr=$.map([0,1,2],function(item){
	return item+4
})
console.log(arr)

merge()

合并两个数组,返回的结果会修改第一个数组的内容

var arr=[0,1,2]
console.log($.merge( arr, [2,3,4] ));  //[0,1,2,3,4]
console.log(arr);  //[0,1,2,3,4]

5.2 测试操作

type()

用于检测obj的数据类型

isEmptyObject()
测试对象是否是空对象（不包含任何属性）,这个方法既检测对象本身的属性，也检测从原型继承的属性

isPlainObject()
测试对象是否是纯粹的对象（通过 “{}” 或者 “new Object” 创建的）

isNumberic()
确定它的参数是否是一个数字

$.isArray(obj)

判断是否是数组

$.isFunction(obj)

判断是否是函数

5.3 字符串操作

param()

将表单元素数组或者对象序列化。

trim()
去掉字符串起始和结尾的空格,多用于用户数据的清洗