web前端学习笔记——Day9(jQuery)

最新推荐文章于 2024-08-26 16:38:21 发布
最新推荐文章于 2024-08-26 16:38:21 发布
阅读量175 收藏
点赞数 1
分类专栏： web前端学习笔记 文章标签： 前端 jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43338468/article/details/90692890
版权

一、jQuery是什么？

<1>jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

<3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

<4>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

<5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择

二、什么是jQuery对象？

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的**.** 如果一个对象是 jQuery 对象**,** 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

$("#test").html()    
       //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 

       // 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 

       //虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

       //约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 

var $variable = jQuery 对象
var variable = DOM 对象

$variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

jquery的基础语法：$(selector).action()

三、寻找元素（选择器和筛选器）

3.1选择器

3.1.1基本选择器

$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

3.1.2层级选择器

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

3.1.3基本筛选器

$("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")

3.1.4属性选择器

$('[id="div1"]')   $('["alex="sb"][id]')

3.1.5表单选择器

$("[type='text']")----->$(":text")         
注意只适用于input标签  : $("input:checked")

举例：
<!DOCTYPE html>
<html>
<head>
	<title>寻找元素（选择器和筛选器）</title>
</head>
<body>
	<div>hello xjy</div>
	<a href="">点我啊</a>
	<p id="p1" alex="sb">nihaoa</p>
	<p id="p2" alex="sb">nihaoa</p>
	<div class="outer">
		outer
		<div class="inner">
			inner
			<p>inner 2</p>
		</div>
		<p>wzq</p>
	</div>
	<p>xialv</p>
	<div class="outer2">div1</div>



	<ul>
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
	</ul>


	<input type="text" name="">
	<input type="checkbox" name="">
	<input type="submit" name="">
</body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js"></script>
<script type="text/javascript">
	//基本选择器

	// // $("div").css("color","red");
	// $("*").css("color","red");
	// $("#p1").css("color","yellow");
	// $(".outer").css("background-color","green");
	// $(".inner,p,a").css("background-color","blue");



	//层级选择器

	//$(".outer p").css("color","red");
	//后代选择器(不只是儿子，也可以是孙子，只要是后代就行)

	//$(".outer>p").css("color","red");
	//子代选择器（只能是儿子）

	//$(".outer+p").css("color","red");
	//毗邻选择器（即兄弟选择器且必须是下面的还要紧挨着）

	//$(".outer~p").css("color","red");
	//毗邻选择器（即兄弟选择器且必须是下面的但不需要紧挨着）



	//基本筛选器

	//$("li")//这拿到的是一个数组，里面有四个li标签
	//$("li:first").css("color","red");
	//拿到其中第一个
	//$("li:last").css("color","red");
	//拿到其中最后一个
	//$("li:eq(2)").css("color","red");
	//eq()，括号里面写索引，从0开始
	//$("li:even").css("color","red");
	//控制所有偶数行
	//$("li:odd").css("color","yellow");
	//控制所有奇数行
	//$("li:gt(1)").css("color","yellow");
	//从第三个开始向后面的改变（它的后面，不包括它）
	//$("li:lt(2)").css("color","yellow");
	//从第二个开始向前面改变（它的前面，不包括它）


	//属性选择器

	//$("[alex='sb'][id='p1']").css("color","blue");



	//表单选择器
	//$(":text").css("width","500px")
</script>
</html>

3.2筛选器

3.2.1过滤筛选器

$("li").eq(2)  $("li").first()  $("ul li").hasclass("test")//判断是不是有class叫test的属性，返回一个布尔值

3.2.2查找筛选器（极其重要）

 $("div").children(".test")     $("div").find(".test") 
 选子代和后代
                               
 $(".test").next()    $(".test").nextAll()    $(".test").nextUntil() 
 选下面的一个和多个兄弟
                           
 $("div").prev()  $("div").prevAll()  $("div").prevUntil()   
   选上面的一个和多个兄弟
   
 $(".test").parent()  $(".test").parents()  $(".test").parentUntil() 
 选父亲和祖宗

 $("div").siblings()选上下兄弟

eg：举例：
<!DOCTYPE html>
<html>
<head>
	<title>筛选器</title>
</head>
<body>
	<div>hello xjy</div>
	<a href="">点我啊</a>
	<p id="p1" alex="sb">nihaoa</p>
	<p id="p2" alex="sb">nihaoa</p>

	<div class="outer">
		outer
		<div class="inner">
			inner
			<p>inner 2</p>
		</div>
		<p>wzq</p>
	</div>
	<p>xialv</p>
	<div class="outer2">div1</div>

	<ul>
		<li>111</li>
		<li id="end2">222</li>
		<li>333</li>
		<li>444</li>
		<li>555</li>
		<li>666</li>
		<li>777</li>
		<li id="end">888</li>
		<li>999</li>
	</ul>


	<input type="text" name="">
	<input type="checkbox" name="">
	<input type="submit" name="">
</body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js"></script>
<script type="text/javascript">
	//筛选器
	//$("li").eq(2).css("color","red");
	//$("li").first().css("color","yellow");
	//$("li").last().css("color","yellow");

	//查找筛选器

	//$(".outer").children("p").css("color","red");
	//查找子标签（儿子）
	//$(".outer").find("p").css("color","green");
	//查找后代中所有的p标签

	//$("li").eq(2).next().css("color","green");
	//第三个标签下面的第一个兄弟元素（即第四个）
	//$("li").eq(2).nextAll().css("color","green");
	//第三个标签下面的所有兄弟元素
	//$("li").eq(2).nextUntil("#end").css("color","green");
	//第三个标签下面的兄弟和id=end之前的兄弟之间元素，不包括两边

	//$("li").eq(6).prev().css("color","green");
	//第7个标签上面的第一个兄弟元素（即第五个）
	//$("li").eq(6).prevAll().css("color","green");
	//第7个标签上面的所有兄弟元素
	//$("li").eq(6).prevUntil("#end2").css("color","green");
	//第7个标签上面的兄弟和id=end2之后的兄弟之间元素，不包括两边

	//console.log($(".outer .inner p").parent().html())
	//找父标签
	//$(".outer .inner p").parents().css("color","red")
	//不停的向上找一直找到最上面（基本不用）
	//$(".outer .inner p").parentsUntil("body").css("color","red")
	//不停的向上找一直找到body的下面

	//$(".outer").siblings().css("color","red")
	//它上下的所有的兄弟标签
</script>
</html>

3.3实例之左侧菜单

<!DOCTYPE html>
<html>
<head>
	<title>左侧菜单</title>
	<style type="text/css">
		.menu{
			height: 500px;
			width: 30%;
			background-color: gray;
			float: left;
		}
		.content{
			width: 70%;
			height: 500px;
			background-color: red;
			float: left;
		}
		.title{
			line-height: 50px;
			background-color: green;
			color: yellow;
		}
		.hide{
			display: none;
		}
	</style>
</head>
<body>
	<div class="outer">
		<div class="menu">
			<div class="item">
				<div class="title">菜单一</div>
				<div class="con">
					<div>111</div>
					<div>222</div>
					<div>333</div>
				</div>
			</div>
			<div class="item">
            	<div class="title">菜单二</div>
            	<div class="con hide">
                	<div>www</div>
                	<div>zzz</div>
                	<div>qqq</div>
            	</div>
        	</div>
        	<div class="item">
            	<div class="title">菜单三</div>
           	 	<div class="con hide">
                	<div>xxx</div>
                	<div>jjj</div>
                	<div>yyy</div>
            	</div>
        	</div>
		</div>
		<div class="content"></div>
	</div>
</body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js"></script>
<script type="text/javascript">
	$(".item .title").click(function(){
		$(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");



		//$(this).next().removeClass("hide");
		//$(this).parent().siblings().children(".con").addClass("hide");
	})
</script>
</html>

3.4实例之tab切换

<!DOCTYPE html>
<html>
<head>
	<title>tab切换</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		.tab_outer{
			margin: 0px auto;
			width: 60%;
			background-color: gray;
		}
		.menu{
			background-color: #cccccc;
			line-height: 40px;
			border: 1px solid red;
		}
		.menu li{
			display: inline-block;
		}
		.menu a{
			border-right: 1px solid yellow;
			padding: 11px;
		}
		.content{
			background-color: tan;
			border: 1px solid green;
			height: 300px;
		}
		.hide{
			display: none;
		}
		.current{
			background-color: darkgray;
			color: yellow;
			border-top: 2px solid rebeccapurple;
		}
	</style>
</head>
<body>
	<div class="tab_outer">
		<ul class="menu">
			<li xxx="c1" class="current" onclick="tab(this)">
				菜单一
			</li>
			<li xxx="c2" onclick="tab(this)">菜单二</li>
			<li xxx="c3" onclick="tab(this)">菜单三</li>
		</ul>
		<div class="content">
			<div id="c1">内容一</div>
			<div id="c2" class="hide">内容二</div>
			<div id="c3" class="hide">内容三</div>
		</div>
	</div>
</body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js"></script>
<script type="text/javascript">
	function tab(self){
		var index=$(self).attr("xxx");
		$("#"+index).removeClass("hide").siblings().addClass("hide");
		$(self).addClass("current").siblings().removeClass("current")
	}
</script>
</html>
小小鱼@✔
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
黑马程序员前端JavaScript高级——ES6学习笔记
weixin_44566194的博客
10-29 2933
黑马程序员前端教程的PPT和代码学习笔记，里面包含了面向对象的编程思想，以及构造函数，类和对象、原型链、箭头函数、数组和字符串新增方法、函数递归、深拷贝浅拷贝、正则表达式等知识点。本文是对CSDN其他博主记录的一个补充，因为黑马也是今年才陆续补充一些知识点的视频的，本文将其收录于此，雷同勿怪。
中软Day11——Web前端开发
qq_43542290的博客
11-19 263
中软Day16 移动Web开发 基础开发 屏幕 移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面 。通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量） ​ 而分辨率则一般用像素来度量 px，表示屏幕水平和垂直方向的像素数，例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成 （常规下手机和PC的垂...
web前端学习笔记——Day11
qq_43338468的博客
05-30 300
六、动画效果 6.1显示隐藏 hide show toggle三个函数方法 <!DOCTYPE html> <html> <head> <title>显示隐藏</title> </head> <body> <p>hello</p> <button id="hide">...
web前端学习笔记——Day10
qq_43338468的博客
05-30 177
四、操作元素（属性，css，文档处理） 4.1属性操作 --------------------------属性 $("").attr();//拿到属性对应的值 $("").removeAttr();// $("").prop(); $("").removeProp(); 如果是固有的属性，就用prop，如果是自己定义的属性，就用attr --------------------------CSS...
Web前端学习笔记——Ajax
唯恋殊雨的博客
09-25 938
1. 概述 Web 程序最初的目的就是将信息（数据）放到公共的服务器，让所有网络用户都可以通过浏览器访问。 在此之前，我们可以通过以下几种方式让浏览器发出对服务端的请求，获得服务端的数据： 地址栏输入地址，回车，刷新 特定元素的 href 或 src 属性 表单提交 这些方案都是我们无法通过或者很难通过代码的方式进行编程（对服务端发出请求并且接受服务端返回的响应）， 如果我们可以...
Django学习笔记——Day16
qq_43338468的博客
06-01 238
四Django的配置文件（settings） 4.1静态文件设置 4.1.1概述 #静态文件交由Web服务器处理，Django本身不处理静态文件。简单的处理逻辑如下(以nginx为例)： # URI请求-----> 按照Web服务器里面的配置规则先处理，以nginx为例，主要求配置在nginx. #conf里的location ...
web前端学习笔记之JavaScript
m0_49101782的博客
04-09 2805
JavaScript 01 JavaScript简介 JS：解释型语言，不需要编译，代码的执行是从上到下一行行执行的，上一行没执行，下一行就不会执行。 BOM：操作浏览器发生变化的属性和方法 DOM：操作文档流发生变化的属性和方法 ECMScript：书写语法和书写规则 02 JS基础 alert（num），数据出现在浏览器提示框 console.log(num)，数据输出在浏览器控制台 document.write(num)，以文档输出，也就是输出在浏览器的页面（body） 03 JS代码编写位置 1.行
Node.js学习笔记 [黑马程序员]——day1
weixin_45732235的博客
10-20 569
node.js学习笔记
python的前端框架_Python-S9——Day100-Web前端框架之Vue
weixin_39995774的博客
11-24 152
01 课程简介；02 let和const；03 箭头函数；04 对象的单体模式；05 nodejs介绍和npm操作；06 webpack、babel介绍和vue的第一个案例；07 昨日内容回顾；08 if指令和v-on指令；09 指令系统介绍1；10 指令系统介绍2；11 计算属性的使用和v-mode的实现原理；01 课程简介；1.1 视频呢少看，不能依赖视频，做笔记，加速看，辅助性质；1.2 博...
Web前端学习笔记——HTML基础.docx
11-22
Web 前端学习笔记——HTML 基础 本文主要介绍了 Web 前端学习笔记——HTML 基础相关知识点，涵盖了浏览器内核、Web 标准、HTML 语言等方面。 一、浏览器内核 浏览器内核是指浏览器核心引擎，负责解析和渲染网页。...
note:前端学习笔记——https
03-08
本前端学习笔记主要探讨HTTPS的工作原理、重要性以及如何在项目中应用它。 首先，理解HTTPS的基本概念至关重要。HTTPS是HTTP（超文本传输协议）与SSL/TLS（Secure Sockets Layer/Transport Layer Security）的结合...
超详细的web前端基础学习笔记
06-28
#### 超详细的web前端基础学习笔记 ##### 前端课程介绍 - **HTML**：HTML (HyperText Markup Language) 是一种标记语言，用于定义网页的结构与内容。它如同网页的骨架，为网页提供基本框架。 - **CSS**：CSS ...
（web前端学习笔记）JavaScript基础
01-08
JavaScript基础一、JS简介1、什么是JavaScript2、JavaScript的组成3、JavaScript的能力4、JavaScript的优点二、JS使用与输出1、JS使用1.1、 标签1.2、 或 中的 JavaScript1.3、外部脚本1.4、外部引用2、JS输出2.1、...
深度学习（基于Tensorflow2.0）学习笔记——Day3
01-06
经过一番折腾，我们终于配置好了Tensorflow2.0的环境，接下来通过Tensorflow来一起揭开深度学习的神秘面纱吧。 实战Tensorflow分类器 首先我们打开我们昨天的Hello TF工程，进入编辑界面之后，依次点击Kernel -> ...
JavaScript代码片段
最新发布
weixin_66128399的博客
08-26 232
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
前端开发攻略---在Vue3项目中修改Element-Plus主题色
nibabaoo的博客
08-22 244
在Vue3项目中修改Element-Plus主题色
零基础5分钟上手亚马逊云科技-云原生架构设计
m0_66628975的博客
08-26 1224
欢迎来到小李哥全新亚马逊云科技AWS云计算知识学习系列，适用于任何无云计算或者亚马逊云科技技术背景的开发者，通过这篇文章大家零基础5分钟就能完全学会亚马逊云科技一个经典的服务开发架构方案。我会每天介绍一个基于亚马逊云科技AWS云计算平台的全球前沿云开发/架构技术解决方案，帮助大家快速了解国际上最热门的云计算平台亚马逊云科技AWS最佳实践，并应用到自己的日常工作里。
vue中定义一个url文件,在vue文件中引入
weixin_65767506的博客
08-22 327
1.在src/utils文件夹下创建一个url.js。3.在其他vue文件中引入。2.url.js的内容为。4.在挂载时打印一下。打印出来就可以用了.
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值