《jQuery》

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

idiosun

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

阅读量64

点赞数

分类专栏： Java EE期末复习文章标签： jquery

本文链接：https://blog.csdn.net/m0_47603012/article/details/111595129

版权

Java EE期末复习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

《jQuery》

<大纲>

掌握各种选择器

操作元素属性

操作元素的CSS样式

设置元素内容

掌握事件处理方法

掌握页面就绪函数

1.jQuery下载与安装

官网：jquery.com
采用独立js文件发布，min.js（压缩版)适用于上线使用;.js适用于开发阶段使用

2.jQuery选择器

层叠选择器

语法说明
$(“ancestor descendent”) 后代选择器
$(“ancestor**>**descendent”) 子选择器
$(“prev**~**siblings”) 兄弟选择器

语法	说明
$(“ancestor descendent”)	后代选择器
$(“ancestor>descendent”)	子选择器
$(“prev~siblings”)	兄弟选择器

属性选择器

语法	说明
$(“selector[attribute=value]”)	选择属性值具体值的组件
$(“selector[attribute^=value]”)	选择属性值以某值开头的组件
$(" s e l e c t o r [a t t r i b u t e * $ =*value]")	选择属性值以某值结尾的组件
$(“selector[attribute*=value]”)	选择属性值包含某值的组件

位置选择器

语法	说明
$(“selector：first”)	获取第一个元素
$(“selector：last”)	获取最后一个元素
$(“selector：even”)	获取偶位置开始的元素（0开始）
$(“selector：odd”)	获取奇位置开始元素（0开始）
$(“selector：eq(n)”)	获取n表达式相符的元素（0开始）

表单选择器

语法	说明
$(“selector：input”)	获取所有输入元素
$(“selector：text”)	获取文本框
$(“selector：password”)	获取密码框
$(“selector：submit”)	获取提交按钮
$(“selector：reset”)	获取重置按钮

3.操作元素属性

获取元素属性

	var href_attr =  $("a[href*='163']").attr("href");

设置元素属性

    $("a[href*='163']").attr("href" , "http://www.163.com");

移除元素属性
```
 $("a").removeAttr("href");
```

4.操作元素的CSS样式

css()——获取或设置匹配元素的style

		$("a").css("color" , "red");
		$("a").css({"color" : "red" , "font-weight" : "bold" , "font-style" : "italic"});

addClass()——为匹配元素添加指定的class
```
		$("li").addClass("highlight myclass");
```
removeClass()——为匹配元素移除指定的class或所有class
```
		$("p").removeClass("myclass");
```

5.设置元素内容

val()——获取或设置输入项的值

$("input[name='uname']").val("administrator");

text()——获取或设置元素的纯文本
```
$("span.myclass").text("I love you!");
```

html()——获取或设置元素内部的HTML

$("span.myclass").html("<b>锄禾日当午，汗滴禾下土</b>");

6.事件处理方法

on(“click”,function(){…})——为选中的页面元素绑定单击事件
.click(function)——是绑定事件的简写形式
处理方法中提供的event参数包含了事件的相关信息
常用事件

鼠标事件键盘事件表单事件文档/窗口事件
click keypress submit load
dbclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
mouseover

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dbclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
mouseover

7.页面就绪函数

页面就绪函数是指页面加载完成后执行的函数

语法

	//onload是指在页面所有资源加载完成后执行
	window.onload = function(){
		alert(1);
	}
	
	//ready()则是在页面dom被浏览器解释完成后执行
	$(document).ready(function(){
		alert("页面准备就绪");
	})
	
	//简化形式
	$(function(){
		$("p.myclass").on("click" , function(){
			//$(this)是指当前事件产生的对象
			$(this).css("background-color" , "yellow");
		})
    })