版权声明：浅弋、璃鱼的原创 https://blog.csdn.net/qq_35709559/article/details/82899330
一、JQuery介绍:
1.jquery概述:
- 这是js的一个函数库.(完全由js封装写成的一个js文件);
- 类库, 函数库(叫法不同,用的时候调用这个库(文件)里边的函数);
- 版本:1.x(良好的兼容IE678)、2.x、3.x;
- 优点: 简单易用,连式编程隐式迭代;
- 缺点: 方法冗余;
- 官网推荐: https://jquery.com
- 中文网: http://jquery.cuishifeng.cn/
二、jquery文档加载完再执行
1.入口函数:
将获取元素的语句写到页面头部，会因为元素还没有加载而出错。
先来看原生js的写法:
// 原生js
window.onload = function(){
js代码;
}
而jquery常用的方法有两种,且第一种最常用:
第一种方法:使用"$"声明jquery函数,并完成对匿名function函数的调用:
// JQuery方法1:(用的最多)
$(function(){
alert('有了这个方法，就可以获取下面的标签了。')
})
使用"$"声明jquery函数,并完成对匿名function函数的调用.
第二种方法:
// JQuery方法2:
$(document/window).ready(function(){
jq代码;
})
jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快
2. JS与JQ的区别:
2.1 案例1: 按钮显示盒子:
html代码:
<body>
<button id="btn">显示盒子</button>
<div></div>
<div></div>
<div></div>
</body>
原生JS代码:
<script>
window.onload = function(){
// 1.获取元素
var btn = document.getElementById('btn')
var divArr = document.getElementsByTagName('div')
// 2.绑定事件
btn.onclick = function(){
// 3.遍历数组，获取每一个div，然后操作让他们显示，并设置内容
for(var i=0;i<divArr.length;i++){
// 显示
divArr[i].style.display = 'block';
// 设置内容
divArr[i].innerHTML = '银钱双戟丧尽古今人品，穷之一穴埋没多少英雄...'
}
}
}
</script>
JQuery代码:
<!-- 1.引入JQuery文件 -->
<script src="js/jquery-1.11.1.js"></script>
<script>
// 2.JQuery入口函数
$(function(){
// 3.获取元素，绑定事件
$('#btn').click(function(){
// 显示盒子，并设置内容能: JQuery两大特点: 隐式迭代,连式编程。
$("div").show().html('忠厚传家久，诗书济世长...')
// show(): 显示标签(style.display)。 html(): 设置内容。(innerHMTL)
})
})
</script>
2.2 js对象和jq对象的不同(重点):
- JQ对象就是通过$()获取的页面标签;
- $() 获取的对象,里面是JQuery封装好的方法,原生的JS是没有的;
- JQuery想要操作标签,底层还是调用了原生JS的方法
- JQ对象中的一个功能就是对一个或多个原生JS对象的封装;
三、jquery选择器:
1.JQ用法思想一:
选择某个网页元素,然后对它进行操作
2. JQ选择器:
2.1 普通选择器(获取 标签/ id/ 类/ 层级):
类比css:
| 用法 | 说明 | 实例 | 实例效果 |
| $("标签名") | 通过标签名获取元素, 得到一个元素数组 | ($('li')) | 获取标签为"li"的元素数组 |
| $("#id名") | 通过id获取元素, 得到一个元素(因为id是唯一的) | ($('#box2')) | 获取id为"box"的元素 |
| $(".类名") | 通过class名获取元素, 得到一个元素数组 | ($('.aaa')) | 获取class名为"aaa"的元素数组 |
| $("#box1 li p") | 通过层级选择器,拿到指定的元素 | ($("#box1 li p")) | 获取id为"box1"下的"li"标签下的"p"标签元素 |
2.2 比较特殊的选择器–对选择集进行过滤:
| 用法 | 说明 | 实例 | 实例效果 |
| $("标签[属性=属性值])" | 获取规定标签中指定属性值的元素 | ($("li[name=demo]")) | 获取属性"name"为"demo"的"li"标签元素 |
| $("标签名").has("子标签") | 获取拥有指定子标签的标签 | $("li").has('p') | 获取拥有"p"子标签的"li"标签元素 |
| $("标签名").eq(索引值) | 获取拥有指定子标签的标签 | $('li').eq(4) | 获取"li"标签数组中索引值为4的元素 |
2.3 关系选择器 – 选择集转移:
| 用法 | 说明 |
| $('#box').prev(); | 选择id是box的元素前面紧挨的同辈元素 |
| $('#box').prevAll(); | 选择id是box的元素之前所有的同辈元素 |
| $("#box").next() | 选择id是box的元素后面紧挨的同辈元素 |
| $('#box').nextAll(); | 选择id是box的元素之后所有的同辈元素 |
| $('#box').siblings(); | 选择id是box的元素之外的所有同级元素(兄弟元素) |
| $('#box').parent(); | 选择id是box的元素的父辈元素 |
| $('#box').children(); | 选择id是box的元素的子标签 |
| $('#box').find(".myClass"); | 选择id是box的内的class为"myClass""的元素(所有后代) |
| $('#box').index(); | 某个标签在父盒子中的索引值。(所有子元素全部算上) |
3. 判断是否选择到了元素:
jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。
四、jquery样式操作:
1. jquery用法思想二:
同一个函数完成取值和赋值
css书写位置有三种， js就有三种操作方法:行内式、嵌入式、外链式
2. 操作行间样式：
- style --> css
2.1 一个参数: 获取属性值
var eleValue = $("div").css("width");
// 获取"div"标签的"width"属性值
2.2 两个参数: 设置属性
$("div").css("width", "200px");
// 设置"div"标签的"width"属性
2.3 一个参数: 参数是对象, 设置属性:
var obj = {"width": 300, "height": 300, "background": "red"}
$("div").css(obj)
特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：$(“div”).css(“width”)，获取的是第一个div的width。
3.操作样式类名:
className --> add/remove/toggleClass()
3.1 添加类: addClass()
$('div').addClass('aaa') // 添加类
3.2 移除类: removeClass():
$('div').removeClass('box') // 删除类
3.3 切换/开关添加类:toggleClass()
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
五、绑定click事件:
1. 绑定click事件:
给元素绑定click事件，可以用如下方法：
$('#btn1').click(function(){
// 内部的this指的是原生对象
// 使用jquery对象用 $(this)
})
2.案例:选项卡
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.tab_con{
width:500px;
height:350px;
margin:50px auto 0;
}
.tab_btns{
height:50px;
}
.tab_btns input{
width:100px;
height:50px;
background:#ddd;
border:0px;
font: 18px/50px 'simsun';
float: left;
cursor: pointer;
outline:none;
}
.tab_btns .active{
background:gold;
}
.tab_cons{
height:300px;
}
.tab_cons div{
height:300px;
line-height:300px;
text-align:center;
display:none;
font-size:30px;
}
.tab_cons .current{
display:block;
background:gold;
}
</style>
<!-- 1.JQuery引入 -->
<script src="js/jquery-1.11.1.js"></script>
<script>
// 2.入口函数
$(function(){
// 需求1：鼠标点击上面的input，点击谁，谁添加active类。其他input取消active类
// 需求2：鼠标点击上面的input，下面的div对应索引值的添加current类，其他的去掉current类。
// // 需求1：鼠标点击上面的input，点击谁，谁添加active类。其他input取消active类
// $(".tab_btns input").click(function(){
// // 点击谁，谁就添加active类( this 代指函数调用者 -- 被点击的标签)
// $(this).addClass('active')
// // 其他兄弟取消active类
// $(this).siblings('input').removeClass('active')
// // 需求2：鼠标点击上面的input，下面的div对应索引值的添加current类，其他的去掉current类。
// // 获取被点击的元素，在父盒子中的索引值。
// var index = $(this).index()
// // 根据索引值获取元素，添加类名
// $(".tab_cons div").eq(index).addClass('current')
// // 其他的兄弟标签隐藏
// $(".tab_cons div").eq(index).siblings('div').removeClass('current')
// })
// 简单版
$(".tab_btns input").click(function(){
// 需求1：鼠标点击上面的input，点击谁，谁添加active类。其他input取消active类
$(this).addClass('active').siblings().removeClass('active')
// 需求2：鼠标点击上面的input，下面的div对应索引值的添加current类，其他的去掉current类。
$(".tab_cons div").eq($(this).index()).addClass('current').siblings().removeClass('current')
})
})
</script>
</head>
<body>
<div class="tab_con">
<!-- 这个盒子里面的input是上面的选项 -->
<div class="tab_btns">
<input type="button" value="按钮一" class="active">
<input type="button" value="按钮二">
<input type="button" value="按钮三">
<input type="button" value="按钮四">
<input type="button" value="按钮五">
</div>
<!-- 这个盒子里面的div是显示区域 -->
<div class="tab_cons">
<div class="current">按钮一对应的内容</div>
<div>按钮二对应的内容</div>
<div>按钮三对应的内容</div>
<div>按钮四对应的内容</div>
<div>按钮五对应的内容</div>
</div>
</div>
</body>
</html>
运行结果:
六、JQuery动画:
(未完, 待续…)