JS框架 JQuery

最新推荐文章于 2025-03-04 20:36:36 发布

corona_sgj

最新推荐文章于 2025-03-04 20:36:36 发布

阅读量139

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/m0_51984899/article/details/111655963

版权

前端专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何下载并引入jQuery库，区分DOM对象和jQuery包装集，涵盖选择器、属性操作、样式和内容修改、元素创建、事件绑定以及Ajax应用。通过实例演示，助您快速上手jQuery核心技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS框架 JQuery

使用方式

1>官网下载对应资源 http://jquery.com/ 下载

2>在页面中引入 jquery

将下载的放到js的目录下,用script引入.

注意:要想使用JQuery,必须要先引入.

<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>

DOM对象和JQuery包装集对象

jQuery"的核心
$ 符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象.

DOM对象
根据id属性获取DOM对象 document.getElementById(“id属性值”);
如果元素存在那么直接获取dom对象，如果元素不存在，值为null

Jquery包装集对象
根据id属性获取DOM对象 $("#id属性值");
如果元素存在那么直接获取jquery对象，如果元素不存在，值为空包装集对象 (不会是null)

注意：
dom对象判断对象是否获取到，判断值是否为null
Jquery包装集对象判断对象是否获取到，判断jquery对象的长度length

Dom转换成jquery对象
$(dom对象)

jquery对象转换成Dom

选择器

基础选择器

基础选择器
id选择器 $("#testDiv")选择id为testDiv的元素
元素名称选择器 $(“div”)选择所有div元素
类选择器 $(".blue")选择所有class=blue的元素
选择所有元素 $("*")选择页面所有元素
组合选择器 $("#testDiv,span,.blue")同时选中多个选择器匹配的元素

和dom的选择器符号时差不多的,注意jQuery的是用**$(" ")**就可以了.并且开始要引入jQuery的资源才可以使用.之后的代码案例就不写引入了.

<div id="mydiv1">id选择器1<span>span中的内容</span></div>

<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
			//id选择器
			var mydiv1 = $("#mydiv1");
			console.log(mydiv1);
</script>

层次选择器

层次选择器
后代选择器 $("#parent div") 选择id为parent的元素的所有div元素
子代选择器 $("#parent>div") 选择id为parent的直接div子元素
相邻选择器 $(".blue + img") 选择class类为blue的下一个img元素
同辈选择器 $(".blue ~ img") 选择class类为blue的之后的img

表单选择器

属性选择器
$("[属性]"); 选中页面中具备某样属性的元素
$("[属性 = 值]"); 选中页面中具备属性等于某个特定值的元素


//属性选择器   选中页面中具备某样属性的元素
var pro1 = $("[disabled]");
console.log(pro1);

//选中页面中具备属性等于某个特定值的元素
var pro2 = $('[type="radio"]');
console.log(pro2);

var pro3 = $('[name="uage"]');
console.log(pro3);

表单选择器
表单元素选择器:input 查找所有的input元素：$ (":input")；
注意：会匹配所有的input、textarea、select和button元素。
文本框选择器:text 查找所有文本框：$ (":text")
密码框选择器:password 查找所有密码框：$ (":password")
单选按钮选择器:radio 查找所有单选按钮：$ (":radio")
复选框选择器:checkbox 查找所有复选框：$ (":checkbox")
提交按钮选择器:submit 查找所有提交按钮：$ (":submit")
图像域选择器:image 查找所有图像域：$ (":image")
重置按钮选择器:reset 查找所有重置按钮：$ (":reset")
按钮选择器:button 查找所有按钮：$ (":button")
文件域选择器:file 查找所有文件域：$(":file")

//表单元素选择器
var bds = $(":input");
console.log(bds);

过滤选择器

过滤选择器
$(":eq(index)") 匹配元素的指定下标的元素（下标从0开始） .eq(index)
$(":gt(index)") 匹配元素下标大于指定值元素（下标从0开始）.gt(index)
$(":odd") 匹配奇数下标
$(":even") 匹配偶数下标
$(":checked") 匹配元素被选中

//匹配元素的指定下标的元素
var eq = $("[type]:eq(1)");
console.log(eq);
			
//匹配元素下标大于指定值元素
var eq = $("[type]:gt(8)");
console.log(eq);
			
//匹配奇数下标
var hob = $("[name = 'ufav']:odd");
//匹配偶数下标
var even = $("[name = 'ufav']:even");
console.log(hob);
console.log(even);

操作元素的属性、样式、内容

操作元素的属性

属性的分类
固有的属性
src align method
自定义的属性
abc=‘123’
返回值是boolean类型的属性
checked disabled selected

操作属性
attr
获取已存在的属性，可以直接获取到具体的值，如果属性是boolean类型的也是一样具体的值
prop （不能操作自定义属性）
获取已存在的属性，可以直接获取到具体的值，如果属性是boolean类型返回的是true/false

获取属性
attr(‘属性名’);
prop(‘属性名’);

设置属性
attr(‘属性名’,‘属性值’);
prop(‘属性名’,‘属性值’);

移除属性
removeAttr(属性名)移除指定的属性

<form action="" id="myform">
	<input type="checkbox" id="aa" data='123' name="ch" checked="checked"/>	aa
	<input type="checkbox" id="bb" data='456' name="ch" />	bb
</form>

<script type="text/javascript">
	//获取元素
	var aa = $("#aa");
	var bb = $("#bb");
	
	//获取固有属性值
	console.log(aa.attr('type'),aa.attr('name'));
	console.log(aa.prop('type'),aa.prop('name'));
			
	//自定义的属性
	console.log(aa.attr('data'));//123
	console.log(aa.prop('data'));//undefined
			
	//返回值是boolean类型的属性
	console.log(aa.attr('checked'));//checked
	console.log(aa.prop('checked'));//true
	//不存在的属性
	console.log(bb.attr('checked'));//undefined
	console.log(bb.prop('checked'));//false
			
	//设置
	aa.attr("data","abc");
	bb.prop("checked",true);
	aa.attr("name",'input');
			
	//移除属性
	bb.removeAttr('name');
</script>

操作元素的样式

操作样式
attr(“class”) 获取class属性的值，即样式名称
attr(“class”,”样式名”) 修改class属性的值，修改样式直接覆盖原有的样式
addClass(“样式名”) 添加样式名称
css(“样式名”,“样式值”) 添加具体的样式相当于在元素上添加style属性
removeClass(class) 移除样式名称

//获取class属性的值
var div1 = $("#conBlue").attr("class");

//修改class属性的值   直接覆盖原有的样式
$("#conBlue").attr("class","green");

//添加样式名称     
$("#conBlue").addClass("larger");

//添加具体的样式   相当于在元素上添加style属性
$("#conRed").css("color","red");

//removeClass  移除样式
$("#remove").removeClass('larger');

操作元素的内容

非表单元素/表单元素的内容/值

html() 获取元素的html内容
html(“html,内容”) 设定元素的html内容

text() 获取元素的文本内容，不包含html
text(“text 内容”) 设置元素的文本内容，不包含html

val() 获取元素value值
val(‘值’) 设定元素的value值

//获取非表单元素 的内容/值
console.log($("h3").html());
console.log($("h3").text());
//设置非表单元素 的内容/值
$("#html").html("<h2>标签内容</h2>");
$("#text").text("<h2>标签内容</h2>");
//val()
console.log($("[name='uname']").val());
$("[name='uname']").val("orm");

创建、添加、删除元素

创建元素

创建元素
$(‘元素内容’)

添加元素

添加元素
prepend(content) 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$ (content).prependTo(selector) 把 content 元素或内容加入 selector 元素开头
append(content) 在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$ (content).appendTo(selector) 把 content元素或内容插入selector 元素内，默认是在尾部
before() 在元素前插入指定的元素或内容:$ (selector).before(content)
after() 在元素后插入指定的元素或内容:$(selector).after(content)

删除元素

remove()删除所选元素或指定的子元素，包括整个标签和内容一起删。
empty()清空所选元素的内容

//remove()  移除
$('.green').remove();
			
//empty()   清空
$('.blue').empty();

遍历元素

遍历元素
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element是当前的元素，此时是dom元素。

var spans = $("span");
spans.each(function(index,element){
	console.log(index,element);
	console.log($(element));
});

JQuery事件

ready加载事件
ready()类似于 onLoad()事件
ready()可以写多个，按顺序执行
$(document).ready(function(){})
等价于
$(function(){})
ready加载事件和load加载事件的区别
load：等待加载页面中DOM结构(元素)和引入的资源后，执行对应代码
ready：等待加载页面中DOM结构(元素)，执行对应代码

//load
window.onload = function(){
	console.log("abc");
} 

//ready加载事件
 $(function(){
 	console.log($("#aa"));
 });
			
 $(document).ready(function(){
	console.log($("#aa"));
});

绑定事件
$(selector).bind( eventType [, eventData], handler(eventObject));

//bind绑定
$("#aa").bind('click',function(){
	console.log('点击事件');
});
			
//bind绑定多个
$("#bb").bind('mouseout',function(){
	console.log('移开事件');
}).bind('mouseover',function(){
	console.log('悬停事件');
});
			
$("#cc").bind({
	'click':function(){
		console.log("点击事件");
	},
	'mousemove':function(){
		console.log("移动事件");
	}
})
			
//事件绑定的简洁使用方式
$("#dd").click(function(){
	console.log("点击事件");
})
			
$("#dd").click(function(){
	console.log("点击事件");
}).mouseover(function(){
	console.log("悬停事件");

Jquery Ajax

$.ajax

ajax 异步无刷新技术

$.ajax({
	type:get/post,  请求方式
	url:请求地址,
	data:{
		//参数
		name:zhangsan,
		pwd:123456
	},
	dataType:'json'    预期服务器返回的数据类型
	success:function(abc){
		
	}
	
});

$.ajax({
	type:'get',
	url:'js/data.json',
	data:{
		uname:'zhangsan'
	},
	dataType:'json',
	success:function(abc){
		console.log(abc);
	}
});

$.get

$.get(‘地址’,数据参数,回调函数);

$.get("js/data.json",function(data){
	console.log(data);
});

$.post

$.post(‘地址’,数据参数,回调函数);

$.getJSON

$.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){
	console.log(data); // 要求返回的数据格式是JSON格式
});

$.getJSON('js/data.json',function(data){
	console.log(data); // 要求返回的数据格式是JSON格式
});