【jQuery】基础知识梳理笔记

最新推荐文章于 2024-05-21 19:09:41 发布

VIP文章源星海

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量1.6k

点赞数 1

分类专栏：初学笔记文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_49467214/article/details/121932502

版权

jQuery(网页特效)

简介:

jQ是由漂亮国人…于2006年创建

jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装

他的设计思想是write less ,do more 很多时候他只需要一行代码就可以解决css,js需要大量代码才能解决的问题

形式例如: $(“tr:even”).css(“background-color”,"#0000");

功能与优势

功能:

f访问和操作DOM元素

控制页面样式

对页面事件进行处理

扩展新的jQuery插件

与Ajax计数完美结合
优势

t体积小,压缩后只有100k左右

强大的选择器

出色的DOM封装

可靠的时间处理机制

出色的浏览器兼容性

使用隐式迭代简化编程

丰富的插件支持

安装运行

jQuery库文件–官网: http://jquery.com

开发版与发布板

名称	大小	说明
jQuery-3.版本号.js (开发版)	约286kb	完整无压缩版本,主要用于测试开发跟学习
jQuery-3.版本号.min.js (发布版)	约94kb	经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目

jQuery基本语法结构

<!-- 教材 -->
<script>
     $(document).ready(function() {
     
        alert("我欲奔赴沙场征战jQuery，势必攻克之！");
    });
</script>
---------------------------------------------------------
<!-- 老师讲的 -->
<body>
		<!-- 引入jQuery -->
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<!-- 写代码的部分 -->
		<script type="text/javascript">
			// 绑定页面加载事件 ready:当dom界面加载完就会执行  而且一个页面中可以写多个
			// 与window.onload 区别   onload:只会加载一次 页面中的所有元素加载完才会执行
			$(document).ready(function(){
     
				alert("Hello jQuery")
			})
		</script>
	</body>

$(document).ready()与window.onload

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行	网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
编写个数	同一页面不能同时编写多个	同一页面能同时编写多个
简化写法	无	$(function(){ //执行代码 });

jQuery选择器

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作
基础语法是：$(selector).action()

基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器

名称	语法构成	描述	示例
标签选择器	element	根据给定的标签名匹配元素	$(“h2” )选取所有h2元素
类选择器	.class	根据给定的class匹配元素	$(" .title")选取所有class为title的元素
ID选择器	#id	根据给定的id匹配元素	$(" #title")选取id为title的元素
并集选择器	selector1,selector2,…,selectorN	将每一个选择器匹配的元素合并后一起返回	$(“div,p,.title” )选取所有div、p和拥有class为title的元素
全局选择器	*	匹配所有元素	$("*" )选取所有元素

示例:

<!-- <!DOCTYPE html> -->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图书简介</title>
    <link rel="stylesheet" href="css/bookStyle.css">
</head>
<body>
<section id="book">
    <div class="imgLeft"><img src="images/store.jpg" alt="岛上书店"></div>
    <div class="textRight">
        <h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>
        <p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>
        <p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p>
        <div class="price">
            <div id="jdPrice">京东价： <span>￥24.10</span> [6.9折] <p>[定价：<span>￥35.00</span>]</p> (降价通知)</div>
            <p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>
            <dl>
                <dt>以下促销可在购物车任选其一</dt>
                <dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
                <dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd>
            </dl>
            <p id="ticket">领 券：<span>105-6</span>  <span>200-16</span></p>
        </div>
    </div>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
	//全局选择器
    $("*").css("font-weight","bold")
    //并集选择器
	$(".intro,dd").css("color","#ff0000")
	// 执行jquery代码	
	// $(function(){  // 等价于ready
	// 	alert("我欲学习jquery,必将征战沙场")
	// })
    //id选择器
	$("#author").css("color","#6b8fe3")
	// 1.展示dd中的内容
	$("dd").css("display","block")
	// 2.使用标签选择器 改变标题颜色
	$("h1").css("color","blue")  // 单个样式
	//类选择器
	$(".price").css({
        // 多个样式
		"background":"#efefef",
		"padding":"5px",
        "color":""
	})
</script>
</body>
</html>

层次选择器

层次选择器通过DOM 元素之间的层次关系来获取元素

名称	语法构成	描述	示例
后代选择器	ancestor descendant	选取ancestor元素里的所有descendant（后代）元素	$("#menu span" )选取#menu下的< span>元素
子选择器	parent>child	选取parent元素下的child（子）元素	$(" #menu>span" )选取#menu的子元素< span>
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(" h2+dl " )选取紧邻< h2>元素之后的同辈元素< dl>
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings元素	$(" h2~dl " )选取< h2>元素之后所有的同辈元素< dl>

示例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图书简介</title>
    <link rel="stylesheet" href="css/bookStyle.css">
</head>
<body>
<section id="book">
    <div class="imgLeft"><img src="images/store.jpg" alt="岛上书店"></div>
    <div class="textRight">
        <h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>
        <p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>
        <p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p>
        <div class="price">
            <div id="jdPrice">京东价： <span>￥24.10</span> [6.9折] <p>[定价：<span>￥35.00</span>]</p> (降价通知)</div>
            <p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>
            <dl>
                <dt>以下促销可在购物车任选其一</dt>
                <dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
                <dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd>
            </dl>
            <p id="ticket">领 券：<span>105-6</span>  <span>200-16</span></p>
        </div>
    </div>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script >
    // 1.使用后代选择器,将所有的p标签设置为红色
    $("#book p").css("color","red")
    // 2.使用子选择器选中p标签
    $(".textRight>p").css("color","red")
    // 3.使用相邻兄弟选择器  将自营书加下划线
    $("h1+p").css("text-decoration","underline")
    //4.使用同辈兄弟选择器  将所有的p 加下划线
    $("h1~p").css("text-decoration","underline")
</script>
</body>
</html>

属性选择器

属性选择器通过HTML元素的属性来选择元素

语法构成	描述	示例
[attribute^=value]	选取给定属性是以某些特定值开始的元素	$(" [href^=‘en’]" )选取href属性值以en开头的元素
[attribute$=value]	选取给定属性是以某些特定值结尾的元素	$(" [h r e f$ =’.jpg’]" )选取href属性值以.jpg结尾的元素
[attribute*=value]	选取给定属性是以包含某些值的元素	$(" [href* =‘txt’]" )选取href属性值中含有txt的元素

示例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东快报</title>
    <link rel="stylesheet" href="css/newStyle.css">
</head>
<body>
<section id="news">
    <header>京东快报<a href="#" class="more">更多 > </a></header>
    <ul>
        <li><a href="sale.jd.com/act/h7mf8.html" class="hot"><span>[618]</span>志玲姐姐：墨镜300减30</a></li>
        <li><a href="www.jd.com/news.aspx?id=29257"><span>[公告]</span>京东无锡馆正式启动</a></li>
        <li><a href="sale.jd.com/act/k2ad45v.html"><span>[特惠]</span>99元抢平板！品牌配件199-100</a></li>
        <li><a href="www.jd.com/news.aspx?id=29252"><span>[公告]</span>节能领跑京东先行</a></li>
        <li><a href="sale.jd.com/act/ugk2937w.html" class="last"><span>[特惠]</span>高洁丝实力撩货，领券五折</a></li>
    </ul>
</section>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" >
    // 使用属性选择器  将有class的背景颜色改变成灰色
    //$("a[class]").css("background","#e1e1e1")
    // 使用属性选择器修改class属性为last 的背景颜色
    //$("a[class=last]").css("background","#d5f6d4")
    // 选中属性href以sale开头开头的元素(开头)
    //$("a[href^=sale]").css("background","#dbaeea")
    // 以html结尾(结尾)
    //$("a[href$=html]").css("background","#dbaeea")
    // 匹配href 带有jd(模糊匹配)
    $("a[href*=jd]").css("background","#f36b8b")
</script>
</body>
</html>

过滤选择器

通过特定的过滤规则来筛选出所需的元素

主要分类
基本过滤选择器
可见性过滤选择器
表单对象过滤选择器
内容过滤选择器、子元素过滤选择器…

基本过滤选择器

语法	描述	示例
:eq(index)	选取索引等于index的元素（index从0开始）	$(“li:eq(1)” )选取索引等于1的元素
:gt(index)	选取索引大于index的元素（index从0开始）	$(" li:gt(1)" )选取索引大于1的元素（注：大于1，不包括1）
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的元素（注：小于1，不包括1）
:header	选取所有标题元素，如h1~h6	$(":header" )选取网页中所有标题元素
:focus	选取当前获取焦点的元素	$(":focus" )选取当前获取焦点的元素
:animated	选择所有动画	$(":animated" )选取当前所有动画元素
[:even]	所有偶数
$(“tr:even”).css(“background”,“deeppink”)
[:odd]	所有奇数
$(“tr:odd”).css(“background”,“deeppink”)

元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。

示例:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>仿冬奥列表内容</title>
	 <link rel="stylesheet" href="css/games.css">
 </head>
 <body>
	<div class="contain">
		<h2>祝福冬奥</h2>
			
		<ul>
			<li>喜欢那一条: <input onfocus="tofocus()" type="text" value="请选择"></li>
			<li onmouseover="toOver()" id="ov" > 贝克汉姆：衷心希望北京能够申办成功！</li>
			<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
			<li class="not"> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>
			<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
			<li> 赵宏博：北京申办冬奥会是再合适不过了！</li>
			<li> 你喜欢哪些冬季运动项目？(点击进入调查页)</li>
		</ul>
	</div>
	<script src="js/jquery-1.12.4.js"></script>
	<script >


		function tofocus(){
       // 当获取焦点时执行此方法
			// 选中获取焦点的元素
			$("ul li input:focus").val("")
		}


		function  toOver(){
     
			// jquery动画
			$("li").animate({
     fontSize:20},"slow") //  设置字体大小
			$("li").animate({
     fontSize:40},"slow",toOver) // 重复调用

			// 选中所有的动画元素
			$(":animated").css("background","red")
		}

		// 选中第一个li
		//$("ul li:first").css("color","#99d970")
		// 选中最后一个li
		//$("ul li:last").css("color","#76b7e0")
		// 不选中某个
		//$("ul li:not(.not)").css("background","#1fdbe1")

		// 偶数小猪佩奇色
		//$("ul li:even").css("background","deeppink")

		// 奇数设置为 跳跳虎
		//$("ul li:odd").css("background","yellow")

		// 选中第二个li
		//$("li:eq(1)").css("background","red")

		// 选中下标大于2 的li
		//$("li:gt(2)").css("background","red")

		// 下标小于2
		//$("li:lt(2)").css("background","red")

		// 选中所有的标题
		//$(".contain :header").css("background","red")
	</script>
 </body>
</html>

可见性过滤选择器

通过元素显示状态来选取元素

语法	描述	示例
:visible	选取所有可见的元素	$(":visible" )选取所有可见的元素
:hidden	选取所有隐藏的元素	$(":hidden" ) 选取所有隐藏的元素

$(“p:hidden”).show();
$(“p:visible”).hide();

示例:

<!DOCTYPE html>
<html>

最低0.47元/天解锁文章

源星海

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
【jQuery】基础知识梳理笔记

jQuery(网页特效)简介:jQ是由漂亮国人…于2006年创建jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装他的设计思想是write less ,do more 很多时候他只需要一行代码就可以解决css,js需要大量代码才能解决的问题形式例如: $(“tr:even”).css(“background-color”,"#0000");功能与优势功能:f访问和操作DOM元素控制页面样式对页面事件进行处理扩展新的jQuery插件
复制链接

扫一扫