jQuery01基础语法_淳淳在努力的博客-程序员宅基地

技术标签: Java中级  ajax  jquery  javascript  

目录

一、jQuery基础

1.定义

2.种差(内涵)

3.下载

4.引用

5.jQuery 语法

实例:

6.文档就绪函数

实例:

文档就绪函数简洁写法:

二、jQuery选择器:

作用:

定义:

种差(内涵):

分类:

(1)基本选择器

1.1  ID选择器

1.2  class类选择器

案例:

代码调试及jQuery与其它库的冲突:

为什么要进行代码调试?

如何调试JavaScript代码?

Chrome 浏览器调试工具-Elements界面:

 Chrome 浏览器调试工具-Console界面:

 Chrome 浏览器调试工具-Sources界面:

Chrome 浏览器调试工具-Network界面: 

 Sources资源页面的断点调试:

 为什么jQuery库与其它库同时使用存在冲突?

如何解决jQuery与其它库的冲突?

如同一个项目中有多个版本的jQuery:(相当于给$重命名)

如何解决jQuery与其它库的冲突?


一、jQuery基础

1.定义

jQuery是一个快速、简洁、开源的JavaScript类库

2.种差(内涵)

(1)封装JavaScript常用的功能代码

(2)提供—种简便的javaScript设计模式

(3)优化了HTML文档操作、事件处理、动画设计和Ajax交互

3.下载

jQuery官网www.jquery.com

4.引用

(1)使用<script>标签引用jQuery库

引用下载jQuery:(下载好放本地,效率更高)

<head>

<script src="jquery-3.3.3.min.js"></script>

</head>

(2)引用百度CDN:(现下载,会使网页加载速度慢)

<head>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>

5.jQuery 语法

$(selector).action()

美元符号定义jQuery

选择符()里"查询"和"查找"HTML元素

jQuery 的 action()执行对元素的操作

实例:

$("p").hide()-隐藏所有<p>元素

$("#test").hide()-隐藏所有id="test"的元素

6.文档就绪函数

jQuery语句一般位于document ready函数中

$(document).ready(

function(){

开始写jQuery 代码.….

}

);

整个页面加载结束后才执行jQuery,才能获得页面元素,所以这行代码的意思指页面加载结束后执行的

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淳淳练习</title>
		<!-- 导入jQuery库 -->
		<script src="js/jquery-2.1.1.js"></script>
		<!-- 文档就绪(网页元素都已经加载成功后) -->
		<script>
			//文档就绪
			$(document).ready(
				function(){
					//找到div:$("div")
					//.text()获取里面的内容
					//$("div").text();相当于document.getElementsByTagName("div").text;
					var str=$("div").text();
					//var可以省略声明一个变量储存
					//text()作用是获取或设置页面的文本内容
					//将结果打印到控制台
					console.log(str);
					//更改文本内容
					$("div").text("淳淳最棒了")
				}
			);
		</script>
	</head>
	<body>
		<!-- 获得页面中一个div里面的值,并且将值打印到控制台 -->
		<div>hello 淳淳滴 jQuery</div>
	</body>
</html>

文档就绪函数简洁写法:

$(function(){

//开始写jQuery代码...

});
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淳淳练习</title>
		<!-- 导入jQuery库 -->
		<script src="js/jquery-2.1.1.js"></script>
		<!-- 文档就绪(网页元素都已经加载成功后) -->
		<script>
			//文档就绪
			$(function(){
					//找到div:$("div")
					//.text()获取里面的内容
					//$("div").text();相当于document.getElementsByTagName("div").text;
					var str=$("div").text();
					//var可以省略声明一个变量储存
					//text()作用是获取或设置页面的文本内容
					//将结果打印到控制台
					console.log(str);
					//更改文本内容
					$("div").text("淳淳最棒了")
				}
			);
		</script>
	</head>
	<body>
		<!-- 获得页面中一个div里面的值,并且将值打印到控制台 -->
		<div>hello 淳淳滴 jQuery</div>
	</body>
</html>

二、jQuery选择器:

作用:

快速查找

定义:

是使用jQuery语法对页面中的元素实现查找的模式。

种差(内涵):

1、jQuery提供

2、jQuery选择器继承了CSS与Path语言的部分语法

3、允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择。

分类:

基本选择器
层次选择器
过虑选择器
属性选择器

(1)基本选择器

基本选择器是JQuery最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名来查找DOM元素

1.1  ID选择器

jQuery的#id选择器(ID选择器)用于:根据id属性值获取对应的元素(最多一个元素),将其封装为jQuery对象并返回。

语法:

//这里的id指的是具体的id属性的值

$( "#id" )

返回值:

返回封装了指定id的DOM元素的jQuery对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淳淳练习</title>
		<!-- 导入jQuery库 -->
		<script src="js/jquery-2.1.1.js"></script>
		<!-- 文档就绪(网页元素都已经加载成功后) -->
		<script>
			//文档就绪
			$(function(){
					//ID选择器的使用
					//$("#cc")相当于document.getElementById()
					$("#cc").text("淳淳要努力");
				}
			);
		</script>
	</head>
	<body>
		<!-- 获得页面中一个div里面的值,并且将值打印到控制台 -->
		<div>hello 淳淳滴 jQuery</div>
		<span id="cc"></span>
	</body>
</html>

1.2  class类选择器

jQuery的.className选择器(类选择器)用于:根据css类名className获取所有匹配的元素,将其封装为jQuery对象并返回。

语法:

//这里的className指的是具体的CSS类名

$( ".className" )

返回值:

返回封装了带有指定css类名的所有DOM元素的jQuery对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淳淳练习</title>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
		//文档就绪
		$(function(){
			//类选择器
			$(".bb").text("你好淳淳");
			//改变style
			$(".bb").css("background","red");
		});
		</script>
	</head>
	<body>
		<div class="bb">
			hello jquery
		</div>
	</body>
</html>

案例:

使用jquery基本选择器来完成不同按钮背景颜色不同的效果:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淳淳练习</title>
		<style type="text/css">
			/* 初始化 */
			*{
			    padding: 0;
			    margin: 0;
			}
			ul,li{
			    list-style: none;
			}
			a{
			    text-decoration: none;
			}
			img{
			    display: block;
			}
			.clearfix::after{
			    display: block;
			    content: '';
			    clear: both;
			}
			.fl{
			    float: left;
			}
			.fr{
			    float: right;
			}
		</style>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
		//文档就绪
		$(function(){
			//可以改变任何属性
			$("input").attr("style","margin-left: 5px;float:left;");
			$(".an6").attr("value","淳淳");
			//只能改变style属性
			$(".an1").css("background","red");
			$(".an2").css("background","yellow");
			$(".an3").css("background","blue");
			$(".an4").css("background","green");
			$(".an5").css("background","red");
			$(".an6").css("background","orange");
			
			$("#nan").css("float","none");
			$("#nv").css("float","none");
			//推荐用于修改非布尔类型的,可以用,但不推荐
			//$("#nan").attr("checked","true");
			//jQuery1.6版本以后推出的,一般用于修改值为true或false的元素属性,比如:单选按钮、复选框、下拉按钮的选中框
			$("#nan").prop("checked","true");
		});
		</script>
	</head>
	<body>
		<input type="button" value="默认" class="an1"/>
		<input type="button" value="确认" class="an2"/>
		<input type="button" value="自定义文案" class="an3"/>
		<input type="button" value="自定义icon" class="an4"/>
		<input type="button" value="右侧显示" class="an5"/>
		<input type="button" value="不显示" class="an6"/>
		男:<input type="radio" name="sex" id="nan" value="" />&nbsp;&nbsp;
		女:<input type="radio" name="sex" id="nv" value="" />&nbsp;&nbsp;
	</body>
</html>

代码调试及jQuery与其它库的冲突:

为什么要进行代码调试?

通常,javaScrit出现错误,不会提示信息,无法找到错误的位置。

代码可能包含语法错误、逻辑错误、这些错误比较难于发现。

如何调试JavaScript代码?

浏览器都内置了调试工具,内置的调试工具可以开始或关闭,严重的错误信息会发送给用户。

浏览器启用调试工具一般是按下F12键(或者右键->检查,或者Fn+F12)

elements:这是当前页面的html代码

console:这是控制台,主要看页面有没有错误信息

sources:包含当前页面的文件:比如html、css、JS、img文件等等

network:查看浏览器与后台交互发送的请求信息

Chrome 浏览器调试工具-Elements界面:

选择元素可以修改样式, 方便调试页面样式

 Chrome 浏览器调试工具-Console界面:

 Chrome 浏览器调试工具-Sources界面:

Sources js资源页面:这个页面内我们可以找到当前浏览器页面中的js 源文件,方便我们查看和调试

Sources Panel 的左侧分别是 Sources 和 Content scripts和 Snippets

Chrome 浏览器调试工具-Network界面: 

Network网络请求标签页:可以看到所有的资源请求,包括网络请求,图片资源,html,css,js文 件等请求

 Sources资源页面的断点调试:

找到要调试的文件,然后在内容源代码左侧的代码标记行处点击 即可打上一个断点

右侧最上面一排分别是:暂停/继续、单步执行(F10快捷键)、单步跳入此执行块 (F11快捷键)、单步跳出此执行块、禁用/启用所有断点。

 为什么jQuery库与其它库同时使用存在冲突?

都使用 $() 作为核心函数,

如在同一页面都引入jQuery和prototype库就有可能导致脚 本停止运行。

<script src="jquery.js"></script>

<script src="prototype.js"></script>

如何解决jQuery与其它库的冲突?

如同一个项目中有多个版本的jQuery:(相当于给$重命名)

语法: jQuery.noConflict(rem

参数 描述 
removeAll 布尔值。是否彻底移交对变量jQuery的控制权,默认为false。

说明:

jQuery.noConflict()函数的返回值是jQuery类型,返回变量jQuery的引用。

该方法释放 jQuery 对 $ 变量的控制。

该方法也可用于为 jQuery变量规定新的自定义名称。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淳淳练习</title>
		<script src="js/jquery-3.6.0.js"></script>
		<script>
		//$重命名
		var jq360=jQuery.noConflict();
		//文档就绪
		jq360(function(){
			//类选择器
			jq360(".bb").text("你好淳淳");
			//改变style
			jq360(".bb").css("background","red");
		});
		</script>
	</head>
	<body>
		<div class="bb">
			hello jquery
		</div>
	</body>
</html>

如何解决jQuery与其它库的冲突?

使用jQuery.noConflict()方法让出jQuery对$符的控制权:

① 同一页面导入jQuery多个版本冲突解决方法

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44641804/article/details/120546484

智能推荐

jenkinsfile配置远程ssh server实现自动化构建_良人眷的博客-程序员宅基地

如下,只要在steps里面配置:sh 'ssh [email protected]_ip command'即可执行实现ssh远程执行sh命令pipeline { agent any stages { stage ('SSH Server') { steps { sh 'echo test' sh 'ssh [email protected] pwd' sh

android横向滑动缩放,关于APP内实现界面手动缩放滑动效果_weixin_39609887的博客-程序员宅基地

关于APP内页面不能缩放和缩放后不能左右滑动的原因主要有两点:1.我们的混合应用使用的视图控件WebView初始化时禁止了页面缩放的功能,需要我们手动设置WebView,将它页面可缩放的属性值设为true;2.页面中的meta标签中的viewport限制了页面的缩放功能,需要我们在需要缩放的页面手动更改meta标签viewport属性值;首先需要将cordova-plugin-ionic-webv...

OpenFlow与VxLAN在云网络的应用_cisco_eigrp的博客-程序员宅基地_openflow vxlan

我叫庞俊英,来自阿里巴巴技术保障部,我们部门负责整个阿里集团所有业务如蚂蚁、淘宝、阿里云等等业务部门的基础设施。两年前我来过这里,去年没来,因为觉得去年没什么可讲的,所以这次我向大家汇报内容的是有一个连续性的,就是我前年提了哪些问题,这些问题现在解决了吗?然后还有哪些问题还需要解决,我希望业界帮我们做什么,我会是这样一个思路来向大家汇报。我是个工程师,所以我的PPT里面如果有很漂亮的图,一

使用 Docker部署 Tensorflow Serving 模型服务_xiedelong的博客-程序员宅基地_docker部署tensorflow

准备工作拉取 tensorflow servering 的 docker 镜像:sudo docker pull tensorflow/serving,一般是已经有的进入到一个测试目录:cd /home/q/test_dir/然后下载官方Demo目录:git clone https://github.com/tensorflow/serving如果无法下载,去网站 down 下来(附件),然后 deploy 上传到 linux 实体机中部署启动sudo docker run -t --rm

利用docker 创建mysql_Docker创建Mysql容器的简单步骤_穆舍的博客-程序员宅基地

前言前面我们已经安装好了Docker,也简单了解了Docker。下面就来给大家介绍下Docker创建Mysql容器的简单步骤,话不多说了,来一起看看详细的介绍吧步骤如下1、启动docker服务[[email protected] ~]# systemctl start docker2、查看docker里面的镜像[[email protected] ~]# docker imagesREPOSITORY TAG IM...

AE要素选择(点选和拉框选择)_weixin_34414650的博客-程序员宅基地

选择一个要素或者一个要素集(FeatureSelection)的方法很多,如IMap::SelectByShape、ILayer::search、IFeatureSection::SelectFeature等方法主要用到的方法:IMap接口的SelectFeature(Layer, Feature) (方法,从一个Layer中选择一个Feature);IMap接口SelectBySha...

随便推点

Android 开发者必备的书单_JeffreyLau7的博客-程序员宅基地

Android 方面的书籍可谓是百花齐放,这几本书的作者都是在一线互联网公司奋斗的工程师,他们把多年的工作经验,身心耕植,汇聚成一本书。作为菜鸟的我们,只有一睹大神的风采了。所以借这个周末,我也列举了一些书,作为一个Android 开发工程师,这些书都是不可多得的好书,书中知识迟早是要掌握的。我们都知道开发Android App 是用Java 语言的,当然你也可以使用其他语言来

循环商业模式为时尚产业带来7000亿美元商机_普通网友的博客-程序员宅基地

•到2030年,循环商业模式在全球时尚市场所占的份额有可能达到23%,这代表着7000亿美元的商机。•循环商业模式可以帮助时尚产业向更好的增长模式转变,使产业收入不再依赖生产和资源利用。•要让积极的经济和环境成果最大化,需要重新设计绩效指标、产品和供应网络以适应循环商业模式,并形成更大规模的循环商业模式。2021年11月23日艾伦·麦克阿瑟基金会(“基金会”)的最新研究发现,到2030年,在租赁和转售等领域,循环商业模式在全球时尚市场所占的份额有可能达到23%,蕴藏着7000亿美元的商机

html5 matrix,javascript - HTML5 Canvas get transform matrix? - Stack Overflow_weixin_39582569的博客-程序员宅基地

EDIT(1/10/2020): MDN now indicates that getTransform() is supported in most major browsers; the code below may still have value as a part of implementing a polyfill for Internet Explorer, Edge, and An...

怎样生活更有意义?_禅与计算机程序设计艺术的博客-程序员宅基地

怎样生活更有意义?简单生活。复杂的音乐产生放纵复杂的食品产生疾病,质朴的音乐文艺教育能产生心灵方面的节制。质朴的体育锻炼产生身体健康。节制自己的快乐。我们知道最大最强烈的快乐是色欲。而正确的爱,是对有秩序的事物和美的事物,有节制的、和谐的爱。我们不应该追求复杂的节奏和多样的韵律。我们应该考虑什么是有秩序的、勇敢的生活。在有秩序的社会里,每个人都有他应该干的工作。——柏拉图《理想国》每个人,一生只做...

推荐文章

热门文章

相关标签