3-7 jQuery选择器

最新推荐文章于 2024-05-27 08:33:53 发布

啊哈在下

最新推荐文章于 2024-05-27 08:33:53 发布

阅读量601

点赞数 1

文章标签： jquery css html

本文链接：https://blog.csdn.net/siebo/article/details/122561572

版权

1.JQuery的使用

引入CSS文件

<link rel="stylesheet" type="text/css" href="../css/main.css" />

引入jquery文件

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

2.选择器类型

首先声明的页面结构

<body>
		<input type="text" id="t1" class="i1" placeholder="文本框1"/>
		<input type="text" id="t2" placeholder="文本框2"/>
		<div>
			<p>第一级p标签</p>
			<span>
				<p>第二级p标签</p>
			</span>
		</div>
		<input type="password" id="p1" placeholder="密码框1"/>
		
		<input type="button" value="测试"  onclick="test();"/>
	</body>

页面包括两个文本框
一个<div分区>，子类一级标签p
span标签类中的标签p
密码输入框以及测试按钮

2.1 ID选择器

var v = $("#t1").val();

根据id属性选择，并获取对应值

2.2 class选择器

var v = $(".i1").val();

根据所属类选择，并获取其对应值

2.3 标签选择器

var arr = [];
arr = $("input");//获取所有input标签对象
for (var i = 0; i < arr.length; i++) {
		console.info(arr[i].value);
}

根据其(input,div等)标签进行选择，因为返回的事所有标签(input)相同的对象，所以应该使用数组进行存储。

2.4 属性选择器

获取所有type属性=password的input标签对象

var v = $("input[type=password]").val();
console.info(v);

根据其type属性进行选择，返回type属性均相等的对象(如均为button,password等)。

2.5 层次选择器

5.1 后代选择器$(“M N”)
选择M元素内部的所有后代元素N(所有后代儿子孙子啥的都算)

var content = $("div p").text();

5.2 子代选择器$(“M>N”)
选择M元素内部第一级的子代元素(只有儿子)

var content = $("div>p").text();

5.3 兄弟选择器$(“M~N”)
选择M元素后所有同级的N元素(兄弟姐妹同一辈的都算)

var arr = [];
arr =  $("div~input");
for (var i = 0; i < arr.length; i++) {
		console.info(arr[i].value);
}

5.4 相邻选择器$(“M+N”)
选择M元素相邻的下一个元素N(M元素与N元素平级)

 var arr = [];
 arr =  $("div+input")
for (var i = 0; i < arr.length; i++) {
		console.info(arr[i].value);
}

3.伪类选择器

界面类型

<body>
		<span id="aspan">123123</span>
		<div id="d">
			<input type="text" id="t1" value="a" disabled="disabled"/>
			<br>
			<input type="text" id="t2" value="b" readonly="readonly" />
			<br>
			<input type="text" id="t3" value="c" />
			<br>
			<input type="text" id="t4" value="d" />
			<br>
			<input type="text" id="t5" value="e" />
			<br>
		</div>
		<div>
			<input type="checkbox" name="city" value="1">北京
			<input type="checkbox" name="city" value="2">上海
			<input type="checkbox" name="city" value="3">广州
			<!-- 上传文件控件 -->
			<input type="file" id="file1" />
			<select>
				<option value="a">济南</option>
				<option value="b">青岛</option>
				<option value="c">德州</option>
			</select>
		</div>
		<input type="submit" value="提交按钮"/>
		<button onclick="test();" value="123" >测试</button>
	</body>

类型总结
jquery中常见的伪类选择器有6种：
1 简单伪类选择器
2 子元素伪类选择器
3 可见性伪类选择器
4 内容伪类选择器
5 表单伪类选择器
6 表单属性伪类选择器
仅作重点介绍

3.1 简单伪类选择器

:first 选择某元素的第一个元素对象
:last 选择某元素的最后一个元素对象
:odd 选择某元素的索引值为奇数的元素
:even 选择某元素的索引值为偶数的元素
:eq(index) 选择给定索引值的元素，索引值index是一个整数，从0开始

var arr = [];
arr = $("input:eq(4)")
for(var i = 0; i < arr.length; i++){
		console.info(arr[i].value);
}

3.3 可见性伪类选择器

:hidden 选取所有不可见的元素
:visible 选取所有可见元素

var arr = [];
arr = $(":visible");
for (var i = 0; i < arr.length; i++) {
		console.info(arr[i].id);
}

3.5 表单伪类选择器

:input 选择所有input元素，示例：$(":input")
:button 选择所有普通按钮，即type="button"的input元素或button元素
:submit 选择所有提交按钮
:reset 选择所有重置按钮
:text 选择所有单行文本框
:textarea 选择所有多行文本框
:password 选择所有密码框
:radio 选择所有单选按钮
:checkbox 选择所有复选框
:image 选择所有图像域
:hidden 选择所有隐藏域
:file 选择所有文件域

3.6 表单属性伪类选择器

:checked 选择所有被选中的表单元素，一般用于radio和checkbox ,示例：$(":checkbox:checked");
option:selected 选择所有被选中的option元素
:enabled 选择所有可用元素，一般用于input/select/textarea
:disabled 选择所有不可用元素，一般用于input/select/textarea
:read-only 选择所有只读元素，一般用于input/textarea
:focus 选择获得焦点的元素

var arr = [];
 // arr = $("input[type=text]:read-only");
arr = $(":focus");
for (var i = 0; i < arr.length; i++) {
		console.info(arr[i].value);
 }

4 JQuery对属性标签的操作

界面情况

<body>
		<input type="text" id="i1" value=""/>
		<div style="border: 1px solid black;" >
			<p id="p1" align="left">hello<br>world</p>
		</div>
		<button onclick="test();">按钮</button>
		
	</body>

4.1 获取（查）、设置（改）标签属性

一般在jquery中，方法既能set也能get
4.1.1 attr()常规标签属性操作方法
获取指定属性值,如果没有该属性返回undefined

var a = $("#p1").attr("color");

添加/更改属性值

 $("#i1").attr("value","1");

获取标签对象的value属性值

console.info($("#i1").val());

4.1.2 prop()表单属性操作方法

var v = $("#i1").prop("value");
console.info(v);

表单元素属性赋值

 $("#i1").prop("value","你好");

4. 2 CSS样式属性修改

添加class属性值

 $("#p1").addClass("p_class p_class2");//p.class = ?

删除class属性值

$("#p1").removeClass("p_class2");

获取（查）、设置（改）CSS

var b = $("div").css("border");

设置CSS样式

$("div").css("width","50%");

设置多个CSS属性值

$("div").css({
"width":"50%",
"height":"100px",
"background-color":"orange"
});

4.3 标签文本操作

查询标签本文内容

var tx = $("p").text();
console.info(tx);
var ht = $("p").html();
console.info(ht);

设置标签文本内容

var c = $("p").html();
$("p").html(c+"123");

4.4 获取、设置尺寸

 $("div").height(10);
 $("div").width(600);

啊哈在下

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3-7 jQuery选择器

1.JQuery的使用引入CSS文件<link rel="stylesheet" type="text/css" href="../css/main.css" />引入jquery文件<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
复制链接

扫一扫