文章目录
- 一、jQuery是什么？
- 二、使用步骤
- 1.引入库
- 2.读入数据
- 3.常见API
- 4.事件点击
一、jQuery是什么？
jQuery是一个快速、小型且功能丰富的JavaScript库。它通过一个易于使用的API使HTML文档遍历和操作、事件处理、动画和Ajax等操作变得更加简单，该API可在多种浏览器中工作。jQuery结合了多功能性和可扩展性，改变了数百万人编写JavaScript的方式。
jQuery 是一个JS库。简称 “JQ”.
其本质就是javascript. 重点是围绕DOM操作
作用： 可以提高web（网页 ）开发的效率（write less , do more）
下载
官网地址(下载速度慢)：jQuery
国内地址(下载速度快):jquery下载所有版本（实时更新）
二、使用步骤
1.引入JQ库
代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本模板</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<!-- 第一步：下载jquery文件 (复制粘贴在一个文件) -->
<!-- 第二步：把jquery文件引入到网页中 -->
<!-- 开发环境版本 -->
<!-- <script src="./libs/jQuery/jQuery.js"></script> -->
<!-- 生产环境版本 -->
<script src="./libs/jQuery/jQuery.min.js"></script>
</body>
</html>2.基本使用
代码如下：
<script>
// jQuery函数 , jQuery的别名 "$" , $也是一个函数.
// window.jQuery = window.$ = jQuery;
// console.log(jQuery === $);// true
// 入口函数 (需要操作div标签,script标签如果写在div标签的后面,可以不写入口函数)
// 1) 直接调用jQuery函数
// jQuery(function(){
// jQuery(".box").click(function(){
// jQuery(this).animate({width:200,height: 200},300);
// })
// })
// 使用别名 "$" 这个名称作为函数调用
$(function(){
$(".box").click(function(){
$(this).animate({width:200,height: 200},300);
})
})
</script>
三、常见的API
案例主体
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本模板</title>
<style></style>
</head>
<body>
<div class="box">123</div>
<div id="demo">456</div>
<input type="text" value="hello">
<ul class="list">
<li>列表1</li>
<li class="aaa">列表2 aaa</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
<img src="" alt="" class="picture">
<!-- 引入jQuery -->
<script src="./libs/jQuery/jQuery.min.js"></script>
<script>
</script>
</body>
</html>1） 获取页面标签
1.获取目标元素
// 原生JS
var box = document.querySelector(".box")
console.log(box);//<div class="box">123</div> 这个东西我们叫做 dom对象
box.style["fontSize"] = "40px";
document.querySelector("#demo");
var items = document.querySelectorAll("ul li");
items[0].style["color"] = "red";
items[1].style["color"] = "green";
items[2].style["color"] = "blue";
// JQ 选择器函数 $()
// 调用 $ 函数,传递一个选择器,就可以获取页面的标签
var $box = $(".box");
console.log($box);// ce.fn.init {0: div.box, length: 1} 这个东西我们叫做 jquery对象
$box.style["fontSize"] = "40px";// 报错
$box.css("fontSize","40px");// 正确
$("#demo") // 选择id叫做demo的标签
var $list = $("ul li");// 选择ul的所有后代li标签
console.log($list);// 把选择器对应的标签记录在jquery对象中
// $ 既可以作为初始化函数(入口函数),也可以作为选择器函数使用
$(function(){}) // 这是初始化函数
$(".box") // 这是获取页面标签的意思 作为选择器函数使用2.获取目标元素的所有子元素
var $child = $(".list").children();
console.log($child);3. 获取目标元素的父元素
var $parent = $(".aaa").parent();
console.log($parent);4. 获取目标元素的兄弟元素
var $bro = $(".aaa").siblings();
console.log($bro);5. 获取目标元素相邻的下一个元素
var $next = $(".aaa").next();
console.log($next);6. 获取目标元素相邻的上一个元素
var $prev = $(".aaa").prev();
console.log($prev);7. 找到ul标签下的.aaa标签
var $aaa = $(".list").find(".aaa");
console.log($aaa);2）设置标签的样式
1.设置单个样式
$("ul li").css("color","red");
2.设置多个样式
$(".box").css({width:100,height: 100,backgroundColor:"blue"})3）设置标签的文本
1.纯文本
$("#demo").text("abc");
$("#demo").text("<span>abc</span>");//纯文本不会渲染标签2.超文本
$("#demo").html("abc");
$("#demo").html("<span>abc</span>");
$("#demo").html("<i>abc</i>");//可以用于渲染html字符串
不传递参数,表示获取该标签的超文本
var v2 = $("#demo").html();
console.log(v2);// '<i>abc</i>'3.获取输入框的值
var v1 = $("input").val();
console.log(v1);// 'hello'4）设置标签的属性
// class id src title href
var s1 = "https://www.qianduange.cn/upload/article/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png"
var s2 = "https://www.qianduange.cn/upload/article/d0e4fdc2f126cbf5.png"
$(".picture").attr("src", s2);// 设置标签属性
var v3 = $(".picture").attr("src");// 获取标签属性
console.log(v3);// 'https://www.qianduange.cn/upload/article/d0e4fdc2f126cbf5.png'
$(".picture").removeAttr("src");// 删除标签属性5）删除标签、添加标签
1.添加标签
// 往目标元素的尾部追加渲染字符串
$(".box").append("<h3 class='tit1'>7</h3>");
$(".box").append("<h3>8</h3>");
$(".box").append("<h3>9</h3>").css("color", "red");// 链式编程
// 往目标元素的首位添加渲染字符串
$(".box").prepend("<h3>7</h3>");
$(".box").prepend("<h3>8</h3>");
$(".box").prepend("<h3>9</h3>");2.删除标签
// 删除标签
$(".tit1").remove();
$(".box").html("");
$(".box").empty();四.事件处理
案例主体
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本模板</title>
<style></style>
</head>
<body>
<div class="container">
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</div>
<p>提示:</p>
<!-- 引入jquery文件 -->
<script src="./libs/jQuery/jQuery.js"></script>
</body>
</html>1).写法1
$(".container button").click(function(){
// console.log(this);// 事件的调用者
// console.log($(this));// jquery对象
// 获取当前点击标签的文本
var v = $(this).html();
// 字符串拼接
var str = "提示: 点击了 “"+v+"”";
// 渲染字符串
$("p").html(str);
})2). 写法2
可以绑定多个行为
$(".container button").bind("click mouseenter", function () {
// 获取当前点击标签的文本
var v = $(this).html();
// 字符串拼接
var str = "提示: 点击了 “" + v + "”";
// 渲染字符串
$("p").html(str);
})3). 写法3
可以事件委托
$(".container").delegate("button", "click", function () {
//给button的父元素.container绑定点击事件
// console.log(this);// 你点击的标签(事件调用者)
// 获取当前点击标签的文本
var v = $(this).html();
// 字符串拼接
var str = "提示: 点击了 “" + v + "”";
// 渲染字符串
$("p").html(str);
})4). 写法4(推荐写法)
// 推荐使用
$(".container button").on("click", function () {
// 获取当前点击标签的文本
var v = $(this).html();
// 字符串拼接
var str = "提示: 点击了 “" + v + "”";
// 渲染字符串
$("p").html(str);
})
// 事件委托 (可以动态绑定事件)
$(".container").on("click", "button", function (event) {
// 事件对象(鼠标信息,键盘信息,事件信息等)
// console.log(event);// 事件触发时所产生的集合
// 获取当前点击标签的文本
var v = $(this).html();
// 字符串拼接
var str = "提示: 点击了 “" + v + "”";
// 渲染字符串
$("p").html(str);
})5).解绑事件
解绑用on绑定的事件：
//使用off解绑事件
$(".container button").off('click');