重学js--jq(4)

最新推荐文章于 2021-06-03 03:43:32 发布
最新推荐文章于 2021-06-03 03:43:32 发布
阅读量191 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43756060/article/details/106037489
版权

jq的作用

  1. HTML元素选取
  2. HTML元素操作
  3. HTML事件函数
  4. HTML DOM遍历和修改
  5. Utilities
  6. css操作
  7. js特效和动画
  8. ajax

jq引入

  1. 在head中使用script引入本地jq的js文件
  2. 引入官网jq文件

jq的书写格式

三种

// 第一种：推荐
$(document).ready(function(){
	//代码
})

// 第二种
$().ready(function(){
	//代码
})

// 第三种
$(function(){
	//代码
})

jq方法

  • css 修改样式
$('div').css({
	'background':'red',
	'border':'5px solid #000',
	'color':'#fff'
});
  • eq 代表第几个
// i表示元素的索引值
$('div').eq(i).css({})
  • html 添加标签
$('div').eq(i).css({...}).html('<p>saaaa</p>')
  • text 添加文本
$('div').eq(i).css({...}).text('haahhahah')

选择器

jq的核心

基本选择器
// id选择器
$('#fist')

//根据元素标签名选择元素，返回类数组
$('div')

// class选择器,返回类数组
$('.div')

// 通配符选择器,返回类数组
$('*')
多项选择器

$(“selector1,selector2,selectorN”)
将每一个选择器匹配到的元素合并后一起返回。
可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

// 选择两个元素，返回一个数组
$('.first,.second')
层级选择器
// 祖先后代选择
$('div ul li')

// 子选择器
$('div>ul')

// 相邻元素选择器
$('div+ul')

// 匹配相邻的后面的所有兄弟元素
$('div~ul')
属性选择器
// 属性名选择器,选取所有有class属性的元素
$('[class]')

// 属性值选择器,选取class名字等于tool的元素
$('[class=tool]')

// 选取class名字不等于tool的元素
$('[class!=tool]')

// 以指定字符开头
$('[class^=tool_]')

// 以指定字符结尾
$('[class$=tool_]')

// 包含
$('[class*=l_]')

// 多个属性选择器
$('[class][id]')

//属性选择器结合
$('[class][class*=l_]')
过滤器
// child选择器
// 找到作为父元素的第一个子标签的li元素
$('li:first-child')

// 找到作为父元素的最后一个子标签的li元素
$('li:last-child')

// 找到作为父元素的第二个子标签的li元素
$('li:nth-child(2)')
$('li:nth-last-child(2)')

// 找到作为父元素的唯一子标签的li元素
$('li:only-child')



// type系列
$('li:first-of-type')
$('li:last-of-type')
$('li:nth-of-type(1)')
$('li:nth-last-of-type(1)')
$('li:only-of-type(1)')

过滤器参数：

  1. n 匹配子元素序号，从1开始
  2. even 偶数
  3. odd 奇数
表单相关
// 找到所有的表单元素：input、textarea、select、button
$(':input')

// 找到type=text的input元素
$(':text')

// 其他的type类型
$(':password')
$(':radio')
$(':checkbox')
$(':image')
$(':reset')
$(':button')
$(':file')


// 跟表单状态相关的选择器
$(':enabled')
$(':disabled')
$(':checked')
$(':selected')
查找和过滤
// 可以找到子孙元素
$('div').find('.li')

// 只找到子类元素
$('ul').children('.li')

// 找到父类元素
$('.li').parent()

$('div').next()
$('div').prev()
$('div').eq(index)
$('div').siblings()

// 过滤
$('li').filter('.py')

事件

鼠标事件
  • click 单击
  • dbclick 双击
  • mousedown 鼠标按下
  • mouseup 鼠标放松
  • mouseenter 鼠标进入时触发
  • mouseleave 鼠标移出时触发
  • hover(移入执行的函数，移出执行的函数) 移入函数的参数可填可不填
  • mouseover 鼠标进入元素时触发（包括子元素）
  • mouseout 鼠标移出元素时触发（包括子元素）
  • mousemove 鼠标移动
  • scroll 鼠标滚轮滚动（拖动滚动条也会触发）
// 单击
$('div').click(function(){})
// 双击
$('div').dbclick(function(){})
键盘事件
  • keydown 当键盘或按钮被按下时触发
  • keyup 当键盘或按钮松开时触发
  • keypress 当键盘或按钮被按下时触发
$(document).keydown(function(event){
	console.log(event.key)
	console.log(event.keyCode)
})
其他事件
  • ready(fn) DOM载入就绪之后要执行的函数
  • resize 当调整浏览器窗口的大小时触发
  • focus 当元素获得焦点时触发
  • blur 当元素失去焦点时触发
  • change 当元素的值发生改变时触发
  • select 当textarea或文本类型的input元素中文本被选中时触发
  • submit 当提交表单时会触发
$(document).ready(function(){...})

$(window).resize(function(){})

// 提交表单
$('input[type=button]').click(function(){
	$('form').submit()
})

// 阻止表单提交
$('form').submit(function(){
	...
	return false;
})

// 提交表单时做一些我们所需要做的事情：表单验证
$('form').submit(function(){
	var inputValue=$('input[type=text]').val();
	if(inputValue!='ha'){
		return false;
	}
})
事件参数
  • event

有些事件，如mousemove和keypress,我们需要获取鼠标位置和键盘的值，
否则监听这些事件就没什么意义了。所有事件都会传入event对象作为参数，
可以从event对象上获取到更多的信息。

事件绑定与取消
  • on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件处理函数
    events: 事件
    selector： 选择器
    data： 传入的参数
    fn：执行的函数
$('a').on('keydown',function(){...})

// 改造 ，可以解决js动态生成的元素获取不到的问题
$('document').on('keydown','a',function(event){
	// 阻止冒泡
	event.stopPropagation();
})

// 一个元素绑定多个事件
$('document').on({
	mouseenter:function(event){...},
	keydown: function(event){...}
})

// 多个元素绑定多个事件
$('document').add('a').on({
	mouseenter:function(event){...},
	keydown: function(event){...}
})
  • off(events,[selector],fn) 在选择元素上移除一个或多个事件处理函数
function fn(){...}
$('document').off('click','.div',fn)
  • one(type,[data],fn) 为每一个匹配元素的特定事件（比如click）绑定一个一次性的事件处理函数
// 绑定一次事件
$('.one').click(function(){
	$(document).on('click','.div',fn)
})

jq动画

动画DOM及其CSS操作
  • 动画原理

我们只需要以固定的时间间隔，每次DOM元素的CSS样式修改一点，看起来就像动画了。

自定义动画
  • animate()
    可以实现任意动画效果，需要传递的参数是DOM元素最终的CSS状态和时间。
var div=$('.div');
// stop() 动画开始前，先停止
div.stop().animate({
	opacity:0.25,
	width:'256px',
	height:'256px'
},3000)
  • delay() 可以实现动画暂停或延迟
var div=$('.div');
div.stop()
.animate({
	width:'256px',
},1000)
.delay(3000)
.animate({
	height:'256px',
})
动画函数
  • show/hide
    直接以无参数形式调用show()和hide(),会显示和隐藏dom，但是只要传递一个时间参数，就变成了动画
var div=$('.div');
// 在3秒内逐渐消失
div.hide(3000);
  • toggle() 根据当先状态决定显示或隐藏
  • fadeIn / fadeOut 淡入 / 淡出
  • fadeToggle() 根据当先状态决定淡入或淡出
  • slideUp / slideDown 在垂直方向逐渐收缩或展开
  • slideToggle() 根据当先状态决定收缩或展开
计时器
  • setTimeout
  • clearTimeout
  • setInterval
  • clearInterval

原生Ajax

ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

Ajax的优点
  • 通过异步模式，提升了用户体验
  • 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
  • ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
Ajax的缺点
  • 不支持浏览器back按钮
  • 安全问题ajax暴露了与服务器交互的细节
  • 对搜索引擎的支持比较弱
XMLHttpRequest对象

是一种支持异步请求的技术，它是ajax的核心
作用：

  1. 可以向服务器提出请求并处理响应，而不阻塞用户
  2. 可以在页面加载以后进行页面的局部更新
如何使用Ajax

要完整实现一个ajax异步调用和局部刷新，通常需要以下几个步骤

  1. 创建XMLHttpRequest对象，也就是创建一个异步调用对象
  2. 创建一个新的HTTP请求，并指定该HTTP请求的方法、URL
  3. 设置响应HTTP请求状态变化的函数
  4. 发送HTTP请求
  5. 获取异步调用返回的数据
  6. 使用js和dom实现局部刷新
  • 第一步实现：封装通用的xhr对象，兼容各个版本
function createXHR(){
	// 判断浏览器是否将XMLHttpRequest作为本地对象实现，针对ie7,firefox、opera等
	if(type XMLHttpRequest != 'undefined'){
		return new XMLHttpRequest();
	}else if(type ActiveXObject != 'undefined'){
		// 将所有可能出现的ActiveXObject版本放在一个数组中
		var xhrArr=['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0',
					'MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0',
					'MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0']
		// 遍历创建XMLHttpRequest对象
		var len=xhrArr.length;
		var xhr=null;
		for(var i=0;i<len;i++){
			try{
				xhr=new ActiveXObject(xhrArr[i]);
				break;
			}
			catch(ex){}
		}
		return xhr;
	}else{
		throw new Error('No XHR object')
	}
}

// 简单的方式
function createXHR1(){
	if(window.XMLHttpRequest){
		return new XMLHttpRequest();
	}else{
		return new ActiveXObject('Microsoft.XMLHTTP');
	}
}
  • 第二步实现：常见HTTP请求

语法：open(method,url,async) ，它只是建立请求，而不是真正的向服务器发送请求
参数说明：

  1. method：请求类型，get或post
  2. url：文件在服务器上的位置,必须要设置的参数
  3. async: true(异步)或false(同步)

get和post的区别：与post相比，get更简单也更快，并且在大部分情况下都能使用，然而在以下情况下必须使用post：

  1. 无法使用缓存文件（更新服务器上的文件或数据库）
  2. 向服务器发送大量数据（post没有数据量限制）
  3. 发送包含未知字符的用户输入时，post比get更稳定也更可靠

同步和异步的区别：
同步：提交请求–》等待服务器处理–》处理完毕返回 这个期间客户端浏览器不能干任何事
异步：请求通过事件触发–》服务器处理（这时浏览器仍然可以做其他事情）–》处理完毕

// 执行上面封装的创建XMLHttpRequest对象的方法
var xhr=new createXHR1();
// 使用它的open方法创建http请求
xhr.open('get','http://www.baidu.com',true)
  • 第三步：设置响应http请求状态变化的函数
// 执行上面封装的创建XMLHttpRequest对象的方法
var xhr=new createXHR1();
// 响应XMLHttpRequest对象状态变化的函数，onreadystatechange在readyState属性发生改变时触发
xhr.onreadystatechange=function(){
	// 异步调用成功，响应内容解析完成，可以在客户端调用
	if(xhr.readyState === 4){
		if((xhr.status >= 200 && xhr.status < 300) || xhr.status===304){
			// 获得服务器返回的数据
		}	
	}
}
// 使用它的open方法创建http请求
xhr.open('get','http://www.baidu.com',true)
  • 第四步：发送请求

语法：send(string)
功能：将请求发送到服务器

// 执行上面封装的创建XMLHttpRequest对象的方法
var xhr=new createXHR1();
// 响应XMLHttpRequest对象状态变化的函数，onreadystatechange在readyState属性发生改变时触发
xhr.onreadystatechange=function(){
	// 异步调用成功，响应内容解析完成，可以在客户端调用
	if(xhr.readyState === 4){
		if((xhr.status >= 200 && xhr.status < 300) || xhr.status===304){
			// 获得服务器返回的数据
		}	
	}
}
// 使用它的open方法创建http请求
xhr.open('get','http://www.baidu.com',true)
// 发送请求
// get请求
xhr.send(null)

// post请求传递参数和设置请求头
// xhr.send({user:'zhangsan',id:6});
// xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
  • 第五步：获取请求返回的数据
    在收到响应后相应数据会填充到XHR对象的属性，有四个相关属性会被填充：
  1. responseText : 从服务器进程返回数据的字符串形式
  2. responseXML : 从服务器进程返回的DOM兼容的文档数据对象
  3. status : 从服务器返回的数字代码，如404未找到和200已就绪
  4. status Text : 伴随状态码的字符串信息
// 执行上面封装的创建XMLHttpRequest对象的方法
var xhr=new createXHR1();
// 响应XMLHttpRequest对象状态变化的函数，onreadystatechange在readyState属性发生改变时触发
xhr.onreadystatechange=function(){
	// 异步调用成功，响应内容解析完成，可以在客户端调用
	if(xhr.readyState === 4){
		if((xhr.status >= 200 && xhr.status < 300) || xhr.status===304){
			// 获得服务器返回的数据
			console.log(xhr.responseText)
		}	
	}
}
// 使用它的open方法创建http请求
xhr.open('get','http://www.baidu.com',true)
// 发送请求
// get请求
xhr.send(null)
  • 第六步：渲染dom
// 执行上面封装的创建XMLHttpRequest对象的方法
var xhr=new createXHR1();
var data=null;
// 响应XMLHttpRequest对象状态变化的函数，onreadystatechange在readyState属性发生改变时触发
xhr.onreadystatechange=function(){
	// 异步调用成功，响应内容解析完成，可以在客户端调用
	if(xhr.readyState === 4){
		if((xhr.status >= 200 && xhr.status < 300) || xhr.status===304){
			// 获得服务器返回的数据
			console.log(xhr.responseText)
			// 将字符串转换成json格式的数据
			data = eval('(' + xhr.responseText + ')');
		}	
	}
}
// 使用它的open方法创建http请求
xhr.open('get','http://www.baidu.com',true)
// 发送请求
// get请求
xhr.send(null)

// 渲染dom
function renderDom(){
	
}
JSON对象
  • parse()

语法：JSON.parse()
功能：用于将JSON字符串转化成对象

  • stringify()

语法：JSON.stringify()
功能：用于将一个值转为字符串，该字符串应该符合JSON格式，并且可以被JSON.parse()方法还原

jq的ajax方法

  • $.ajax()
  • $.get()
  • $.post()
  • $.getJson()
$.ajax({
	url:'http://www.baidu.com', //请求地址
	type:'get',                 // 请求方法
	async: true,               // 同步异步
	dataType:'json',           // 返回的数据的格式
	success: function(data){ // 请求成功执行的函数
		console.log(data)
	}
})

关于跨域

  • 同源策略
    所谓同源是指：域名、协议、端口均相同
  • 跨域：是指从一个域名的网页去请求另一个域名的资源，严格一点的定义是：只要协议、域名、端口有任何一个的不同，就被当作是跨域
解决跨域的方法
  • 跨域资源共享（CORS）
  • 使用JSONP（常用）
  • 修改document.domain
  • 使用window.name
JSONP
  • 什么是JSONP

JSONP是JSON with Padding(填充式json)的简写，是应用JSON的一种新方法，也是一种跨域解决方案。

  • JSONP的组成

JSONP由两部分组成：回调函数和数据。
回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的json数据

  • JSONP的原理

直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性实现的。

  • 封装JSONP
在这里插入代码片
weixin_43756060
关注
专栏目录
jQuery——(笔记)
qq_49066502的博客
05-25 649
该笔记是基于黑马程序员jQuery书写的
通过eq（i）精确定位遍历的元素中的某个元素的值
weixin_43069201的博客
01-20 1231
$("[name=‘hobby’]").eq(i).siblings(".mid-je").children(“span”).text(); $("[name=‘hobby’]"):定位遍历的元素 $("[name=‘hobby’]").eq(i)：精确定位到所有元素中的某一个 $(function () { //点击全选框，选中所有购物车商品 var a = 1...
jQuery学习总结
weixin_49295874的博客
03-18 389
1.根据class标签获取jquery对象点击跳转跳转团队页面 <li class="team"> <img src="../img/team.png"/> <span class="name">团队成员</span> </li> $(".team").tap(function(){ window.location.href="teamMember.html" }) 2.五种添加元素方法 append() - 在被选元素的结尾插入内容
html中选择器eq,jQuery 选择器之eq是什么意思
weixin_31232021的博客
06-03 972
GavinZeng2016-10-27 09:55已采纳回复 无所畏惧小小小：首先指出你问题里面的一个错误：$('.dh span').[3]，这个写法是不对的，没有这种语法回答：关于这部分的知识，和CSS选择器的知识是重合的，jQuery在做元素选择上的时候，写法和CSS几乎是一样的，拿jQuery和CSS做对比吧，这样可能容易理解一点。基于你的代码来做研究：1.$('.dh span')这句...
jQuery 遍历 - eq() 方法 查找当前元素
weixin_30294709的博客
02-20 268
jQuery 遍历 - eq() 方法 if(data[i].status !='已送达'){ $('.w-beget').eq(i).attr('disabled','disabled'); } 转载于:https://www.cnblogs.com/winyh/p/6419804.html
前端基础学习路线-4-JQ篇
qq_26983201的博客
01-03 113
jQuery库： 会框架，也要会jq的使用：方便，快！ 目的：学会调用，可以制作几个简单的demo即可。 目标是深入理解jQ与JS的差异： 1 dom对象 2 入口函数 3 事件的执行逻辑 ...
js-jq-carousel
03-06
4. **定时器**：为了实现自动播放功能，js-jq-carousel可能会使用JavaScript的`setTimeout`或`setInterval`函数，定时自动切换到下一张幻灯片。 5. **兼容性处理**：考虑到浏览器之间的差异，js-jq-carousel可能...
前台是个什么东西---JQ&JS---一个排班的程序(JAVASWT改版)
03-19
标题中的“前台是个什么东西---JQ&JS---一个排班的程序(JAVASWT改版)”指的是一个关于前端开发的项目，重点在于使用JavaScript（JS）和jQuery（JQ）来实现一个排班管理程序。这个程序可能是从原本用Java SWT...
Node.js-jq.node-强大的命令行JSON处理器
08-10
然后在命令行中，你可以输入`jq-node`命令，配合JSON数据和查询表达式进行处理，例如： ```bash echo '{"name": "John", "age": 30}' | jq-node '.age' ``` 上述命令会输出JSON对象中的`age`属性值，即`30`。 **...
js-jq-site:JavaScript 和 jQuery 实践网站
06-23
在这个名为 "js-jq-site" 的项目中，我们看到一个专门针对这两个技术的实践网站，它提供了学习和练习 JavaScript 和 jQuery 的机会。这个项目可能包含一系列的练习和示例，帮助用户深入理解这两种语言的用法。 ...
js jq中$().eq()和$().find()的用法
热门推荐
木子小姐
08-16 1万+
$().eq()方法，将匹配元素集缩减到指定 index 上的一个。  $().find()方法，返回被选元素的后代元素。后代是子、孙、曾孙，依此类推。 html> lang="zh"> charset="UTF-8"> http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> name="viewpor
javascript中 .eq()的用法
L1562670976的博客
03-29 1万+
.eq()的使用方法 $("body").find("div").eq(2).addClass("blue"); 意义：先在“Body”里面找到“div”元素，再找到和“”div“”同级的第二个“”div“”（由于.ep（）的索引是从0开始的， .eq（2）就是找到第三个元素）
$(“#datalistview1 li“).eq(i).find(“.fexd2“).text(“荆门市“)；
qq_41617901的博客
08-07 254
//插入数据 function appendData() { for (var i = 0; i < 10; i++) { $("#datalistview1 li").eq(i).find(".fexd1").text("荆门市熊兴化工有限公司"); $("#datalistview1 li").eq(i).find(".fexd2").text("荆门市"); $("#datalistview1 li").eq(i).find(".fexd.
jQuery--选择器（基本选择器、层次选择器）详解
吴声子夜歌的博客
10-01 2722
jQuery选择器 通过jQuery选择器可以方便快捷地获得页面中的元素，然后为其添加相应行为，无需担心浏览器的兼容性问题。jQuery选择器完全继承了CSS选择的风格，将jQuery选择器分为4类：基本选择器、层次选择器、过滤选择器和表单选择器。 基本选择器 基本选择器是jQuery中最常用的选择器，通过元素的id、className或tagName来查找页面中的元素，如下表： 选择器 ...
c++leecode基础题十大排序数据结构基础_leecodeBasic.zip
最新发布
09-23
c++leecode基础题十大排序数据结构基础_leecodeBasic
【数字信号去噪】基于matlab花朵授粉算法FPA-ICEEMDAN信号去躁【含Matlab源码 7607期】.zip
09-23
CSDN海神之光上传的代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b或2023b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博客文章底部QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 功率谱估计： 故障诊断分析： 雷达通信：雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计：SOC估计 目标定位：WSN定位、滤波跟踪、目标定位 生物电信号：肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统：DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪（CEEMDAN）、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信
vue3+SSM校园失物招领信息系统微信微信小程序[编号：CS_71072]源码数据库.zip
09-23
本文介绍了使用SpringBoot作为后端框架，Vue作为前端框架，MyBatis-Plus进行持久层开 。详细描述了系统测试的目的、功能测试案例，包括登录验证和用户管理，以及数据库设计。 前端：vue3 开发工具：IDEA 或者eclipse都支持 编程语言: java 框架：springboot/ssm都支持 jdk版本:jdk1.8以上均可 数据库: mysql 版本不限 数据库工具：Navicat/SQLyog都可以
机器学习与R语言_[美]_Brett_Lantz_MachineLearning-with-R.zip
09-23
机器学习与R语言_[美]_Brett_Lantz_MachineLearning-with-R
exams-习题集资源代码
09-23
exams-习题集资源
原生JavaScript无Jq实现详细月历代码实例
本文将深入探讨如何在不依赖jQuery的情况下，利用原生JavaScript实现一个简单的移动端日历功能。文章提供了详细的代码实例，包括HTML结构和CSS样式，以及JavaScript脚本。以下是关键知识点的详细解释： 1. **HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值