玩转JQuery（选择器，过滤器，函数，事件，JQuery-Ajax）

最新推荐文章于 2023-01-14 06:57:52 发布

贫僧洗发爱飘柔

最新推荐文章于 2023-01-14 06:57:52 发布

阅读量248

点赞数

分类专栏： JavaScript 前端文章标签： jquery javascript json java html

本文链接：https://blog.csdn.net/qq_45637894/article/details/109432884

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

文章目录

一、JQuery的简介与安装
二、JQuery语法
三、JQuery中的函数
四、绑定事件
- - - 第一种方式
    - 第二种方式
五、JQuery-Ajax

一、JQuery的简介与安装

1.什么是JQuery

    jQuery 是一款跨主流浏览器的 JavaScript 库，封装了 JavaScript 相关方法调用，简化JavaScript 对 HTML DOM 操作

2.为什么使用JQuery

减少代码量
免费，开源且轻量级的 js 库，容量很小
兼容市面上主流浏览器
能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，异步 AJAX

IE 和 FireFox，Google 浏览器处理 AJAX，创建异步对象是不同的，IE是ActiveXObject
而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX异步对象

3.获取JQuery

官网下载地址：https://jquery.com/download/
两个版本：按照开发需求选择

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

二、JQuery语法

1.JQuery的入口函数

$(document).ready(function(){    // 执行代码   });

简写：$(function(){ // 执行代码 });
相当于：JavaScript的入口函数 window.onload = function () { // 执行代码}
两者的区别：

区别	window.onload	$(document).ready()
执行时机	必须等到页面全部加载完毕（包括图片等）然后再执行包裹代码	只需要等到网页的DOM结构加载完毕后，就执行包裹的代码
执行次数	只能执行一次，第二次的话会覆盖第一次	可以执行多次，而且不会被覆盖

2.DOM对象和JQuery对象

DOM对象：由JavaScript语法创建的对象
JQuery对象：由JQuery语法表示的对象  （JQuery表示的对象都是数组）

① DOM 对象转换 JQuery 对象

方式：$(DOM对象)

②JQuery对象转换为DOM对象

方式一：JQuery对象.get(数组下标);
方式二：JQuery对象[数组下标];
例如： var obj=$("#text")[0];

3.JQuery选择器（重点）

①标签选择器

语法：$("标签名")

②id选择器

语法：$("#id")

③class 选择器

语法：$(".class 名称")

④所有选择器（选取页面中所有 DOM 对象）

语法：$("*")

⑤组合选择器

语法：$("id,class,标签名")

⑥表单选择器

语法： $(":type 属性值")

例如：	 $(":text")选取所有的单行文本框
	     $(":password")选取所有的密码框
	     $(":radio")选取所有的单选框
	     $(":checkbox")选取所有的多选框
	     $(":file")选取所有的上传按钮

代码展示：

未使用选择器之前：	使用选择器之后

<script src="js/jquery-3.4.1.js"></script>
		<style type="text/css">
			div{
				background-color: chartreuse;
				width: 12.5rem;
				height: 6.25rem;
			}
		</style>
		<script>
			$(function(){
				 $("div").css("background","red");
				 $(".div2").css("background","blue");
				 $("#div1").css("background","yellow");
				 $(":text").css("background","green");
				 $(":password").css("background","brown");
			     $(":file").css("background","black");
			});		
		</script>
	</head>
	<body>
		<div>我是标签选择器</div>
		<div id="div1">我是id选择器</div>
		<div class="div2">我是class选择器</div>
		我是text<input type="text" /></br>
		我是password<input type="password"/></br>
		我是文档<input type="file" /></br>
	</body>

4.JQuery过滤器

JQuery对象中存储的DOM对象顺序与页面标签声明的位置关系

 <div>1</div> dom1
 <div>2</div> dom2
 <div>3</div> dom3
$("div") == [dom1,dom2,dom3]

(1)基本过滤器

①选择第一个 first, 保留数组中第一个 DOM 对象

语法：$("选择器:first")

②选择最后个 last, 保留数组中最后 DOM 对象

语法：$("选择器:last")

③选择数组中指定对象

语法：$("选择器:eq(数组索引)")

④选择数组中小于指定索引的所有 DOM 对象

语法：$("选择器:lt(数组索引)")’

⑤选择数组中大于指定索引的所有 DOM 对象

语法：$("选择器:gt(数组索引)")

(2)表单对象属性过滤器

①选择可用的文本框

语法：$(":text:enabled")

②选择不可用的文本框

语法:$(":text:disabled")

③复选框选中的元素

语法：$(":checkbox:checked)

④选择指定下拉列表的被选中元素

语法：$("select>option:selected")

三、JQuery中的函数

① val()

$(选择器).val() ：无参数调用形式， 读取数组中第一个 DOM 对象的 value 属性值
$(选择器).val(值)：有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值

②text()

$(选择器).text():无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接为一个字符串返回
$(选择器).text(值):有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值

③attr()

$(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值
$(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值

④hide()

$(选择器).hide() :将数组中所有 DOM 对象隐藏起来

⑤ show()

$(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来

⑥remove()

$(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除

⑦empty()

$(选择器).empty()：将数组中所有 DOM 对象的子对象删除

⑧append() 为数组中所有 DOM 对象添加子对象

$(选择器).append("<div>我动态添加的 div</div>")

⑨html() 设置或返回被选元素的内容（innerHTML）

$(选择器).html()：无参数调用方法，获取 DOM 数组第一个匹元素的内容。
$(选择器).html(值)：有参数调用，用于设置 DOM 数组中所有元素的内容。

⑩each() 对数组，json,dom数组等的遍历

语法一：$.each( 要遍历的对象, function(index,element) { 处理程序 } )
语法二：jQuery 对象.each( function( index, element ) { 处理程序 } )

index数组下标
element数组的对象

代码展示：

<script >
			$(function(){
				$(":text").each(function(i,n){
					alert("dom数组下标"+i+"value值"+n.value);
				})
			   $.each(":text",function(i,n){
				   alert("dom数组下标"+i+"value值"+n.value);
			   })
			});		
		</script>
	</head>
	<body>
		<input type="text" value="张飞"/>
		<input type="text" value="关羽"/>
		<input type="text" value="刘备"/>
	</body>

四、绑定事件

第一种方式

语法：$(选择器).监听事件名称(处理函数)

第二种方式

语法：$(选择器).on(event,,data,function)

event:事件
data:规定传递到函数的额外数据
function:规定事件发生时运行的函数
代码展示：

 $(":button").click(function(){
				   alert("牛逼");
			   });
			   $("#btn").on("click",{name:"liu"},function(event){
				   //event.data获取传入的参数  event为自定义名
				   alert(event.data.name);
			   });

五、JQuery-Ajax

1.$.ajax()

语法：$.ajax( { name:value, name:value, ... } )
参数说明：参数是 json 的数据，包含请求方式，数据，回调方法等

async ：布尔值，表示请求是否异步处理。默认是 true
contentType ：发送数据到服务器时所使用的内容类型。
data：规定要发送到服务器的数据多数为JSON
dataType：期望从服务器响应的数据类型
type：规定请求的类型（GET 或 POST 等），默认是 get
url：规定发送请求的 URL
success:function(返回的数据){数据处理}
error:function(返回的数据){数据处理}

2.$.get()

语法：$.get(url,data,function(data,status,xhr),dataType)
function(data,status,xhr)

data - 包含来自请求的结果数据
status - 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”）
xhr - 包含 XMLHttpRequest 对象

3.$.post()

语法：$.post(URL,data,function(data,status,xhr),dataType)
举例：使用 AJAX 级联查询（只展示前端代码）
在这里插入图片描述

贫僧洗发爱飘柔

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
玩转JQuery（选择器，过滤器，函数，事件，JQuery-Ajax）

文章目录一、JQuery的简介与安装1.什么是JQuery2.为什么使用JQuery3.获取JQuery二、JQuery语法1.JQuery的入口函数2.DOM对象和JQuery对象① DOM 对象转换 JQuery 对象②JQuery对象转换为DOM对象3.JQuery选择器（重点）①标签选择器②id选择器③class 选择器④所有选择器（选取页面中所有 DOM 对象）⑤组合选择器⑥表单选择器4.JQuery过滤器(1)基本过滤器①选择第一个 first, 保留数组中第一个 DOM 对象②选择最
复制链接

扫一扫