jQuery

最新推荐文章于 2022-08-03 15:15:50 发布

今天没有bug

最新推荐文章于 2022-08-03 15:15:50 发布

阅读量166

点赞数 1

本文链接：https://blog.csdn.net/m0_51746839/article/details/117533105

版权

这里写目录标题

1.基本选择器
2.层叠选择器
3.属性选择器
4.位置选择器
5.表单选择器
6.操作属性
7. 操作元素的CSS样式
8.设置元素内容
9.jQuery事件处理方法

1.基本选择器

1.1 Web页面开发的两个要素

在使用HTML开发页面时，有两个基本点:
- 选择HTML页面上哪些元素
- 在这些有页面上做哪些动作

1.2 jQyery选择器

jQuery选择器用于选中需要操作的页面元素
语法1：jQuery（选择器表达式）
语法2：$(选择器表达式)

1.3 基本选择器

基本选择器是jQuery最基本也是最常用的选择器表达式

语法	说明
$("#id")	ID选择器，指定id元素的对象
$(“标签”)	元素选择器，选择指定标签名的选择器
$(".class")	类选择器，选中拥有指定css类的元素
$(“S1,S2,SN”)	组合选择器，对元素进行组合

<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>

<!DOCTYPE html >

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实验室</title>

<style>
.myclass {
	font-style: italic;
	color: darkblue;
}
/* 高亮css类 */
.highlight {
	color: red;
	font-size: 30px;
	background: lightblue;
}
</style>

</head>

<body>
	<div class="section">
		<h2>jQuery选择器实验室</h2>
		<input style="height: 24px" id="txtSelector" />
		<button id="btnSelect" style="height: 30px">选择</button>
		<hr />
		<div>
			<p id="welcome">欢迎来到选择器实验室</p>
			<ul>
				<li>搜索引擎：<a href="http://www.baidu.com">百度</a> <span> <a
						style="color: darkgreen" href="http://www.so.com">360</a>
				</span>
				</li>
				<li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a> <span> <a
						style="color: darkgreen" href="http://mail.qq.com">QQ邮箱</a>
				</span>
				</li>
				<li>中国名校：<a href="http://www.tsinghua.edu.cn">清华大学</a> <span>
						<a style="color: darkgreen" href="https://www.pku.edu.cn/">北京大学</a>
				</span>
				</li>
			</ul>

			<span class="myclass ">我是拥有myclass类的span标签</span>

			<p class="myclass">我是拥有myclass的p标签</p>
			<form id="info" action="#" method="get">
				<div>
					用户名：<input type="text" name="uname" value="admin" /> 密码：<input
						type="password" name="upsd" value="123456" />
				</div>
				<div>
					婚姻状况： <select id="marital_status">
						<option value="1">未婚</option>
						<option value="2">已婚</option>
						<option value="3">离异</option>
						<option value="4">丧偶</option>
					</select>
				</div>
				<div class="left clear-left">
					<input type="submit" value="提交" /> <input type="reset" value="重置" />
				</div>
			</form>
		</div>
	</div>
	
</body>
</html>

<script type="text/javascript" src="js/jquery-2.0.0.min.js" ></script>
	<script type="text/javascript">
		/*
			id选择器使用"#id值"进行选择
			$("#marital_status").addClass("highlight");
			css选择器使用".css类名"进行选择
			$(".myclass").addClass("highlight");
			
		*/
		
		document.getElementById("btnSelect").onclick = function(){
			var selector = document.getElementById("txtSelector").value;
			//jquery的选择器方法
			//选择器 
			$("*").removeClass("highlight");
			$(selector).addClass("highlight");
		}
	</script>

组合选择器：
在这里插入图片描述

2.层叠选择器

层叠选择器是根据元素的位置关系来获取元素的选择器表达式

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

3.属性选择器

属性选择器是根据元素的属性值来选择元素的选择器表达式

语法	说明
$(“selector[attribute=value]”)	选中属性值等于具体值的组件
$(“selector[attribute^=value]”)	选中属性值以某值开头的组件

$("selector[attribute=value]")  | 选中属性值以某值结尾的组件

$(“selector[attribute*=value]”)	选中属性值以某值包含值的组件

a[href="http://www.baidu.com"]

在这里插入图片描述

4.位置选择器

位置选择器是指通过位置获取指定的元素，例如"获取第三个元素"

语法	说明
$(“selector:first”)	获取第一个元素
$(“selector:last”)	获取最后一个元素
$(“selector:even”)	获取偶数位置的元素（从0开始）
$(“selector:odd”)	获取奇数位置的元素（从0开始）
$(“selector:eq(n)”)	获取指定位置的元素（从0开始）

在这里插入图片描述

5.表单选择器

表单选择器是获取表单元素的简化形式，例如：获取所有文本框

语法	说明
$(“selctor:input”)	所有输入元素
$(“selctor:text”)	获取文本框

…
在这里插入图片描述

6.操作属性

attr(name|properties|key)-获取和设置元素属性
removeAttr(name)-移除元素属性

<script type="text/javascript" src="js/jquery-2.0.0.min.js" ></script>
<script type="text/javascript">
    //只传一个值代表获取  传递两个代表设置
   var href_attr = $("a[href*='163']").attr("href");
   alert(href_attr);
   $("a[href*='163']").attr("href","http://www.163.com");
   var attr = $("a").attr("href");
   alert(attr);
    var removeAttr = $("a").removeAttr("href");

7. 操作元素的CSS样式

css() -获取或设置匹配元素的样式属性
addClass（） -为每个匹配的元素添加指定的类名
removeClass（）-从所有匹配的元素中删除全部或者指定的类

<script type="text/javascript" src="js/jquery-2.0.0.min.js" ></script>
<script type="text/javascript">
$("a").css("color","red");
$("a").css({"color":"red","font-weight":"bold","font-style":"italic"})
$("li").addClass("highlight");
var color = $("a").css("color");
alert(color);
</script>
</body>
</html>

在这里插入图片描述

8.设置元素内容

val() -获取或设置输入项的值
text() -获取或设置元素的纯文本
html() -获取设置元素内部的HTML

<script type="text/javascript" src="js/jquery-2.0.0.min.js" >
<script type="text/javascript">
    
    $("input[name='uname']").val("administrator");
    var v = $("input[name='uname']").val();
    alert(v);
    //text与html方法最大的区别在于对文本中的html标签是否进行转义
    //$("span.myclass").text("锄禾日当午，汗滴禾下土");
    $("span.myclass").html("<b>锄禾日当午，汗滴禾下土</b>")
    //不用传参数就是获取
    var vspan = $("span.myclass").html();
    alert(vspan);

在这里插入图片描述

9.jQuery事件处理方法

on(“click”,function) -为中的页面元素绑定单击事件
click(funciton) -是绑定事件的简写形式
处理方法中提供了envent参数包含了事件的相关信息

鼠标事件
click
dblcick
mouseenter
mouseleave
mouseover

键盘事件
keypress
keydown
keyup

表单事件
submit
change
focus
blur

文档/窗口事件
load
resize
scroll
unload

<script type="text/javascript" src="js/jquery-2.0.0.min.js" ></script>
<script type="text/javascript">

    $("p.myclass").on("click",function () {
        //$(this)是指当前事件产生的对象
        $(this).css("background-color","yellow");
    });
    $("span.myclass").click(function () {
        $(this).css("background-color","lightgreen");
    });
    $("input[name='uname']").keypress(function (event) {
        console.log(event);
        if (event.keyCode==32) {
            $(this).css("color", "red")
        }
    })
</script>

在这里插入图片描述

今天没有bug

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

这里写目录标题1.基本选择器1.1 Web页面开发的两个要素1.2 jQyery选择器1.3 基本选择器二级目录三级目录1.基本选择器1.1 Web页面开发的两个要素在使用HTML开发页面时，有两个基本点:选择HTML页面上哪些元素在这些有页面上做哪些动作1.2 jQyery选择器jQuery选择器用于选中需要操作的页面元素语法1：jQuery（选择器表达式）语法2：$(选择器表达式)1.3 基本选择器基本选择器是jQuery最基本也是最常用的选择器表达式语
复制链接

扫一扫