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

<!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多个版本冲突解决方法

本文链接：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...

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

一、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与其它库的冲突？

智能推荐

随便推点

推荐文章

热门文章

相关标签