Jquery——方法使用④

最新推荐文章于 2024-10-04 09:54:19 发布

Zjaun

最新推荐文章于 2024-10-04 09:54:19 发布

阅读量218

点赞数

CC 4.0 BY-SA版权

分类专栏： JQ 文章标签： JQuery

本文链接：https://blog.youkuaiyun.com/Zjaun/article/details/87207912

JQ 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了jQuery中的一些选择器的使用，如隔行变色、过滤选择器（`:even`、`:odd`、`:lt`）以及基本选择器和子类后代选择器。同时，讲解了DOM对象与jQuery对象的区别和转换方法，包括`getElementsByTagName()`和`getElementsByName()`。最后，提到了jQuery的入口函数和简单的应用实例。

隔行变色

设定10个<li>标签

<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
<li>我是第10个li</li>
</ul>

隔行显示颜色

<script src="jquery-1.12.4.js"></script>
<script>
	$(function () {
		// var lis = document.getElementsByTagName('li');
		var lis = $("li");
		for (var i = 0; i < lis.length; i++) {
			if (i % 2 == 0) {
				// lis:jq对象
				// lis[i]:DOM对象，通过下标取出来了
				lis[i].style.backgroundColor = "pink";
		} else {
			lis[i].style.backgroundColor = "hotpink";
			}
		}
	});
</script>

在这里插入图片描述

利用过滤选择器

<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
	//下标为偶数，过滤
	$("li:even").css("backgroundColor", "red");
	$("li:odd").css("backgroundColor", "cyan");
	$("li:lt(1)").css("fontSize", "32px");
});
</script>

选择每个相隔的（偶数）元素：
$(“tr:even”)
http://www.w3school.com.cn/jquery/selector_even.asp

选择每个相隔的（奇数）元素：
$(“tr:odd”)
http://www.w3school.com.cn/jquery/selector_odd.asp

:lt 选择器选取带有小于指定 index 值的元素。
index 值从 0 开始。
经常与其他元素/选择器一起使用，来选择指定的组中特定序号之前的元素（如上面的例子）。

$(":lt(index)")
选择前 2 个 <tr> 元素：
$("tr:lt(2)")

http://www.w3school.com.cn/jquery/selector_lt.asp

基本选择器

<body>

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li id="four">4</li>
<li>5</li>
<li class="green yellow">6</li>
<li class="green">7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>

<div class="green">111</div>
<div class="green">111</div>
<div class="green">111</div>
<div class="green">111</div>

<script src="jquery-1.12.4.js"></script>
<script>
//入口函数
$(function () {
//jquery如何设置样式
//css(name, value)
//name:样式名 value：样式值
//id选择器 $("#id")

//$("#four").css("backgroundColor", "red");
//$(".green").css("backgroundColor", "green");
//$("li").css("color", "red");

//交集 并集
//$("#four,.green").css("backgroundColor", "pink");
//$("li.green").css("backgroundColor", "red");
$(".green.yellow").css("backgroundColor", "pink");
});
</script>
</body>

子类后代选择器

$(function () {
	//$("s1,s2")// 并集选择器
	//$("s1 s2")// 后代选择器
	//$("s1>s2")// 子代选择器

	//$("li.green")
	//$("s1s2") //交集选择器
	//$("#father>p").css("backgroundColor", "red");
	$("#father p").css("backgroundColor", "red");
	});

getElementsByTagName()

该方法可返回带有指定标签名的对象的集合。
http://www.w3school.com.cn/jsref/met_doc_getelementsbytagname.asp
相关代码

<script type="text/javascript">
function getElements()
{
var x=document.getElementsByTagName("input");
alert(x.length);
}
</script>

<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="How many input elements?" />

getElementsByName()

该方法可返回带有指定名称的对象的集合。
http://www.w3school.com.cn/jsref/met_doc_getelementsbyname.asp
相关代码

function getElements()
{
var x=document.getElementsByName("myInput");
alert(x.length);
}
</script>

<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="How many elements named 'myInput'?" />

DOM对象（js对象）与jq对象

<ul>
<li id="cloth">衣服</li>
<li>裤子</li>
<li>裤衩子</li>
<li>袜子</li>
</ul>

$(function () {
	var cloth = document.getElementById("cloth");
	var $li = $("li");
	$li[1].style.backgroundColor = "red";
	$li.get(2).style.backgroundColor = "yellow";
});

什么是DOM对象(js对象):使用js的方式获取到的元素就是js对象（DOM对象）
var cloth = document.getElementById(“cloth”);
cloth.style.backgroundColor = “pink”;
什么是jq对象：使用jq的方式获取到的元素就是jq对象
var $li = $(" l i "); c o n s o l e . l o g ($ li);
$li.text(“我改了内容”);
jq对象与js对象的区别
js对象对象不能调用jq对象的方法
var cloth = document.getElementById(“cloth”);
cloth.text(“呵呵”);
jq对象与js对象的联系（jq对象其实就是js对象的一个集合，伪数组，里面存放了一大堆的js对象）（宏观上）
jquery对象能不能调用DOM对象的方法
var $li = $(“li”);
$li[0].setAttribute(“name”,“hehe”);
DOM无法调用jQuery对象的方法：为什么：因为是两个不同对象
DOM对象调用jQuery对象的方法。需要把DOM对象转换成jQuery对象。

DOM对象就变成jQuery对象
$(cloth).text(“呵呵”);
jQuery对象怎么转换成DOM对象（取出来）

联系：
DOM–> jQuery $()
jQuery–》 DOM $li[0] $li.get(0)

jquery入口函数

<script>
	//js的入口函数执行要比jQuery的入口函数执行得晚一些。
	//jq的入口函数会等待页面的加载完成才执行，但是不会等待图片的加载。
	//js的入口函数会等待页面加载完成，并且等待图片加载完成才开始执行。
	window.onload = function () {
		console.log("我是js的入口函数");
	};
	//认识
	$(document).ready(function () {
		console.log("这是jQuery入口函数的第一种写法");
	});
	$(function () {
		console.log("这是jQuery入口函数的第二种写法");
	});
</script>

JQ简单例子

<style>
div {
height: 200px;
margin-bottom: 10px;
background-color: #a43035;
display: none;
}
</style>
<!--1. 需要引入jQuery文件-->
<script src="jquery-1.12.4.js"></script>
<script>
//2. 入口函数的标准
$(document).ready(function(){
	//注册事件，把on去掉，是一个方法
	$("#btn1").click(function () {
	//隐式迭代：偷偷的遍历，jQuery会自动的遍历，不需要我们遍历。
	$("div").show(1000);//设置动画效果，显示方式和显示速度
});
$("#btn2").click(function () {
		$("div").text("我是内容");
	});
});
</script>

<input type="button" value="btn1" id="btn1">
<input type="button" value="设置内容" id="btn2">
<div></div>
<div></div>
<div></div>