jQuery-1（选择器）学习笔记

「已注销」

已于 2022-06-09 09:02:40 修改

阅读量105

点赞数

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

于 2022-05-07 17:06:26 首次发布

本文链接：https://blog.csdn.net/shanliyiyeren/article/details/124628523

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、语法：

1、引用声明：

<script src="jQuery文件URL" type="text/javascript" charset="UTF-8"></script>

2、基础语法结构：

（1）、jQuery的美元符号$是jQuery的简写

（2）、文档就绪函数写法

//写法一
$(document).ready(function(){
	//jQuery函数
})

//写法二
$(function(){
    //jQuery函数
})

二、选择器：

1、基础选择器：

// 全局选择器：选择文档中所有元素，包括<head>及<script>,运行速度较慢
$("*")

//元素选择器：选择指定元素标签
$("p") //选择所有p标签

//id选择器：选择指定id的元素
$("#test")  //选择id=test的元素

//类选择器：选择所有具有同一个指定class的元素
$(".a")  //选择class=“a”的元素

//多重选择器：选择符合条件的所有结果
$("p,hl,div") //选择文档中所有段落元素<p>、标题元素<hl>和块元素<div>

2、属性选择器：：

//带有指定属性的元素
$("[alt]")  //所有带alt属性的元素

//属性等于指定值得元素
$("[href='#']")  //所有href属性值等于#的元素

//属性不等于指定值的元素
$("[href!='#']")  //所有href属性值不等于#的元素

//属性以指定值结尾的元素
$("[src$='.png']")  //所有src属性以.png结尾的元素

//属性以指定值为开头的元素
$("input[name^='nation']")  //所有name属性以nation为开头的元素

//属性包含指定值的元素
$("input[name*='nation']")  //所有name属性包含nation的元素

3、表单选择器

//所有<input>元素
$(":input")

//所有type=“text”的<input>元素
$(":text")

//所有type=“password”的<input>元素
$(":password")

//所有type=“radio”的<input>元素
$(":radio")

//所有type=“checkbox”的<input>元素
$(":checkbox")

//所有type=“submit”的<input>元素
$("input:submit")

//所有type=“reset”的<input>元素
$(":reset")

//所有type=“button”的<input>元素
$(":button")

//所有type=“image”的<input>元素
$(":image")

//所有type=“file”的<input>元素
$(":file")

4、指定状态的表单元素选择器：

//所有启用的<input>和<button>元素
$(":enabled")

//所有被禁用的<input>和<button>元素
$(":disabled")

//下拉列表中处于被选中状态的<option>元素
$(":selected")

//所有被选中的单选按钮或者复选框
$(":checked")

5、层次选择器：

//子元素选择器:只能选择指定元素的第一层子元素
//语法：$("parent>child")
$("p>span") //p标签下面的span标签

//后代选择器:指定元素内包含的所有后代元素(可以是第n层子元素)
//语法：$(ancestor descendant) 
$("p span")  //p标签下面的span标签

//后相邻选择器:与指定元素相邻的后一个元素
//语法： $("prev+next")
 
//后兄弟选择器：指定元素后面跟随的所有符合条件的元素(可以是多个)
//语法：$("prev~siblings") 
    
//jQuery css选择器
//语法： $(selector).css(propertyName,value);
$("p").css("background-color","gray");  //将所有<p>标签背景改为灰色