目录
一、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="" />
女:<input type="radio" name="sex" id="nv" value="" />
</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多个版本冲突解决方法