Jquery概述
Jquery是一个优秀的javascript的轻量级框架之一，封装了dom操作、事件、页面动画、异步操作等功能。
Jquery与js的区别
Jquery虽然本质上也是js，但如果使用jQuery的属性和方法那么必须保证对象是Jquery对象而不是js对象。
jq与js对象之间的相互转换
- Jquery对象与js对象相互转换
js --> jq
$(js对象) 或者Jqueryjs对象)
jq --> js
jq对象[索引] 或者 jq对象.get(索引)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jq与js对象相互转换</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv">通过不同方式获得文本内容</div>
<script>
// 通过js方式修改文本内容
let elementById = document.getElementById('myDiv');
elementById.innerHTML = '通过js方式修改的';
// 通过jq方式修改文本内容
let $myDiv = $('#myDiv');
$myDiv.html("通过jq方式修改的")
// js对象和jq对象的：属性和方法不同通用
</script>
</body>
</html>
页面加载事件
- 页面加载事件
js
window.οnlοad=function(){}
jq
$(function(){})
区别
js：只能定义一次，如果定义多次，后加载会进行覆盖
jq：可以定义多次
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面加载事件</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<script>
// js页面加载事件
/* window.οnlοad=function () {
alert('js加载事件1');
}
window.οnlοad=function () {
alert('js加载事件2');
}*/
// jq页面加载事件
$(function () {
alert('jq加载事件1')
})
$(function () {
alert('jq加载事件2')
})
</script>
</body>
</html>
Jquery对象与dom对象的区别
Jquery选择器
基本选择器
-
标签（元素）选择器
* 语法：$(“html标签名”) 获得所有匹配标签名称的元素 -
id选择器
* 语法：$("#id的属性值") 获得与指定id属性值匹配的元素 -
类选择器
* 语法：$(".class的属性值") 获得与指定的class属性值匹配的元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<span class="female">拉克丝</span>
<span class="female">辛德拉</span>
<span class="female hero">女刀锋</span>
<span class="male hero">钢铁侠</span>
<span class="male hero">超人</span>
<span id="boss">灭霸</span>
<script>
// 1.获取span标签的jquery对象
$('span')
// 2.获取class有hero的jquery对象
$('.hero')
// 3.获得id="boss"的jquery对象
$('#boss')
</script>
</body>
</html>
层级关系选择器
-
后代选择器
* 语法：$(“A B”) 选择A元素内部的所有B元素 -
并集选择器
* 语法：$(“选择器1,选择器2…”) 获取多个选择器选中的所有元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>层级关系选择器</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="kangxi">
<span>儿子：雍正</span>
<p>
<span>孙子：乾隆</span>
</p>
</div>
<div>牛顿</div>
<script>
// 1. 获取所有的p,span的文本
console.log($('p span').text());//孙子：乾隆
// 2. 获取div的后代span的文本
console.log($('#kangxi span').text());//儿子：雍正 孙子：乾隆
//3.获取div标签的文本
console.log($('div').text()); // 儿子：雍正 孙子：乾隆 牛顿
</script>
</body>
</html>
属性选择器
-
属性选择器
* 语法：$(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器 -
复合属性选择器
* 语法：$(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text" name="username" value="用户名"/><br/>
<input type="text" name="nickname" value="昵称"/><br/>
<script>
// 1.获取type='text'的input标签
$('input[type="text"]');
// 2.获取type='text' 且 name="nickname" 的input标签
$('input[type="text"] [name="nickname"]');
</script>
</body>
</html>
过滤选择器
-
首元素选择器
* 语法： :first 获得选择的元素中的第一个元素 -
尾元素选择器
* 语法： :last 获得选择的元素中的最后一个元素 -
偶数选择器
* 语法： :even 偶数，从 0 开始计数 -
奇数选择器
* 语法： :odd 奇数，从 0 开始计数 -
指定索引选择器
* 语法： :eq(index) 指定索引元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>过滤选择器</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul>
<li>大娃（红娃）</li>
<li>二娃（橙娃）</li>
<li>三娃（黄娃）</li>
<li>四娃（绿娃）</li>
<li>五娃（青娃）</li>
<li>六娃（蓝娃）</li>
<li>七娃（紫娃）</li>
</ul>
<script>
// 1.获取第一个元素
$('li:first');
// 2.获取偶数索引元素
$('li:even');
// 3.获取指定索引2的元素
$('li:eq(2)');
//获取大于索引2的元素
$('li:gt(2)');
</script>
</body>
</html>
对象遍历
-
语法：
jq对象.each(function(index,element){})
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>对象遍历</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
</ul>
<script>
$('li').each(function (index, element) {
console.log(index);
console.log(element);
console.log(element.innerHTML); // 遍历的元素是js对象
console.log($(element).html()); // 升级为jq对象
console.log(this); // 当前遍历的元素，相当于element 补充
})
</script>
</body>
</html>
Jquery的dom操作
Jquery操作内容
-
text(): 获取/设置元素的标签体纯文本内容
* 相当于js： innerText属性 -
html(): 获取/设置元素的标签体超文本内容
* 相当于js： innerHTML属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>dom操作内容</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv"><p>天王盖地虎</p></div>
<script>
// 1.text()操作内容
//获取纯文本的内容
console.log($('#myDiv').text());
//设置纯文本内容
$('#myDiv').text('<h2>提莫一米五</h2>');//<h2>提莫一米五</h2>
// 2.html()操作内容
//获取超文本的内容
console.log($('#myDiv').html());
//设置超文本内容
$('#myDiv').html($('#myDiv').html() + `<h2>提莫一米五</h2>`);//提莫一米五
</script>
</body>
</html>
Jquery操作属性
-
val()： 获取/设置元素的value属性值
* 相当于：js对象.value -
attr(): 获取/设置元素的属性
removeAttr() 删除属性
* 相当于：js对象.setAttribute() / js对象.getAttribute() -
prop():获取/设置元素的属性
removeAttr() 删除属性
jq在1.6版本之后，提供另一组API prop 通常处理属性值为布尔类型操作
例如：checked selected等
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>dom操作属性</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<form action="#" method="get">
姓名 <input type="text" name="username" id="username" value="德玛西亚"/> <br/>
爱好
<input id="hobby" type="checkbox" name="hobby" value="perm" checked="checked">打球<br/>
<input type="reset" value="清空按钮"/>
<input type="submit" value="提交按钮"/><br/>
</form>
<!--
1. val()： 获取/设置元素的value属性值
* 相当于：js对象.value
2. attr(): 获取/设置元素的属性
removeAttr() 删除属性
* 相当于：js对象.setAttribute() / js对象.getAttribute()
3. prop():获取/设置元素的属性
removeAttr() 删除属性
jq在1.6版本之后，提供另一组API prop 通常处理属性值为布尔类型操作
例如：checked selected等
-->
<script>
// 1.获取文本框value属性
console.log($('#username').attr('value'));//查看
$('#username').attr('value', '盖伦');//新增or修改
$('#username').removeAttr('value'); // 删除
// 2.获取爱好的checked属性
console.log($('#hobby').prop('checked'));//true【如果该属性存在返回true，该属性不存在返回false】
</script>
</body>
</html>
Jquery操作样式
-
直接修改jq对象样式属性
语法：
jq对象.css()
css(样式名) 获取
css(样式名,样式值) 设置
优点：支持css语法
举例：font-size -
添加/删除jq对象样式
语法：
jq对象.addClass()
jq对象.removeClass() -
切换jq对象样式
语法：
jq对象.toggleClass() 无添加，有删除
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>dom操作样式</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<style>
#p1 {
background-color: red;
}
.mp {
color: green
}
.mpp {
background-color: lightgray;
}
</style>
</head>
<body>
<p id="p1">1. 设置一个css样式</p>
<p id="p2">2. 批量设置css样式</p>
<p id="p3">3. 通过class设置样式</p>
<p id="p4">4.
<button id="toggle">切换</button>
class样式
</p>
<script>
let $p1 = $('#p1');//获取p1
let $p2 = $('#p2');//获取p2
let $p3 = $('#p3');//获取p3
let $p4 = $('#p4');//获取p4
// 1. 设置一个css样式
$p1.css('background-color', "red");
// 2. 批量设置css样式
$p2.css({'border': '1px solid red', 'font-size': '20px'});
// 3. 通过class设置样式
$p3.addClass('mp mpp');
$p3.removeClass('mpp');
// 4. toggleClass() 切换一个class
$('#toggle').click(function () {
$p4.toggleClass('mpp')
})
</script>
</body>
</html>
Jquery操作元素
-
$(标签) 创建一个标签
$(‘ - xxx
- ’)
-
$.prepend() 在父标签中将子标签放在第一个位置
-
$.append() 在父标签中将子标签放在最后一个位置
-
$.empty() 清空子元素
-
$.remove() 删除自己
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>dom操作元素</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul id="star">
<li>拉克丝</li>
<li>金克斯</li>
</ul>
<script>
//let $star = $('#star'); // 无序列表
// 1.前面添加马尔扎哈
$('#star').prepend($('<li>马尔扎哈</li>'))
// 2.后面添加风女
$('#star').append($('<li>风女</li>'))
// 3.移出所有列表项
$('#star').empty();
// 4.删除无序列表
$('#star').remove();
</script>
</body>
</html>
Jquery绑定事件
js对象.事件属性=function(){}
jq对象.事件函数(function(){})
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jq事件绑定</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="button" value="js方式" id="jsBtn"> <br>
<input type="button" value="jq方式" id="jqBtn"> <br>
<script>
// js事件绑定
document.getElementById('jsBtn').onclick=function () {
alert('js事件绑定')
}
// jq事件绑定
$('#jqBtn').click(function () {
alert('jq事件绑定')
})
</script>
</body>
</html>
案例练习
隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>01-案例-隔行变色</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr bgcolor="#ffd770">
<th width="100px" >
<button id="toggle">全选</button>
</th >
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>5</td>
<td>牛奶制品</td>
<td>牛奶制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>6</td>
<td>大豆制品</td>
<td>大豆制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>7</td>
<td>海参制品</td>
<td>海参制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>8</td>
<td>羊绒制品</td>
<td>羊绒制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>9</td>
<td>海洋产品</td>
<td>海洋产品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>10</td>
<td>奢侈用品</td>
<td>奢侈用品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
<script>
//隔行换色
$(`tr:gt(0):even`).css('background-color', 'skyblue');//偶数索引，奇数行
$(`tr:gt(0):odd`).css('background-color', 'pink');//奇数索引，偶数行
let oldcolor;
//鼠标移入事件
$('tr:gt(0)').mouseover(function () {
//记录之前的颜色
oldcolor = $(this).css('background-color');
//设置新的颜色
$(this).css('background-color', 'red');
});
//鼠标移出事件
$('tr:gt(0)').mouseout(function () {
oldcolor = $(this).css('background-color', oldcolor);
});
//设置开关按钮
$('#toggle').click(function () {
$('input[type="checkbox"]').each(function (index, element) {
element.checked = !element.checked;
})
})
</script>
</body>
</html>
商品全选
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>案例-商品全选</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<!--
商品全选
1. 全选 点击全选按钮,所有复选框都被选中
2. 反选 点击反选按钮,所有复选框状态取反
-->
<button id="btn1">1. 全选</button>
<button id="btn2">2. 反选</button>
<br/>
<input type="checkbox">电脑
<input type="checkbox">手机
<input type="checkbox">汽车
<input type="checkbox">别墅
<input type="checkbox" checked="checked">笔记本
<script>
//全选【ID选择器记得加#】
$('#btn1').click(function () {
$(`input[type="checkbox"]`).prop('checked', true);
});
//反选，必须遍历
$('#btn2').click(function () {
$('input[type="checkbox"]').each(function (index, element) {//element是js对象
//使用的是js的方式
element.checked = !element.checked;
})
})
</script>
</body>
</html>
QQ表情选择
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>QQ表情选择</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.emoji {
margin: 50px;
}
ul {
overflow: hidden;
}
li {
float: left;
width: 48px;
height: 48px;
cursor: pointer;
}
.emoji img {
cursor: pointer;
}
</style>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="emoji">
<ul>
<li><img src="../img/01.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/02.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/03.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/04.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/05.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/06.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/07.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/08.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/09.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/10.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/11.gif" height="22" width="22" alt=""/></li>
<li><img src="../img/12.gif" height="22" width="22" alt=""/></li>
</ul>
<p id="word">
<strong>请发言：</strong>
<img src="../img/12.gif" height="22" width="22" alt=""/>
</p>
</div>
<script>
//class选择器
$('.emoji img').click(function () {
//alert('1');
//append表示向ID为word中追加内容，this代表的是当前 img标签 clone是克隆【将克隆的img追加进来】
$('#word').append($(this).clone());
})
</script>
</body>
</html>
298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
