jQuery
2020-08-25 本文已影响0人
Daeeman
- 基本语法
- 效果
- jQ html
- jQ Ajax
jQuery概述
jQuery由美国人John Resig于2006年初创建，至今已吸引了来自世界各地的众多javascript高手加入其team。
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需使用选择器查找即可。
安装和使用
通过访问http://www.jquery.com获得最新的jQuery版本,当前最新版本为:3.4.1
jQuery库类型说明：
- 完全版jquery-3.4.js 用于测试和开发（未压缩，是可读的代码）
- 压缩版jquery-3.4.min.js 用于实际的网站中，已被精简和压缩
两个版本代码相同，只是在压缩版中去掉了相关注释
入口函数
jQuery 入口函数:
$(document).ready(function(){
// 执行代码
});
或者简写为
$(function(){
// 执行代码
});
JavaScript 入口函数:
window.onload = function () {
// 执行代码
}
jQuery 入口函数与 JavaScript 入口函数的区别：
- jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
- JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>入口函数</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function(){
// var h1=$("#hh");
// h1 赋值为 jQuery选择id为hh的元素
alert($("#hh").html())
})
// $ 是jQuery的意思
// $() jquery 的主方法
// $(function(){})
// 等待整个HTML文档加载完毕再执行匿名函数里面的方法
// jQuery入口函数
// $("字符串") jQuery css选择器
// .html 获取元素标签中间内容
</script>
</head>
<body>
<h1 id="hh">你好,明天</h1>
</body>
</html>
jQuery对象与DOM对象转换
定义DOM对象
在jQuery库中，$就是jQuery的一个简写形式。
如：$(“#id”) 等价于jQuery(“#id”)
⚠️ 在编写JavaScript时应尽量避免使用jQuery和$定义变量或方法，以免在同时使用JavaScript和jQuery时发生冲突。
- JavaScript方式
var id=document.getElementById(“id”);
- jQuery方式
var $id=$(“#id”);
说明：jQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象
jQuery事件方法初探
jQ 事件和js的事件名称是一致的，事件名不带on
$(“button”).click(function(){
// 事件操作
})
JQ中显示隐藏对象
// $(".block").hide() 隐藏
// $(".block").fadeOut(); 淡出
// $(".block").slideUp(); 向上滑出
// $(".block").show(); 显示
// $(".block").fadeIn(); 淡入
// $(".block").slideDown(); 向下滑入
// $(".block").fadeToggle(); 切换淡入淡出
$(".block").slideToggle("slow"); //切换滑入滑出
高级用法：速度与回调函数
fadeIn(speed,[callback] )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>入口函数</title>
<style>
.block{
width: 500px;
height: 500px;
background-color: yellow;
text-align: center;
display: none;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
<script>
// 单击按钮弹出“你好”
// 单击按钮隐藏block 淡出
// 单击按钮显示block
// 单击按钮切换显示或者隐藏
$(function(){
$("button").click(function(){
// alert("哈喽hello");
// $(".block").hide() 隐藏
// $(".block").fadeOut(); 淡出
// $(".block").slideUp(); 向上滑出
// $(".block").show(); 显示
// $(".block").fadeIn(); 淡入
// $(".block").slideDown(); 向下滑入
// $(".block").fadeToggle(); 切换淡入淡出
$(".block").slideToggle("slow"); //切换滑入滑出
})
})
</script>
</head>
<body>
<button>点我呀</button>
<div class="block">
你能拿我怎么样
</div>
</body>
</html>
操作元素中的内容：
- 设置：
.html(“str”) 设置元素的里面的内容 可用带html标签
.text(“str”) 设置元素的里面的内容 可用不带html标签
.val(“str”) 设置表单的值
- 获取
.html() .text() .val()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>入口函数</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
// 获取sp里面内容
// 中国改成祖国
// 修改sp里面的内容为 欢度祖国70周年生日 70要
$(function(){
// alert($(".sp").text())
$(".sp").html("欢度祖国<i>70</i>周年生日")
})
// html 获取标签内html内容
// text 获取标签内的文本（过滤所有的html标签）
// text()没有参数是获取内容，有参数是设置内容
// html()没有参数是获取html内容，有参数是设置html内容
</script>
</head>
<body>
<p class="sp" title="选择">你好<b>中国</b>，祝你幸福</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>入口函数</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
// 获取表单的值
$(function(){
// alert($("input").val())
$("input").val("0.618");
})
// val()括号里面没有参数的时候 获取表单的值，有参数是设置表单的值
</script>
</head>
<body>
<input type="text" value="神奇的值">
</body>
</html>
样式操作
- 设置单条样式
.css(“属性名”，”属性值”)
- 设置多条样式
.css({“属性名1”:”属性值1”,”属性名2”:”属性值2”,……})
- 获取样式值
.css(“属性名”)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加</title>
<style>
.block{
background: #00f;
width: 500px;
height: 500px;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
<script>
// 获取block的文字大小
// 单击按钮 让block的文字变大
// 单击按钮 让block的文字在原有基础上增大5px
// 单击按钮 让block 文字变成22px 粗体 绿色
$(function(){
$("button")
.click(function(){
// $(".block").css("font-size","22px")
// $(".block").css("font-size","+=5")
// $(".block")
// .css("font-size","22px")
// .css("font-weight","900")
// .css("color","green")
$(".block").css({
"font-size":"22px",
"font-weight":"900",
"color":"green"
})
})
// css(属性名) 获取css的属性值
// css(属性名，属性值) 修改元素的css
// css支持链式写法,如果选择的对象一致的,可以直接点+下一行内容
// css支持对象表示方法
})
</script>
</head>
<body>
<button>按钮</button>
<div class="block">
block内容
</div>
</body>
</html>
类操作
- 增加类 可增加/删除多个类
.addClass(“类名1 类名2 ……”) 多个类名之间用空格隔开
- 删除类
.removeClass(“类名”)
.toggleClass(“”)
.toggleClass(“类名”,true/false) 用来判断样式类添加还是移除的 布尔值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加</title>
<style>
.block{
background: #00f;
width: 500px;
height: 500px;
}
.biger{
font-size:22px;
font-weight: 900;
color: green;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
<script>
// 单击按钮 给block添加个class
// 单击按钮 已经有biger了删除biger类
// 单击按钮 切换biger
$(function(){
$("button")
.click(function(){
// $(".block").addClass("biger");
// $(".block").removeClass("biger");
$(".block").toggleClass("biger");
})
// addClass(类名) 添加class 不要点
// removeClass(类名)移除class
// toggleClass切换 class
})
</script>
</head>
<body>
<button>按钮</button>
<div class="block">
block内容
</div>
</body>
</html>
属性操作
- 获取属性 获取元素的属性
attr("属性名"); .attr(“title”) 获取元素的title属性
- 设置属性
.attr(“属性名”,”属性值”)
.attr(“title”,”我爱我的祖国”) 设置元素的title属性为“我爱我的祖国”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加</title>
<style>
.block{
background: #00f;
width: 500px;
height: 500px;
}
.biger{
font-size:22px;
font-weight: 900;
color: green;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
<script>
// 单击按钮 获取h1的title属性
// 单击按钮 设置h1的title属性为 国庆7天乐逍遥
$(function(){
$("button")
.click(function(){
// var t = $("h1").arrt("title");
// alert(t)
$("h1").arrt("title","国庆7天乐逍遥");
})
})
// attr（属性）获取元素的属性
</script>
</head>
<body>
<button>按钮</button>
<h1 title="普天同庆70周年华诞">我爱我的祖国</h1>
</body>
</html>
表单属性操作prop
- 获取属性 获取元素的属性
prop("属性名"); .prop(“checked”) 获取表单的选中属性
- 设置属性
.prop(“属性名”,”属性值”)
.attr(“disabled”,”true”) 设置表单元素不可用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加</title>
<style>
</style>
<script src="js/jquery-3.3.1.js"></script>
<script>
// 勾选同意按钮 按钮才可以点击
// 如果g的值为选中状态 按钮才可以用
$(function(){
$("#g").click(function(){
var v = $("#g").prop("checked");
// 通过prop获取表单的checked属性值
if(v==true){
$(".btn").prop("disabled",false)
// 如果是勾选的 让按钮可以使用
}else{
$(".btn").prop("disabled",true)
}
// 如果非勾选 让按钮不可以使用
})
// 给按钮添加一个单价事件弹出 响应文字
$(".btn").click(function(){
alert("我可以被点击了");
})
})
// attr 获取的值是初始值 表单的值是动态的要有 prop
</script>
</head>
<body>
<p><input type="checkbox" id="g">阅读并同意条款</p>
<p><input type="button" value="提 交" class="btn" disabled=""></p>
</body>
</html>
