JQuery

最新推荐文章于 2023-07-07 14:28:52 发布

别问，问就是菜鸡

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量163

点赞数

分类专栏： js 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_48637533/article/details/126536515

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

什么是jQuery

是一个高效精简且功能丰富的js工具库
jQuery官方中文文档

jQuery 引入：

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

jQuery 入门函数

//等待文档加载完成后再执行代码，类似js的window.οnlοad= funtion()
 $(document).ready(function(){
      
    })
  //或者
  $(function () {
    })
 // 或者
   jQuery(document).ready(function () {

    })
// 或者
     jQuery(function () {
        alert('hello jQuery')
      })

jQuery 的入口函数中，入口函数会依次执行
js的入口函数有且只有一个，只会执行依次

jQuery 的 $

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

$的参数

$(选择器)

通过选择器选择到符合条件的Element元素，将其保存到jQuery对象

$(html片段)

将html片段转换成Element元素，然后再封装成一个jQuery对象 如： $('<p>123</p>')

$(Element元素)

将Element元素转换成一个jQuery对象  如 $(this)

$(匿名函数)

匿名函数在文档加载完毕以后执行 如 $(function(){})

jQuery 事件

绑定事件格式

 	 节点.click(function(){})
 	 节点.on(事件类型，[传参(可选)], 函数)  --- 》调用event.data 可以看见传参
 	 节点.bind(事件类型，[参数(可选)],函数)
 	 节点.one(事件类型，参数，function)  事件只执行一次，执行之后就会直接解绑，不需要手动解绑

解绑事件

	on 绑定的事件 节点.off('事件类型')
	bind 绑定事件  节点.unbind(事件类型) 不写事件类型，群不解绑bind绑定的事件

模拟事件

即打开即调用这个事件类型
节点.trigger(事件类型)

事件代理

 // 第一个参数 事件类型 第二个参数(可选，不写就代理全部子元素) 将要代理谁 第三个参数(可选) 传递给事件内部的参数 第四个参数 事件处理程序
// $('body').on('click', function (event) {
//   console.log(event);
// })
在某些元素是动态生成的时候，我们是无法直接为它绑定事件的，
那么就需要用到我们的事件代理来绑定。

DOM操作

获取DOM

格式 ：
	var d1  = $('div:first/last')  : 选择第一个/最后一个 div
	var d2 = $('#id') ; 选择id
	var d3 = $(.classname) 选择class
	属性选择 $((('input[type=[''text'']'))

获取各种值

输入框  input.val()
button.html() / button.innerHTML

添加标签

格式
 $('<p>123</p>').appendTo('div') :添加再div里面添加一个p标签
 * append() - 在被选元素的结尾插入内容（仍然在该元素的内部）
 	$('div').append('<p>123</p>')	
* prepend() - 在被选元素的开头插入内容
* after() - 在被选元素之后插入内容
* before() - 在被选元素之前插入内容
* clone([deep]) - 克隆节点,参数deep深克隆，不写参数浅克隆

设置/修改属性

语法：
	节点.attr('属性名'，属性值)：如果参数为一个则是获取对应属性的属性值，两个参数就是修改属性值
	删除属性：removeAttr('属性名')

添加/删除/切换类名

语法：
	节点.addClass('类名')  --> 添加类名
	节点.removeClass('类名')  --> 删除类名
	节点.toggleClass('类名')  ----> 切换类名，当类名存在就删除，否则就添加

设置样式

格式：
	修改单个属性：节点.css('属性','属性值')；
	修改多个属性 ： 
	节点.css({
		fontSize:'18px',
		backgroundColor:'red'
	})

获取内容

语法：
	节点.html()  ---> 会获取标签以及注释等所有的，是对js的innerHTML的封装 
	节点.text()  ---> 会获取文本
	节点.val() ---> 获取输入框的内容

核心函数与核心对象

$()

jq的实例是 $() ,

静态方法

$.each(obj,function(index,item){})

遍历数组以及对象,obj为要遍历的数组以及对象，如果遍历的是对象，那么index就是key值，item为值

$ .map(数组，function(item){})

$.param(数组)将表单元素数组或者对象序列化。

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

parseJSON() 解析json字符串转换为js对象/数组

merge() 合并两个数组

格式：
	$.merge(数组1，数组2)
	返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项，请使用$.unique()

type() 检测obj的数据类型

格式：
jQuery.type(function(){}) === "function"

isEmptyObject 测试对象是否是空对象

格式：
	jQuery.isEmptyObject({})

isPlainObject() 测试对象是否是纯粹的对象

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

AJAX

$.ajax({
	url:'请求的接口地址',
	method:'请求的方式',
	data:{请求的数据放这},
	//headers:'请求的数据格式'
	headers:{
		'Content-Type':'application/json'
	}
	//请求成功的操作
	success(res){
		//res 为请求回来的数据
	},
	error(err){
	//请求失败的操作放这里
	}
	
})

快捷方法

get 方法

格式：
$.get(url,obj,funtion(res){})
参数说明：请求的地址，请求的参数(可选)，成功请求的回调函数

post 方法

格式：
$.post(url,obj, function)
默认的传递的参数是一个表单格式，其他的不行，如果需要传递其他格式需要自己封装
一下封装一个json格式的post请求
jQuery['postJSON'] = function(url,data,callback){
	return $.ajax({
			url:url,
			method:'post',
			data:JSON.stringify(data),
			headers:{
				'Content-Type':'application/json'
			}
			success:callback
			
})	
}

动画

显示与隐藏 .hide() .show()

切换显示与隐藏 toggle()

$('div').toggle() //切换显示与隐藏

淡入淡出 fadeIn(毫秒)/fadeout(毫秒)

切换淡入淡出 fadeToggle()

滑出与滑入 slideUp() / slideDown()

切换滑入滑出 slideToggle()