jQuery简介
jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程
jQuery 对象是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,如果一个对象就是jQuery对象,那么它就可以使用jQuery里的方法
jQuery 内部实际使用的 JavaScript 的 XMLHttpRequest 对象
基本语法
$(选择器).动作()
jQuery 对比 与 JavaScript 对比
写法 | 代码 | 释义 |
---|---|---|
jQuery | $("#test").html() | 获取 ID 为 test的元素内 html代码。其中html()是 jQuery 中的方法 |
JavaScript | document.getElementById("test").innerHTML | 获取 ID 为 test的元素内 html代码 |
jQuery 基本示例
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div>hello jQuery</div>
<script>
jQuery("div").css("color","red")
</script>
</body>
</html>
标签属性操作
用法 | 释义 |
---|---|
$("标签").html() | 标签HTML内容 |
$("标签").attr("标签属性") | 获取标签属性(属性值) |
$("标签").removeAttr("标签属性") | 移除指定标签属性 |
$("标签").attr("标签属性","增加/变更属性") | 增加或变更属性 |
$("标签").prop("标签属性") | 获取标签属性(布尔值) |
$("标签").removeProp("标签属性") | 移除指定标签属性 |
$("标签").prop("标签属性","增加/变更属性") | 获取标签属性,并新增或变更属性 |
$(this) | 获取的标签本身 |
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div id="div_sty" con="111" >测试 div 标签</div>
<script>
//获取标签属性(属性值)
console.log($("div").attr("con")); //获取指定属性值
console.log($("div").removeAttr("con")); //移除指定属性
console.log($("div").attr("Newcon","NewText")); //获取并变更指定属性值,不存在则添加,存在则变更
//获取标签属性(布尔值)
console.log($("div").prop("id")); //判断指定属性是否存在
console.log($("div").removeProp("id")); //移除指定属性
console.log($("div").prop("class","test")); //判断指定属性是否存在,不存在则添加,存在则变更
$("div")
</script>
标签位置和尺寸
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<style>
*{margin: 0px;}
.outer{position: absolute;left:50px;top:10px;background-color: yellow;height: 300px;width: 400px;}
.con{position: relative; background-color: pink;height:200px;width:300px;left:20px;top:30px;padding-top:1px;padding-left:2px;margin: 3px auto auto 4px;}
</style>
<body>
<div class="outer">
<p class="con"></p>
</div>
</body>
<script>
//获取位置
console.log($(".con").position().left); //相对于上层标签的偏移量
console.log($(".con").offset().left); //相对于视图标签的偏移量
//获取高度
console.log($(".con").height()); //获取标签高度
console.log($(".con").innerHeight()); //获取内部区域高度
console.log($(".con").outerHeight(true)); //获取标签高度(设置为 true 时,计算边距在内)
//获取宽度
console.log($(".con").width()); //获取标签宽度
console.log($(".con").innerWidth()); //获取内部区域段杜
console.log($(".con").outerWidth(true)); //获取标签宽度(设置为 true 时,计算边距在内)
</script>
</html>
jQuery 绑定事件
为每个匹配元素的特定事件绑定事件处理函数,可以同时绑定多个事件类型
- 和 js 中的 onclick 绑定方式不同,但因为jQuery本身是基于js写的运行库,所以onclick绑定方式也可以在jQuery中使用
this 使用
- onclick(this),获取当前标签,在函数中js用this,jQuery用$(this)
- 其它绑定方式不用在方法中传递this参数,可以直接使用this
JavaScript绑定方式:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<style>
div {height: 200px;width: 200px;background-color: green;}
</style>
<body>
<button onclick="showtime()">这是一个测试标签,点击触发事件</button>
<script>
function showtime() //定义方法
{
alert("hello world") //事件方法内容
};
</script>
</body>
</html>
jQuery绑定方法一:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<style>
div {height: 200px;width: 200px;background-color: green;}
</style>
<body>
<button>这是一个测试标签,点击触发事件</button>
<script>
$("button").click(function () //选定标签绑定事件方法
{
alert("hello world") //事件方法内容
alert($(this).html()) //标签本身的HTML内容
});
</script>
</body>
</html>
jQuery绑定方法二:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<style>
div {height: 200px;width: 200px;background-color: green;}
</style>
<body>
<button>这是一个测试标签,点击触发事件</button>
<script>
$("button").bind("click",function () //选定标签绑定事件方法
{
alert("hello world"); //事件方法内容
alert($(this).html()) //标签本身的HTML内容
});
//$("button").unbind("click"); //解除绑定
</script>
</body>
</html>
jQuery绑定方法三:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<style>
div {height: 200px;width: 200px;background-color: green;}
</style>
<body>
<button>这是一个测试标签,点击触发事件</button>
<script>
$("button").on("click",function () //选定标签绑定事件方法,提供绑定事件处理程序所需的所有功能
{
alert("hello world"); //事件方法内容
alert($(this).html()) //标签本身的HTML内容
});
//$("button").off("click"); //删除事件绑定
</script>
</body>
</html>
进度条控制
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<style>
body{height: 2000px;}
.Go_Top{position: fixed;height: 50px;width: 100px; bottom: 50px;right: 50px;background-color: #ccc;text-align: center;line-height: 50px;}
</style>
<body>
<div class="Go_Top" onclick="returnTop()">返回顶部</div>
<script>
function returnTop()
{
$(window).scrollTop(0) //滚动条与视窗间距为0,即窗口返回顶部
}
</script>
</body>
</html>
标签内容操作
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div id="div_sty">
<div>测试标签1</div>
<p>测试标签2</p>
</div>
<script>
console.log($("#div_sty").html()); //获取标签内容(包含子标签和标签内容)
$("#div_sty").html("<h1>新标签</h1>"); //修改标签
</script>
</body>
</html>
标签文本操作
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div id="div_sty">
<div>测试标签1</div>
<p>测试标签2</p>
</div>
<script>
console.log($("#div_sty").text()); //获取标签内容(只含标签里的内容)
$("#div_sty").text("新文本"); //修改标签内容
</script>
</body>
</html>
表单标签value值操作
非value固有属性的标签不生效
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<input type="text" value="test">
<script>
console.log($(":text").val()); //获取标签 value 属性值
$(":text").val("New_test"); //变更 value 属性值
</script>
</body>
</html>
form标签内容获取
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<form id="TestID">
用户<input name="user" type="text">
密码<input name="passwd" type="password">
<div onclick="aaa()">点击显示获取数据</div>
</form>
<script>
function aaa(){
var data = $("#TestID").serialize();
//获取form中标签内容方法
alert(data);
}
</script>
</body>
</html>
jQuery遍历
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div class="test">第一个标签</div>
<p class="test">第二个标签</p>
<strong class="test">第三个标签</strong>
<script>
array=["a","b","c"];
//循环遍历-方式一
$.each(array,function(x,y) {
console.log(x); //遍历值的下标序列号
console.log(y); //遍历的值
})
//循环遍历-方式二
$(".test").each(function(){
console.log($(this)); //遍历所有标签
})
</script>
</body>
</html>
0
a
1
b
2
c
[div.test]
[p.test]
[strong.test]
jQuery标签的增删改
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<style>
.div1 { width: 300px;height: 100%;color: #000;float: left;text-align: center;background-color: #FFCCCC; }
div p { background-color: #fff;}
</style>
</head>
<body>
<div class="div1">
<h3>jQuery的增删改查</h3>
<button att="add">添加标签</button>
<button att="del">删除标签</button>
<button att="replace">替换标签</button>
</div>
<script>
//添加节点标签函数
$("[att='add']").click(function(){
var $ele=$("<p>"); //创建标签,声明变量为 ele
$ele.html("新增的 p 标签"); //设定新增标签中元素
$(".div1").append($ele); //把设定好的标签和标签内元素添加到指定位置
});
//删除节点标签函数
$("[att='del']").click(function(){
$(".div1 > p").last().remove(); //选定要删除的标签进行删除操作
});
//修改节点标签函数
$("[att='replace']").click(function(){
$(".div1 > h3").replaceWith("<h2>替换后的新标题</h2>");
});
</script>
</body>
</html>
jQuery类样式的增删改
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<style>
.div_sty{color: red;}
.New_sty{text-align: center;}
</style>
<body>
<div class="div_sty">测试 div 标签</div>
<script>
$("div").addClass("New_sty"); //添加指定标签类样式
$("div").removeClass("div_sty"); //删除指定标签类样式
$("div").css("backgroundColor","blue"); //修改指定标签类样式
</script>
</body>
</html>
jQuery克隆标签元素
一个布尔值(true 或者 false)指示事件处理函数是否会被复制。V1.5以上版本默认值是:false
<!DOCTYPE html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div class="outer">
<div>
<button onclick="add(this)">+</button>
<input type="text">
</div>
</div>
<script>
//克隆元素
function add(self) {
var $clone_obj=$(self).parent().clone(true); //定义克隆元素
$clone_obj.children("button").html("-").attr("onclick","remove_obj(this)"); //变更克隆元素子级内容
$(".outer").append($clone_obj); //添加克隆修改后的元素
}
//删除元素
function remove_obj(self) {
$(self).parent().remove(); //删除当前级父级标签元素
}
</script>
</body>
</html>
扩展方法
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<script>
var settings = { validate: false, a:1, b:"2" };
var options = { validate: true, c: "3" };
jQuery.extend(settings, options);
console.log(settings)
</script>
</body>
</html>