基础知识 | jquery axjx 跨域

快乐的高兴的学习代码中

已于 2022-06-05 17:00:37 修改

阅读量822

点赞数

分类专栏：详细知识文章标签： jquery 前端

于 2021-03-09 11:19:47 首次发布

本文链接：https://blog.csdn.net/A123ppleQueen/article/details/114578327

版权

定义：jquery是第三方开发的*（先下载，再使用），执行DOM操作的，极简化的函数库（jquery使用函数解决一切问题，没有属性）。（第一方：自己写第二方：浏览器自带）

好处：简单，解决了大部分浏览器兼容性问题。

问题：简化的不彻底，只是简化了语句，没有减少步骤。

只有pc端，没有移动端。

链接：https://pan.baidu.com/s/1RUTeACBjnAWuLvn--t2Y5A
提取码：9ksz
复制这段内容后打开百度网盘手机App，操作更方便哦

jq下载

官网：jquery.com

版本 1.x支出旧浏览器（IE8）版本，不支持ES6语法。

2.x不再支持旧浏览器，也不支持ES6

3.X 不再支持旧浏览器。但是已经支持ES6

压缩版和未压缩版

使用jquery

引入jquery.

方式一：将jq.js文件下载到项目本地文件夹用相对路径引入jq。

问题：如果将jq.js文件下载到服务器本地，则只能保存在一个地区。距离较远的地区的用户，访问就会很慢。

方式二：引入CDN网络中的共享Jquery.js文件。

CDN网络：内容分发网络。分布在全球各地的多台服务器组成的一个智能网络。可以自动将一个文件同步到全球各地的所有服务器上保存。当用户向CDN网络请求下载一个文件时，CDN网络会自动判断当前用户距离哪一台服务器网络状况最佳，就从哪台服务器下载文件副本。

优点：身处不同地区的用户，访问同一个文件时，下载速度几乎一样。

如何：只要去jq官网，找到官方提供的CDN网址即可

点击数字增加

图里的js文件：链接：https://pan.baidu.com/s/1zIV-r5RR8ujDN6j7W3fcRA
提取码：1111
复制这段内容后打开百度网盘手机App，操作更方便哦

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="btn">click me(0)</button>
	</body>
	<script>
     //DOM写法
		var btn=document.getElementById("btn");
		btn.onclick=function(){
			//先取出当前按钮（）内的数字，转为整数
			var n=parseInt(
			this.innerHTML.slice(9,-1)
			)
			//单击一次，加一次
			n++;
			//将整数再拼接回当前按钮的内容中
			this.innerHTML=`click me(${n})`;
		}
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="btn1">click me(0)</button>
	</body>
	<!-- 引入js文件 -->
	<script src="js/jquery-1.11.3.js"></script>
	<script>
		// jquery做法
	 var $btn1=$("#btn1");
	 $btn1.click(function(){
		var $this=$(this);
		var n=parseInt(
		 //html==innerHTML
		$this.html().slice(9,-1)
		)
		n++;
		$this.html(`click me(${n})`);
		 }
		)
	</script>
</html>

jquery原理

当引入<script src="js/jquery-1.11.3.js">时，会在内存中添加一种新的类型，由两部分组成：构造函数、原型对象

构造函数：function JQuery（选择器或Dom 元素）{......}

创建jquery家的子对象

只有jquery家的子对象才能调用jquery原型对象中的简化版函数。

原型对象：JQuery.prototype，专门替所有jQuery家子对象保存简化版函数。

今后只要想调用Jquery家简化版函数，第一步都是要先创建jQuery家子对象。

标准：var jq=new Jquery(选择器或DOM元素)

但是，这样写比较麻烦，所以作者把new Jquery（）保存到了jqueyr的构造函数内部；

function jquery(选择器或Dom元素){

return new Jquery(选择器或Dom元素)

}

从此调用jquery，等于new Jquery(),省略了new.

每次创建Jquery对象都要写jQuery（），太麻烦

因此，作者定义了 $=jquery ,之后，$=jquery()=new jquery(),用$就行。

问题：使用jquery主要是想操作DOM元素

解决：$()中 2种：

可以放一个选择器：$("选择器")做两件事：查找DOM元素，创建jq对象

还可以直接放一个DOM元素：$(DOM元素对象)只做一件事，无需查找，直接创建jq对象保存当前DOM元素对象

问题·：Jquery 对象毕竟和DOM元素不能通用！DOM家的函数不能用jquery家的函数。jquery家的元素也不能用Dom家的属性和方法。如何区分一个对象是DOM家还是JQ家

解决：行业内约定俗称：所有jquery家的变量都要以$开头

var $btn1=$("#btn1");

用jquery对象，调用jquery家简化版函数，操作封装的Dom元素

对jquery对象，调用简化版函数时，其实底层会被自动翻译为原生的DOM属性和方法，最终作用到jquery对象中保存的Dom元素上

eg:$btn.html ====btn.innerHTML

$btn.click(function(){....}) ======btn.οnclick=function(){......}

问题：jquery中事件处理函数里的this指谁

因为jquery简化版函数最终都会被翻译成原生的DOM属性和方法，所以，jquery的事件处理函数，最终还是会被保存到DOM元素身上的事件属性上。所以，Jquery中事件处理函数中的this,和DOM中事件处理函数中的this完全一样，指向当前正在触发事件的DOM元素对象

问题：this如果指向DOM元素对象，则无法继续调用jq简化版函数

今后在jq中事件处理函数中使用this,都必须用$(this),将this转化为一个jquery子对象，才能用${this},继续调用jq简化版函数。

问题：如果$()中的选择器，选择了多个DOM元素，会怎样

$()创建的Jquery对象其实就是一个类数组对象。如果选择器只找到一个DOM元素，则类数组对象就是一个只有一个元素，length为1的类数组对象

如果选择器找到多个DOM元素，则类数组对象中包含多个DOM元素对象，有下标，也有length属性。

问题：如果想操作类数组对象中的DOM元素，是否需要自己用[下标]取出DOM元素后操作？

不用，对jquery对象调用简化版函数，会自动翻译为原生的DOM方法和属性，自动作用到内部的DOM元素身上。不用我们自己写下标。

强烈建议：因为DOM和jquery的方法和属性不通用，所以，尽量避免DOM和jquery混搭。如果决定用jquery，应该一用到底。

jquery简化版函数三大特点

自带for循环遍历：如果jquery对象查找到多个DOM元素，集中保存在jquery对象中。只要对整个jquery对象调用简化版函数，jquery对象就会自动遍历内部每个DOM元素对象，将简化版函数翻译后，自动应用到每个DOM元素对象上。

一个函数两用：经常出现在修改相关的函数上，通过重载方式实现：

如果调用函数时，没有给任何新值，则函数默认执行获取旧值的操作。

如果调用函数时，给了新值，则函数自动切换为执行修改值的操作。

eg:$btn.html() //获取按钮的内容

$btn.html("*") //修改按钮的内容

多数函数都会返回当前正在操作的.前的jq对象------链式操作

点击后的效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="btn1">click me(0)</button>
		<button id="btn2">click me(0)</button>
		<button id="btn3">click me(0)</button>
		<script  src="js/jquery-1.11.3.js"></script>
		<script>
			//为三个按钮绑定单击事件，记录单击次数
			var  $btns=$("button");
			console.log($btns);
			$btns.click(function(){
				var $this=$(this);
				var n=parseInt(
				$this.html().slice(9,-1)
				)	
				n++;
				$this.html(`click me(${n})`);
			})
		</script>
	</body>
</html>

jquery也跟dom一样增删查找

查找

jquery查找支持按各种选择器查找元素。即支持css3自带的选择器，同时又扩展了个别仅jquery中可用的选择器

1.子元素过滤选择器：按照元素在其父元素下的相对位置选择。

：first-child 选择作为其父元素下第一个儿子的子元素

：only-child:选择作为其父元素下唯一一个儿子的子元素

.......

注意：css中的位置下标从1开始

注意：dom中元素.style.css属性值=属性值 ---------- 在jq中 $元素.css("css属性"，“属性值”)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{		
				height:30px;
			}
		</style>
	</head>
	<body>
		<div></div>
		<ul>
		    <li>child1-basic0</li>
		    <li>child2-basic1</li>
		    <li>child3-basic2</li>
		  </ul>
		  <ul>
		    <li>child1-basic3</li>
		    <li>child2-basic4</li>
		    <li>child3-basic5</li>
		  </ul>
		  <ul>
		    <li>child1-basic6</li>
		  </ul>
		<script src="js/jquery-1.11.3.js"></script>
		<script>
			$("div").css("width","200px");
			$("div").css("backgroundColor","red");
			//查找每个ul中第一个li
			$("ul>li:first-child").css("border","2px solid green");
			//查找每个ul中最后一个li
			$("ul>li:last-child").css("box-shadow","0 0 5px gold");
			//查找每个ul中处于偶数位置的
			$("ul>li:nth-child(2n)").css("background-color","pink");
			//查找每个ul中第二个li
			$("ul>li:nth-child(2)").css("color","red");
			//查找作为ul下唯一子元素的li
			$("ul>li:only-child").css("padding","10px");
		</script>
	</body>
</html>

2基本过滤选择器 jquery独有，css没有

定义：先将所有符合要求的元素查询出来集中放在一个大的集合中，按元素在大集合中的下标位置选择元素

注意：因为jquery中独有的选择器底层是用js程序模拟出来的，不是css原装的选择器。所有下标和程序习惯一样，都是从0开始

：first/:last 选择查找结果中排在第一个/最后一个位置的元素

：gt(i) greater than 大于选择在查找结果中下标位置>i位置的元素

:lt(i) less than 小于选择在查找结果中下标位置<i位置的元素

:eq(i) equal 等于选择早查找结果中下标位置=i位置的元素

：even 选择在查找结果中下标为偶数位置的元素

：odd 选择在查找结果中下标为奇数位置的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
		    <li>child1-basic0</li>
		    <li>child2-basic1</li>
		    <li>child3-basic2</li>
		  </ul>
		  <ul>
		    <li>child1-basic3</li>
		    <li>child2-basic4</li>
		    <li>child3-basic5</li>
		  </ul>
		  <ul>
		    <li>child1-basic6</li>
		  </ul>
		<script src="js/jquery-1.11.3.js"></script>
		<script>
			//查找第一个li
			$("ul>li:first").css("border","2px solid hotpink");
			//查找最后一个li
			$("ul>li:last").css("box-shadow","0 0 5px skyblue");
			//查找处于偶数位置的li
			$("ul>li:odd").css("background-color","brown");
			//查找第2个li
			$("ul>li:eq(1)").css("color","coral");
		</script>
	</body>
</html>

内容过滤 jq独有，css没有

按元素的内容不同选择元素

：contains（关键字）选择元素内容中包含指定关键词的元素

：has(另一个选择器) 选择包含符合选择器要求的子元素的上级父元素

：parent 选择所有内容不为空的元素

：empty 选择所有内容为空的元素

：has(另一个选择器) 选择包含符合选择器要求的子元素的上级父元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width:1000px;
				height:30px;
			}
		</style>
	</head>
	<body>
		<div class="container">
		<h1>jQuery中的选择器——内容过滤选择器</h1>
		
		  <button>提交订单</button>
		  <button>Submit注册信息</button>
		  <button>马上提交</button>
		  <button>清空重填</button>
		 <br/><br/>
		  <div class="alert"></div>
		  <div class="alert">
		    <span class="close">×</span>
		  </div>
		
		</div>
		<script src="js/jquery-1.11.3.js"></script>
		<script>
			//<!-- 选择包含 提交 两字的按钮，变为绿色按钮 -->
			$("button:contains(提交)").css("background-color","green");
			//<!-- 选中包含.close按钮的.alert元素，让他们变为金黄色的警告框 -->
			$(".alert:not(:has(.close))").css("background-color","hotpink");
			$(".alert:has(.close)").css("background-color","gold");
			//<!--选中不包含.close按钮的.alert元素，让他们变为粉红色的警告框  -->
			$(".alert:not(:has(.close))").css("background-color","hotpink");
		
			//选择内容为空的.alert元素，加阴影
			$(".alert:empty").css("box-shadow","0 0 10px brown");
			// 选择内容不为空的.alert元素，加蓝色阴影
			$(".alert:parent").css("box-shadow","0 0 5px blue");
		</script>		
	</body>
</html>

可见性过滤

根据元素是否可见来选择元素

：visible 选择可见的元素

：hidden 选择不可见的元素

注意：css和html中，隐藏的方式有4种，但：hidden只能选择其中两种，diaplay:nonne <input type="hidden">

display:none opacity:0 <input type="hidden"> visibility:hidden

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="container">
		  <h1>可见性选择器</h1>
		
		  <div id="d1" style="display: none">lorem</div>
		  <div id="d2" style="visibility: hidden">lorem</div>
		  <div id="d3" style="opacity: 0">lorem</div>
		  <input id="d4" type="hidden" name="aa" value="bb"/>
		
		</div>
		<script src="js/jquery-1.11.3.js"></script>
		<script>
			console.log($('.container>:hidden'))
		</script>
	</body>
</html>

表单元素过滤器 jq独有，css没有

根据表单元素的特征来选择不同的表单元素

：input 选择所有四大类（input /textarea/button/select）表单元素。

input元素的每种type属性值，都有一个对应的选择器

：text 选择type="text"的文本框

：password 选择type="password"的密码框

：radio 选择type="radio"的单选按钮

：checkbox 选择type="checkbox"的复选框

.........

css中的input是元素选择器，只能选择input元素，不能选择其他表单元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
				用户名:<input disabled></br>
				密码:<input type="password" disabled></br>
				<input type="checkbox">我同意本站的使用条款<br>
				<input type="submit" value="提交注册信息" disabled />
			</form>
			<script src="js/jquery-1.11.3.js"></script>
			<script>
				//jquery步骤与dom的步骤差不多，jq只是简化了
				//var $chb=$("input:checkbox");
				//直接简化
				$("input:checkbox").click(function(){
					//选择除了checkbox之外的其余所有表单元素
					var $others=$(":input:not(:checkbox)");
					//如果选中checkbox，其他元素可用，未选中，禁用其他元素
					var $this=$(this);
					//prop获取属性 获取当前chb的checked属性==true
					if($this.prop("checked")==true){
						$others.prop("disabled",false);//启用
					}else{
						$other

最低0.47元/天解锁文章

快乐的高兴的学习代码中

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基础知识 | jquery axjx 跨域

定义：jquery是第三方开发的*（先下载，再使用），执行DOM操作的，极简化的函数库（jquery使用函数解决一切问题，没有属性）。（第一方：自己写第二方：浏览器自带）好处：简单，解决了大部分浏览器兼容性问题。问题：简化的不彻底，只是简化了语句，没有减少步骤。只有pc端，没有移动端。 jq下载官网：jquery.com版本 1.x支出旧浏览器（IE8）版本，不支持ES6语法。 2.x不再支持旧浏览器，也不支持.........
复制链接

扫一扫