jQuery基础整理

页面代码

<!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>

    <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        document.getElementById("btnSelect").onclick=function (){
            var selector = $("#txtSelector").val();
            $("*").removeClass("highlight");
            $(selector).addClass("highlight");
        }
    </script>
</body>
</html>

jQuery基本选择器

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

层叠与属性选择器

语法	说明
$("ancestor descendant")	后代选择器：选中所有祖先标签下的所有后代标签（后代标签不需要直接关联）
$("ancestor>descendant")	子选择器，选中祖先标签下的所有直接子标签
$("prev~siblings")	兄弟选择器，选中prev标签之后的所有兄弟标签
$("selector[attribute=value]")	选中属性值等于value的组件
$("selector[attribute^=value]")	选中属性值以value开头的组件
$("selector[attribute$ =value]")	选中属性值以value结尾的组件
$("selector[attribute*=value]")	选中属性值中包含value的组件

位置与表单选择器

语法	说明
$("selector:first")	获取第一个元素
$("selector:last")	获取最后一个元素
$("selector:even")	获取偶数位置的元素（从0开始）
$("selector:even")	获取奇数位置的元素（从0开始）
$("selector:eq(n)")	获取指定位置（n）的元素（从0开始）
$("selector:input")	获取所有输入元素
$("selector:text")	获取文本框元素
$("selector:password")	获取所有密码框元素
$("selector:submit")	获取所有提交按钮
$("selector:reset")	获取所有重置按钮

操作元素属性

attr(name|properties|key): 添加元素属性
remove(name|properties|key): 移除元素属性

操作元素CSS属性

css(): 获取/设置对应元素的css属性

// 为a标签设置红色
$(a).css("color","red")
// 获取a标签的color属性
$(a).css("color")
// 一次性传入多个css属性；利用json
$(a).css({"color":"red","font-weight":"bold"})

addClass()：为对应元素添加css属性
removeClass()：为对应元素移除css属性

设置元素内容

val(): 获取或设置输入项的值
不传入参数，就是获取输入项的值
传入参数，就是设置输入项的值为传入的参数

text(): 获取或设置元素的纯文本
不将参数中的html标签进行转义，直接以文本格式输出html标签
html(): 获取或设置元素内部的html
将参数中的html标签进行转义，将标签转义成html代表的意义后输出

jQuery事件处理方法

基础写法： on("click",function) --- 为选中的页面元素绑定单击事件
简写写法： click(function(){...}）绑定事件的简写模式
处理方法中提供了event参数，包含了事件的相关信息

事件分类	事件	意义
鼠标事件	click	单击事件
	dbclick	双击事件
	mouseenter	鼠标移入事件
	mouseleave	鼠标移出事件
	mouseover	鼠标滑过事件
键盘事件	keypress	键盘的一次按下弹起
	keydown	键盘的一次按下事件
	keyup	键盘的一次弹起事件
表单事件	submit	提交
	change	改变
	focus	焦点聚焦
	blur	失去焦点
文档/窗口事件	load	加载
	resize	窗口大小发生变化
	scroll	窗口滑动
	unload	不加载

$("p.myclass).on("click",function(){
  // $(this) 指当前事件产生的对象
  $(this).css("background-color","yellow")
});
// 简写形式
$(p.myclass).click(function(){
   $(this).css("background-color","yellow")
});