jQuery入门--选择器

最新推荐文章于 2024-04-23 15:19:32 发布

X4866233

最新推荐文章于 2024-04-23 15:19:32 发布

阅读量630

点赞数

文章标签： jquery javascript ecmascript

本文链接：https://blog.csdn.net/X4866233/article/details/123562054

版权

1.What？
jQuery是什么？

jQuery是JavaScript库的一种，其中封装了很多JS代码。

常见的JavaScript库有：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto。

jQuery的官方网站:jQuery

2.Why?
为什么要学习jQuery？

(1) 为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件(2)jQuery的优势：
轻量级。核心文件才几十kb，不会影响页面加载速度
跨浏览器兼容。基本兼容了现在主流的浏览器
链式编程、隐式迭代
对事件、样式、动画支持，大大简化了DOM操作
支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
免费、开源

3.Where?
哪些情况下使用？

(1).中大型网站开发。

(2).是一些前端框架的基础，比如EasyUI等。

4.How?

这样使用？

使用jQuery步骤
1.下载jQuery库
开发版本：jquery-3.3.1.js
生产版本：jquery-3.3.1.min.js
2.引入：将js文件复制到项目中
3.使用

5.选择器

jQuery中的选择器就是一个标记
jQuery中常见的选择器：
ID，class，element，子代，后代，相邻兄弟，分组...选择器

6.案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
     //加载函数
	$(function(){
		// alert("123");
		//ID选择器
	    //找到id为xyc的标签设置color字体颜色
		//一个属性设置
		// $("#xyc").css("color","red");
		//多个属性设置
		// {"属性":"属性值","属性":"属性值"}
		// $("#xyc").css({
		// 	"background":"red",
		// 	"color":"yellow"
		// })
		
		//类选择器 class  获取一组元素
		// $(".sb").css("background","red")
		
		//元素选择器   获取一组元素
		// $("li").css("background","red")
		
		//通配符选择器  
		// $("*").css("background","red")
		
		//群组选择器，可以同时设置多个标签的样式
		// $("#xyc,.yyds").css("background","red")
		
	    //设置ul下的子代 li 的字体颜色
		// $("ul>li").css("color","red")
		
		//所有后代
		// $("ul li").css("color","red")
		
		//过 Lu(绿) 选择器
		// :first 获取第一个节点
		// $("#xyc>li:first").css("background","red")
	
	    // :last 获取最后一个节点
	    // $("#xyc>li:last").css("background","red")
		
		//获取指定的节点  通过下标
	    // $("#xyc>li:eq(2)").css("background","red")
	 
	    //even 奇数 过绿下标为偶数，位置为奇数的标签
		// $("#xyc>li:even").css("color","red")
	
	    //odd 偶数 过绿下标为奇数，位置为偶数的标签
		// $("#xyc>li:odd").css("color","yellow")
	 
	    //gt() 大于 按下标 不包括自己
		// $("#xyc>li:gt(2)").css("color","yellow")
		//lt() 小于
	    // $("#xyc>li:lt(4)").css("color","yellow")
	
	   // 区间 设置背景颜色
	   //注意事项 gt 和 lt 混合使用，gt 在前的话，获取后的元素下标会重新编号
	  //?? // 
	  $("#xyc>li:gt(0):lt(3)").css("color","yellow")
	   	//li在前
		// $("#xyc>li:lt(4):gt(0)").css("color","yellow")
		
		
		// $("table>tbody>tr:gt(0):even").css("background","red")	
	    // $("table tr:gt(0):even").css("background","red")
		// $("table tr:gt(0):odd").css("background","blue")
		
		//找到包含 朱竹清 
		 // $("ul>li:contains('朱竹清')").css("background","red")

        //表单选择器
		// $(":input").css("background","red")




	})
	</script>
     
    </head>
	<body>
		<ul id="xyc">
			<li>item1</li>
			<p class="sb">千仞雪</p>
			<li >item2</li>
			<li>item3</li>
			<span class="sb">比比东</span>
			<li>item4 朱竹清</li>
			<li>item5</li>
			<p>胡列娜</p>
			<ol>
				<li>xy1</li>
				<li>xy2</li>
				<li>xy3</li>
				<li>xy4</li>
				<li>xy5</li>
			</ol>
		</ul>
		<hr >
		<div id="zz" class="yyds">
			朱竹清
		</div>
		<table border="1" width="100%" height="600">
			<tr style="background: pink;">
				<td>&nbsp;</td>
				<td>&nb</td>
				<td>&nb</td>
			</tr>
			<tr>
				<td>&nb</td>
				<td>&nb</td>
				<td>&nb</td>
			</tr>
			<tr>
				<td>&nb</td>
				<td>&nb</td>
				<td>&nb</td>
			</tr>
			<tr>
				<td>&nb</td>
				<td>&nb</td>
				<td>&nb</td>
			</tr>
			<tr>
				<td>&nb</td>
				<td>&nb</td>
				<td>&nb</td>
			</tr>
			<tr>
				<td>&nb</td>
				<td>&nb</td>
				<td>&nb</td>
			</tr>
			<tr>
				<td>&nb</td>
				<td>&nb</td>
				<td>&nb</td>
			</tr>
			<tr>
				<td>&nb</td>
				<td>&nb</td>
				<td>&nb</td>
			</tr>
			<tr>
				<td>&nb</td>
				<td>&nb</td>
				<td>&nb</td>
			</tr>
			<tr>
				<td>&nb</td>
				<td>&nb</td>
				<td>&nb</td>
			</tr>
		</table>
      </body>

X4866233

关注

0
点赞
踩
0

收藏

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

1.What？jQuery是什么？jQuery是JavaScript库的一种，其中封装了很多JS代码。常见的JavaScript库有：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto。jQuery的官方网站:jQuery2.Why?为什么要学习jQuery？(1) 为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件(2)jQuery的优势：轻量级。核心文件才几十kb，不会影响页面加载速度...
复制链接

扫一扫