由于现在接手的项目需要用到jQuery,而身为jQuery小白的我之前略微的接触了一点,所以只能做到局部看得懂,却写不出.这使我开发效率大大降低,工欲善其事必先利其器!,于是我走上了jQuery的探索之路.下面是我这四天以来,边学习边实操的代码,分享给大家:
目录结构:
特别说明:除了最后一个案例,前面所有的案例只用到lib中唯一一个js文件:jQuery-1.11.3.min.js
已经将源代码发布到GitHub中,供大家下载学习,下载地址:https://github.com/godlikecheng/jQuery_Learning
下面则是已经copy下来的源代码:
01- jQuery入口函数
<!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>JQuery入口函数</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<input type="button" id="btn" value="123" />
<script>
//DOM
// window.onload = function () {
// var btn = document.getElementById('btn');
// btn.onclick = function (e) {
// alert(this.value);
// }
// };
window.onload = function(){
console.log('load')
}
//jQuery占用了两个全局变量 $ === jQuery //true
$(function () {
//页面加载完成后自动执行
console.log('ready1')
var btn = document.getElementById('btn');
btn.onclick = function(e){
alert(this.value);
}
}); //$是一个函数，Jquery构造函数
//文档加载完成之后自动执行回调函数
$(document).ready(function () {
console.log('ready2')
});
</script>
</body>
</html>02-jQuery选择器
<!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>jQuery选择器</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script>
//dom
// window.onload = function(){
// document.getElementById('btn');
// }
//jQuery
$(function(){
//页面加载完成之后
var $btn = $('#btn'); //#代表id选择器
//jQuery的构造方法：
//第一种方法： 可以接收一个回调函数，回调就是在页面加载完成之后执行。
//第二种用法：还可以接收一个CSS选择器(string),返回选择器对应dom节点的jQuery包装对象
//我们一般给jQuery的对象家一个$
console.dir($btn);
//jQuery包装对象（所有的选择器选择返回的对象都是jQuery的包装对象。也就是一个伪数组）
//jQuery包装对象和dom相互转换。
var btn = $btn[0]; //jQuery → DOM
//dom 对象转换 jQuery
var $btn2 = $(btn); //jQuery构造函数的第三种用法，接收一个dom对象，转成jQuery的包装对象
console.dir($btn2);
//转成jQuery的包装对象之后，就拥有了jQuery.fn上的api
});
</script>
</body>
</html>03-jQuery其他选择器
<!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>jQuery选择器</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<!-- <p>我是P标签</p> -->
<div class="cd">
我是第一个div1
</div>
<div class="cd">
我是第一个div2
张宜成
</div>
<h3 tm="属性">标题属性</h3>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
$(function(){
//全部选择器，选择页面中的所有的标签元素
var $all = $('*');
console.dir($all);
//类选择器
var $cd = $('.cd');
console.dir($cd);
//将jQuery元素转换为dom元素，并取出第一个div
var div1 = $cd[0];
console.log(div1.innerHTML);
//标签选择器和并集选择器
console.dir($('div,h3'));
//交集选择器
console.dir($('div.cd2'));
//过滤器选择器和后代选择器
console.dir($('.list li:first'));
//包含选择器
var $div = $('div:contains("张宜成")');
//如果选择器返回的是多个元素的时候，那么返回第一个元素的内部文本
console.log($div.text()); //jQuery获取选择元素的内部文本
var domDiv = $div[0];
console.log(domDiv.innerHTML);
});
</script>
</body>
</html>04-jQuery实现隔行变色
<!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>隔行变色</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
<style>
html,
body,
div,
table,
td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ccc;
width: 400px;
}
td {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<table>
<tr>
<td>用户名</td>
<td>年龄</td>
<td>编号</td>
</tr>
<tr>
<td>张宜成</td>
<td>11</td>
<td>02</td>
</tr>
<tr>
<td>张程程</td>
<td>44</td>
<td>04</td>
</tr>
<tr>
<td>嗯哼</td>
<td>55</td>
<td>05</td>
</tr>
<tr>
<td>哈哈</td>
<td>66</td>
<td>07</td>
</tr>
</table>
<script>
$(function () {
//获得奇数行的tr标签
var oddTrs = $('tr:odd');
console.dir(oddTrs);
//DOM原始的写法，很麻烦，需要进行遍历
// for(var i = 0; i < oddTrs.length; i++){
// var domTr = oddTrs[i]; //拿到dom的tr标签对象
// domTr.style.backgroundColor = "#eee";
// }
//jQuery提供隐式迭代的用法
//jQuery设置dom元素的样式,提供了方法css('styleName','value')
//如果传一个参数,代表获取,传两个参数代表设置
oddTrs.css('backgroundColor', '#aaa');
//jQuery:如果包装对象里面的元素是多个的时候,做设置操作会影响包装对象中的所有dom
//但是获取值,只返回第一个元素的值.
//拿到所有的偶数行
$('tr:even').css('backgroundColor', '#eee');
});
</script>
</body>
</html>05-表格互斥学则高亮显示
<!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>表格高亮显示</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<table>
<tr>
<td>用户名</td>
<td>年龄</td>
<td>编号</td>
</tr>
<tr>
<td>张宜成</td>
<td>11</td>
<td>02</td>
</tr>
<tr>
<td>张程程</td>
<td>44</td>
<td>04</td>
</tr>
<tr>
<td>嗯哼</td>
<td>55</td>
<td>05</td>
</tr>
<tr>
<td>哈哈</td>
<td>66</td>
<td>07</td>
</tr>
</table>
<script>
$(function(){
//Jquery可以通过原型上click方法进行绑定点击事件
//$('tr'); //选择到了所有的tr
$('tr').click(function(e){
//点击了当前行,那么让当前行背景高亮,让其他的兄弟节点背景不高亮.
//jQuery的事件处理程序中.this依然指向 this依然指向绑定事件dom对象
$(this).css('backgroundColor','#ccc');
//拿到多个兄弟节点,隐式迭代全部设置为白色.
$(this).siblings().css('backgroundColor','#fff');
});
});
</script>
</body>
</html>06-jQuery绑定事件
<!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>jQuery绑定事件</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<input type="button" value="按钮" id="btn">
<script>
window.onload = function(){
var btn = document.getElementById('btn');
//dom 0 级绑定时间的方式
//事件处理程序只能绑定一个,绑定多个事件处理程序后面的会覆盖前面的.
btn.onclick = function(){
console.log('1234');
//this === 绑定事件的dom对象
};
//dom2级绑定事件的方式
//可以绑定多个事件处理程序,多个事件处理程序的执行顺序不能保证.
if (btn.addEventListener) {
btn.addEventListener('click',function(){
console.log('1234');
},false);
}else{
//兼容ie8及以下浏览器.
btn.attachEvent('onclick',function(){
var e = window.event;
});
}
};
</script>
<!-- jQuery绑定事件的方法 -->
<script>
$(function(){
//页面加载完成(dom树已经初始化好了,可以进行交互访问)
$('#btn').click(function(e){ // e = jQuery.fn.event
console.log('1234');
console.log(this.value)
});
$('#btn').click(function(e){ // e = jQuery.fn.event
console.log('12345');
});
$('#btn').click(function(e){ // e = jQuery.fn.event
console.log('123456');
});
//jQuery绑定事件的事件方式:类似于我们的Dom2级绑定事件的方式
//可以绑定多个事件处理程序,而且执行顺序是按照注册顺序执行.
//jQuery的事件处理程序中,this也执行绑定当前事件处理程序的dom对象
});
</script>
</body>
</html>07-其他简单事件绑定案例
<!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>其他简单事件绑定案例</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<div class="input-box">
<input type="text" value="1">
<input type="text" value="2">
<input type="text" value="3">
<input type="text" value="4">
</div>
</body>
<script>
$(function () {
var $inputArray = $('.input-box input');
//jQuery构造函数传入选择器,返回的是一个jQuery的包装对象
//大部分的api都是在jQuery包装对象上
// console.dir($inputArray);
$inputArray.focus(function (e) {
console.log(this.value); //this 就是当前的input标签
});
//简单绑定事件,接收两个参数的情况
$inputArray.change('张宜成', function (e) {
console.dir(e); //jQuery封装的事件对象
console.log(e.data);
});
// 事件方法被调用,但没有传递参数
//代码触发此事件,并模拟当前事件对应的操作.
$inputArray[3].focus(); //触发focus事件,模拟获取焦点的操作
});
</script>
</html>08-触发事件和事件处理程序
<!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>触发事件和事件处理程序</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<div>
<input type="button" value="按钮" id="btn">
</div>
<script>
$(function () {
//绑定事件
$('#btn').click(function (e, a, b) {
console.log(e, a, b);
});
$('div').click(function(e){
console.log('div is cliced');
});
//触发事件
// $('#btn').click(); //第一种触发方式
//第二种触发点击事件
// $('#btn').trigger('click',['1234','3333']);
//触发事件处理程序,不触发事件本身
$('#btn').triggerHandler('click',[2,3]);
});
</script>
</body>
</html>09-jQuery省市选择
<!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>jQuery省市选择</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<select name="pro" id="proSel"></select>
<select name="city" id="citySel"></select>
<script>
//第一步:初始化好所有的省信息
//模拟从ajax获取的数据
var data = [{
name:"北京",
cities:[
"西城","东城","崇文","宣武","朝阳"
]
},
{
name:"山东",
cities:[
"潍坊","济南","青岛","日照","威海"
]
}
];
$(function(){
//初始化省的数据
initProSel();
});
//省的下拉列表的初始化
function initProSel(){
var strHTMLArray = [];
for(var i = 0; i < data.length; i++){
var proName = data[i].name;
//<option value = "北京">北京</option>
strHTMLArray.push('<option value="'+ proName +'">' + proName + '</option>')
}
//把拼接好的标签放到省的select下面
//jQuery的html方法已经对ie8的select设置innerHTML的bug做了相关处理,可以直接用.
$('#proSel').html(strHTMLArray.join(''));
//给省的select标签绑定change事件
$('#proSel').change(function(){
//当省选择完之后,要加载城市的信息到citySel
//拿到当前选择的省的名字
//console.log($('proSel').val());
var proName = $('#proSel').val();
for(var j = 0; j < data.length; j++){
if(data[j].name == proName){
var cities = data[j].cities;
initCityes(cities);
}
}
});
//触发省change的事件处理程序
$('#proSel').triggerHandler('change');
}
//初始化城市的信息
function initCityes(cities){
var strHTMLArray = [];
for(var i = 0; i < cities.length; i++){
//var cityName = cities[i];
strHTMLArray.push('<option value = "'+ cities[i] +'">' + cities[i] + '</option>');
}
$('#citySel').html(strHTMLArray.join(''));
}
</script>
</body>
</html>10-jQuery高级绑定事件的方式
<!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>jQuery高级绑定事件的方式</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<input type="button" value="按钮" id="btn">
<input type="button" value="按钮" id="btn2">
<script>
$(function () {
//jQuery简单绑定事件
// $('#btn').click(function(e){
// });
//第一种:绑定事件的方式,推荐使用
//jQuery高级绑定事件的方式
$('#btn').bind('click', function (e) {
console.log(this.value, e);
});
//第一个参数:事件类型,String
//第二个参数:给事件处理程序的参数的data属性传递数据
//第三个参数:事件处理程序的回调函数
//jQuery的bind方法,传递三个参数
$('#btn').bind('focus','222',function(e){
console.log(e.data);
});
//bind方法可以对同一个事件绑定多个事件处理程序,执行顺序就是绑定事件的顺序.
$('#btn').bind('focus','333',function(e){
console.log(e.data);
})
//第二种:同时绑定多个事件
// $('#btn2').bind('click focus', function(e){
// console.log(e.type);
// });
//第三种:绑定一个事件对象 最好不要用
$('#btn2').bind({
click:function(e){
console.log('click');
},
mousedown:function(e){
console.log(e.type);
}
});
});
</script>
</body>
</html>11-jQuery绑定事件的其他方式
<!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>jQuery绑定事件的其他方式</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<input type="button" value="按钮" id="btn">
<script>
$(function(){
//绑定的事件只执行一次,执行一次完毕后就失效了
$('#btn').one('click',function(e){
console.log(111);
});
});
</script>
</body>
</html>12-jQuery事件委托的绑定方式
<!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>事件委托</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
$(function () {
//事件委托绑定的方式,第一个是参数,是过滤子元素.
//第二个参数:事件类型.
//第三个参数:事件处理程序
$('.list').delegate('li', 'click', function (e) {
//dom
console.log(this.innerHTML); //innerText(ie),textContent(ff)
//jQuery
console.log($(this).text());
});
//jQuery: click(简单绑定事件)
//bind
//one:事件只执行一次
//live:对动态创建的dom元素绑定事件
//delegate:事件委托绑定
});
</script>
</body>
</html>13-jQuery的大一统绑定事件的方式
<!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>ON绑定事件</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<input type="button" value="按钮" id="btn">
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
$(function () {
//on替代 bind 动态创建元素绑定事件的方式
$('#btn').on('click', function (e) {
console.log(123);
});
//on替代live动态创建元素绑定事件的方法
//dom动态创建
var domP = document.createElement('p');
domP.innerHTML = '1234';
$(domP).on('click', function (e) {
console.log($(this).text());
});
document.body.appendChild(domP);
//jQuery 动态创建dom标签
var $p = $('<p>123456789</p>');
//给动态标签绑定事件
$p.on('click', function (e) {
console.log($(this).text());
});
//给页面中的body添加$p标签
$('body').append($p);
//jQuery构造函数的用法复习
//1.接收一个回调函数,作为:document ready事件
//2.可以接收一个字符串作为 选择器进行选择页面中元素,返回jQuery包装对象.
//3.可以接收一个dom对象,将dom对象转换jQuery包装对象
//4.可以接收一个html标签字符串,创建成jQuery包装对象
//On 替代deledate方法
$('.list').on('click','li',function(e){
console.log($(this).html());
});
});
</script>
</body>
</html>14-accordion手风琴效果
<!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>手风琴效果</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<style>
/* 更强大版本看28 */
</style>
<body>
<ul class="ac">
<li class="ac-iteam on">
<div class="ac-item-hd">头部1</div>
<div class="ac-item-bd">内容1</div>
</li>
<li class="ac-iteam">
<div class="ac-item-hd">头部2</div>
<div class="ac-item-bd">内容2</div>
</li>
<li class="ac-iteam">
<div class="ac-item-hd">头部3</div>
<div class="ac-item-bd">内容3</div>
</li>
<li class="ac-iteam">
<div class="ac-item-hd">头部4</div>
<div class="ac-item-bd">内容4</div>
</li>
</ul>
<script>
$(function () {
$('.ac-item-hd').on('click', function (e) {
//addClass 添加样式类
$(this).parent().addClass('on');
//removeClass 是移除样式类
$(this).parent().siblings('li').removeClass('on'); //隐式迭代
});
});
</script>
</body>
</html>15-jQuery解绑事件
<!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>解绑事件</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<input type="button" value="解绑事件" id="btn">
<input type="button" value="解绑命名空间事件" id="btnoffNameSpace">
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
$(function () {
//绑定事件
$('.list li').on('click', function (e) {
console.log(this.innerHTML);
});
//事件类型后面 .demo 表示当前事件所属 demo命名空间
$('.list li').on('click.demo',function(e){
console.log("==",this.innerHTML,"==");
});
$('.list li').on('click.demo',function(e){
console.log("===",this.innerHTML,"===");
});
$('#btn').on('click',function(e){
//解绑on的click事件
// $('.list li').off('click');
//解绑所有事件
$('.list li').off();
});
//解绑命名空间事件
$('#btnoffNameSpace').on('click',function(e){
//解绑了命名空间事件,其他命名空间的事件或者没有命名空间的事件不受影响
$('.list li').off('click.demo');
});
});
</script>
</body>
</html>16-jQuery事件对象
<!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>jQuery事件对象</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<p>
张宜成张宜成张宜成张宜成张宜成张宜成
</p>
<input type="text"/>
<script>
$(function () {
$('p').on('click', function (e) {
console.log(e);
console.log(e.width);
});
$('input:text').on('keydown',function(e){
//which可以获得键盘键,鼠标键
console.log(e.which);
});
//绑定一个自定义事件
$('input:text').on('myevent',function(e){
console.log('我的自定义事件');
console.log(this.value);
});
//触发自定义事件
$('input:text').trigger('myevent');
})
</script>
</body>
</html>17-jQuery合成事件案例
<!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>合成事件案例</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
<style>
.box {
position: absolute;
overflow: hidden;
border: 1px solid #ccc;
}
.left {
height: 200px;
width: 100px;
float: left;
}
.box .aside {
/* display: none; */
width: 100px;
height: 200px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="aside"></div>
</div>
<script>
$(function(){
$('.box').hover(function(e){
//鼠标移入,让aside标签显示
$('.aside').css('display','block');
},function(e){
$('.aside').css('display','none');
});
});
</script>
</body>
</html>18-jQuery属性读写操作
<!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>jQuery属性读写</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<input type="checkbox" checked name="ckb" id="ckb2">
<p class="txt" tmd="ss">搜索</p>
<p class="txt" tmd="ss">搜索</p>
<p class="txt" tmd="ss">搜索</p>
<script>
$(function(){
//第一种:属性读取的用法,接收一个参数:属性名字,返回第一个匹配的对象的属性值
//读取属性
console.log($('.txt').attr('tmd'));
//第二种: 设置属性,接收两个参数.第一个参数:属性名字.
//第二个参数是:要设置的属性值
//写入属性
// $('.txt').attr('tmd','1234');
console.log($('.txt').attr('tmd'));
//通过attr方法获取的单属性的值的时候就是属性名字或者undefined
console.log($('#ckb2').attr('checked'));
//第三种用法,可以同时设置多个属性值,传入一个属性对象
$('p').attr({
mk:'123',
md:'456'
});
//第四种用法:jQuery回调函数
$('p').attr('tmd',function(index,oldAttr){
return oldAttr + index; //隐式迭代
});
console.log($('p'));
//设置单个属性值设置方法
// $('#ckb2').removeAttr('checked');
// $('#ckb2').attr('checked','checked');
//单属性的处理一般都要用prop来处理
//checked selected disabled ==> Boolean
$('#ckb2').prop('checked',true);
$('#ckb2').prop('checked',false);
});
</script>
</body>
</html>19-动态创建表格案例
<!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>动态创建表格案例</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<table class="list">
<thead>
<th>用户名</th>
<th>邮箱</th>
<th>年龄</th>
</thead>
<tbody>
<tr>
<td>张宜成</td>
<td>[email protected]</td>
<td>18</td>
</tr>
</tbody>
</table>
<script>
var data = [{
name:'张宜成1',
mail:'[email protected]',
age:20
},
{
name:'张宜成2',
mail:'[email protected]',
age:22
},
{
name:'张宜成4',
mail:'[email protected]',
age:33
},
{
name:'张宜成5',
mail:'[email protected]',
age:99
},
{
name:'张宜成6',
mail:'[email protected]',
age:45
}];
//思路:把上面的数组进行遍历,拼接字符串把html字符串放到tbody中去.
$(function(){
var tempStrArray = [];
for(var i = 0; i < data.length; i ++){
var tempStr = "";
tempStr += "<tr>";
tempStr += "<td>" + data[i].name +"</td>";
tempStr += "<td>" + data[i].mail +"</td>";
tempStr += "<td>" + data[i].age +"</td>";
tempStr += "</tr>";
//把拼接的字符串放到数组中
tempStrArray.push(tempStr);
}
//设置元素内部的标签的字符串, 第二种用法
$('.list tbody').html(tempStrArray.join(''));
//读取标签内部的html字符串,第一种用法
console.log($('.list tbody').html());
//第三种用法
$('.list tbody').html(function(index,oldHtml){
});
});
</script>
</body>
</html>20-jQuery实现开关灯案例
<!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>开关灯案例</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<style>
.cls{
background-color: #000;
}
</style>
<body>
<input type="button" value="关灯" id="btnLight">
<script>
$(function () {
$('#btnLight').on('click', function (e) {
//按钮点击关灯后:文字改成开灯,然后背景变成黑色
//再点击开灯,那么文字改为关灯,背景变白色
if($(this).val() == '关灯'){
$(this).val('开灯');
//addClass添加样式类
// $(document.body).addClass('cls');
}else{
//开灯的效果
$(this).val('关灯');
//reomveClass移除样式类
// $(document.body).removeClass('cls');
}
//切换样式类:如果有则去掉.,如果没有则添加上.
$(document.body).toggleClass('cls');
});
});
// attr() prop() html() text() val() addClass() toggleClass()
//hasClass('cls') ==> Boolean
</script>
</body>
</html>21-jQuery样式处理
<!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>样式处理</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
<style>
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<script>
$(function(){
//css jQuery内部做了兼容处理,即使没有设置css属性值,会把最终的结果返回.
//全部标签颜色设置为红色
// $('p').css('color','red');
$('p:first').css('color','red');
// $('p:last').css('color','red');
console.log($('p:first').css('color'));
$('p').css({color:'red',"font-size":'18px',"background-color":'blue'})
//动态创建标签元素
//jQuery构造函数的用法汇总:
//1.选择器 2.把dom对象转换jQuery对象, 3.接收回调函数,作为网页加载完成的入口
//4.接收一个html的字符串,创建成动态的dom包装对象.
// $('<div><span>123</span</div>').appendTo(document.body); //appendTo追加父元素 前面是子 后面是父
var $div = $('<div><span>123</span></div>')
$(document.body).append($div); //append 追加子元素 前面是父 后面是子
});
</script>
</body>
</html>22-jQuery实现视频案例标签
<!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>视频标签案例</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<style>
html,
body,
div {
padding: 0;
margin: 0;
}
.label-wrap {
width: 300px;
/* height: 30px; */
line-height: 30px;
padding: 10px;
border: 1px solid #ccc;
overflow: hidden;
margin: 100px auto;
}
.label-wrap .txt-lb {
border: none;
outline: none;
height: 30px;
line-height: 60px;
width: 30px;
float: left;
}
.label-wrap .lb-span {
float: left;
border: 1px solid #ccc;
padding: 0 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="label-wrap">
<span class="lb-span">jQuery
<i class="glyphicon glyphicon-remove"></i>
</span>
<input type="text" class="txt-lb">
</div>
</body>
<script>
$(function () {
//当文本框按下按键时处理
$('.txt-lb').on('keydown', function (e) {
//判断用户是否按下了回车: e.which == 13 回车键
if (e.which == 13) {
InputToLable();
} else if (e.which == 8) {
//按下了删除键
//把最后一个lb-span标签删除,把里面文本放到文本上去
if ($(this).val().length <= 0) {
var txt = $('.label-wrap span:last').text();
$(this).val(txt);
$('.label-wrap span:last').remove();
//取消默认行为,取消后退键删除字符的默认行为
e.preventDefault();
e.stopPropagation();
}
}
});
//给整个div绑定一个点击事件,进行给文本获取焦点
$('.label-wrap').on('click', function (e) {
$('.txt-lb').focus();
});
//当文本框失去焦点的时候,给div添加span标签,另外input清空
$('.txt-lb').on('blur', function () {
InputToLable();
});
//删除label按钮点击事件
$('.label-wrap').on('click', 'i', function (e) {
$(this).parent().remove();
});
//将文本框中的文本生成label样式的标签
function InputToLable() {
//判断文本框不为空,则进行添加标签操作
if ($(".txt-lb").val().length > 0) {
//当前文本框的文本生成一个span标签放到文本框之前
var $lb = $('<span class="lb-span">' + $('.txt-lb').val() + '<i class="glyphicon glyphicon-remove"></i></span>');
//在文本框前面追加一个lb对象
$('.txt-lb').before($lb);
$('.txt-lb').val(''); //设置value为空
}
}
});
</script>
</html>23-jQuery包裹方法
<!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>jQuery包裹标签</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<p id="p1">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<script>
$(function(){
//让每个p标签都包裹一个div标签
// $('p').wrap('<div></div>');
//把所有匹配的元素用一个标签进行包裹
// $('p').wrapAll('<div></div>');
//把标签内部的子元素用一个标签进行包裹
// $('p').wrapInner('<span></span>');
//把A替换掉所有满足selector条件的B元素
// $('<span>张宜成</span>').replaceAll('p:first');
//把A用B来进行替换
// $('p:last').replaceWith('<div>---</div>');
var t = $('p:first').clone(true);
console.log(t);
$('p:first').clone(true).appendTo('body');
});
// 兄弟节点级别操作:after before insertBefore insertAfter
// 子节点的操作: append appendTo prepend prependTo
// 包裹节点: wrap wrapAll wrapInner
// 删除子节点: empty remove
// 替换节点: replaceWith replaceAll()
// 动态创建节点:$(<div></div>)
</script>
</body>
</html>24-jQuery宽高和位置
<!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>宽高和位置</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
<style>
html,body,div{
padding: 0;
margin: 0;
}
.box{
width: 100px;
height: 100px;
border: 13px solid #ccc;
padding: 10px;
margin: 22px;
background-color: #c09;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<input type="button" value="获取滚动高度" id="btnGetScrollTop"/>
<script>
$(function() {
console.log('innerHeight:',$('.box').innerHeight());
console.log('innerHeight:',$('.box').innerWidth());
//计算边框 + 内边距 + 内容
console.log('innerHeight true:',$('.box').outerHeight());
console.log('innerHeight true:',$('.box').outerWidth());
//计算外边框 + 内边距 + 内容 + 边框
console.log('outerHeight:',$('.box').outerHeight(true));
console.log('outerHeight:',$('.box').outerWidth(true));
//读取内容区域的宽高
console.log('width:',$('.box').width());
console.log('height:',$('.box').height());
//设置内容区域宽高
console.log('width:',$('.box').height(150));
// console.log('height:',$('.box').height(150));
//也可以传字符串
// console.log('height:',$('.box').width('200px'));
//用的非常少
$('.box').width(function(index,width){
return width + index * 20;
});
//读取内容区域的宽高
console.log('width:',$('.box').width());
console.log('height:',$('.box').height());
$('#btnGetScrollTop').on('click', function(){
//console.log($(window).scrollTop());
//滚动条滚动效果 (0)为位置
$(window).scrollTop(0);
});
// height width innerWidth innerHeight
//outerHeight outerWidth(true)
//scrollTop scrollLeft 可读可写
//position ==> {left:19, top:20}; //相对于定位的元素的dom中 offsetLeft offsetTop
//offset ==> {left:19,top:20} // 相对于视口的宽高 clientLeft clientTop
});
</script>
</body>
</html>25-jQuery动画系统
<!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>动画系统</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
<style>
html,body,div{
padding: 0;
margin: 0;
}
.box{
width: 100px;
height: 100px;
background-color: #000;
display: none;
}
</style>
</head>
<body>
<input type="button" value="显示" id="btnShow">
<input type="button" value="隐藏" id="btnHide">
<input type="button" value="划上" id="btnSlideUp">
<input type="button" value="划下" id="btnSlideDown">
<input type="button" value="切换滑动" id="btnToggleSlide">
<input type="button" value="淡入" id="btnFadeIn">
<input type="button" value="淡出" id="btnFadeOut">
<input type="button" value="设置透明度" id="btnFadeTo">
<div class="box"></div>
<script>
$(function(){
$('#btnShow').on('click',function(e){
//给show 传的参数: 字符串类型:slow(600) 慢 Normal(400) fast:200ms
// $('.box').show('slow');
// $('.box').show('fast');
//给show方法设置时间间隔 单位是毫秒
// $('.box').show(2000);
// $('.box').show(2000,"linear");
$('.box').show(700,"swing",function(e){
console.log('animate is over!!')
});
});
$('#btnHide').on('click',function(e){
$('.box').hide(700); //隐藏
});
$('#btnSlideUp').on('click',function(e){
$('.box').slideUp('slow');
});
$('#btnSlideDown').on('click',function(e){
$('.box').slideDown(300,'linear',function(){
console.log('slide-down is over');
});
});
$('#btnToggleSlide').on('click',function(e){
$('.box').slideToggle(500);
});
$('#btnFadeIn').on('click',function(e){
$('.box').fadeIn(1000);
});
$('#btnFadeOut').on('click',function(e){
$('.box').fadeOut(1000);
});
$('#btnFadeTo').on('click',function(e){
// 0是完全透明
// 1是完全不透明
// $('.box').fadeTo(1000, 0.1);
$('.box').show(1000).slideUp(1000).slideDown(1000).fadeTo(1000,0.5)
});
// show hide
//slideUp slideDown slideToggle
// fadeIn fadeOut fadeToggle
// 参数: [duration]:动画持续的时间, slow 1000
// [easing]: linear swing 动画的效果
// fn 动画结束的时候执行的回调函数
// 返回值:都是调用动画的包装对象
});
</script>
</body>
</html>26-jQuery自定义动画
<!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>自定义动画</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<style>
html,
body,
div {
padding: 0;
margin: 0;
}
.box {
height: 100px;
width: 100px;
background-color: #098;
border: 1px solid #ccc;
position: absolute;
}
</style>
<body>
<input type="button" value="动画" id="btnAnimate">
<div class="box"></div>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1>16</h1>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
<input type="button" value="滚动到顶部" id="btnScrollTop"/>
<script>
$(function () {
$('#btnAnimate').on('click',function(e){
$('.box').animate({
height:200,
width:300,
left:'+=30px', //每次都执行增加30像素的动画
top:'+=50px',
paddingLeft:'+=50px'
},500,'swing');
});
$('#btnScrollTop').on('click',function(e){
$('html,body').animate({
scrollTop:0 //animate动画效果 scrollTop实现滚动
},500);
});
});
</script>
</body>
</html>27-动画队列
<!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>动画队列</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
<style>
.box {
height: 100px;
width: 100px;
border: 1px solid #ccc;
background-color: magenta;
}
</style>
</head>
<body>
<input type="button" value="动画" id="btn">
<input type="button" value="立即结束动画" id="btnFinish">
<input type="button" value="停止动画" id="btnStop">
<div class="box"></div>
<script>
$(function () {
$('#btn').on('click', function (e) {
$('.box').hide(1000)
.show(1000)
.slideUp(1000)
.slideDown(1000)
.fadeTo(1000, 0.5)
.animate({ width: 200 }, 1000);
});
$('#btnFinish').on('click', function (e) {
//立即结束动画,让dom元素变化到最终动画队列都结束的效果状态
$('.box').finish();
});
$('#btnStop').on('click',function(e){
//stop方法传入一个参数:false或者不传参数,表示结束当前的动画,后续的动画不受影响.
// $('.box').stop(false);
//如果传入第一个参数为true,后续的动画也都受影响.不执行了.
// $('.box').stop(true);
//让dom元素动画状态结束,然后让dom元素到当前动画结果的状态
$('.box').stop(true,true);
});
});
</script>
</body>
</html>28-手风琴效果动画版本
<!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>手风琴效果</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<style>
/* 未添加CSS样式类,所以效果无法展示,抱歉 */
</style>
<body>
<ul class="ac">
<li class="ac-iteam on">
<div class="ac-item-hd">头部1</div>
<div class="ac-item-bd">内容1</div>
</li>
<li class="ac-iteam">
<div class="ac-item-hd">头部2</div>
<div class="ac-item-bd">内容2</div>
</li>
<li class="ac-iteam">
<div class="ac-item-hd">头部3</div>
<div class="ac-item-bd">内容3</div>
</li>
<li class="ac-iteam">
<div class="ac-item-hd">头部4</div>
<div class="ac-item-bd">内容4</div>
</li>
</ul>
<script>
$(function () {
$('.ac-item-hd').on('click', function (e) {
//addClass 添加样式类
$(this).parent().addClass('on');
$(this).siblings('.ac-item-bd').slideDown(500);
//removeClass 是移除样式类
$(this).parent().siblings('li').removeClass('on').find('.ac-item-bd').slideUp(500); //隐式迭代
});
});
</script>
</body>
</html>29-京东秒杀案例
<!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>京东秒杀案例</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
<style>
html,
body,
div {
padding: 0;
margin: 0;
}
.box {
width: 640px;
height: 326px;
border: 1px solid #ccc;
overflow: hidden;
position: relative;
}
.cv-box {
position: absolute;
top: 100%;
}
</style>
</head>
<body>
<div class="box">
<img src="../img/1.png" alt="">
</div>
<div class="cv-box">
<img src="../img/2.png" alt="">
</div>
<script>
$(function () {
$('.box').hover(function (e) {
//鼠标移入:top减少到0
$('.cv-box').animate({ top: 0 }, 300);
}, function (e) {
//鼠标移开
$('.cv-box').animate({ top: '100%' }, 300);
});
});
</script>
</body>
</html>30-jQuery高级
<!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>jQuery高级</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="../lib/jquery-1.11.3.min.js"></script>
<script>
//数组的方法forEach ie9+
var arr = ['a', 'b', 3, 4];
// value数组的元素 index数组元素的索引
arr.forEach(function (value, index) {
console.log('index:', index, 'value:', value)
});
//jQuery原型上提供了each
$(function(){
$('li').each(function(index,elem){
console.log(index,elem);
});
});
</script>
</body>
</html>31-jQuery构造函数属性和方法
<!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>jQuery构造函数属性和方法</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="../lib/jquery-1.11.3.min.js"></script>
<script>
//jQuery的构造函数方法
//jQuery构造函数的几个应用:
//1.选择元素: $('li') $('.box')
//2.dom对象转换jQuery包装对象, $(dom) ==> jQuery
//3.动态创建dom标签jQuery包装对象, $('<div></div>')
//each方法
// jQuery.each([1, 'abc', 2, 3], function (index, value) {
// console.log(index, value);
// });
$(function () {
//页面加载完成后才执行
// jQuery.each($('li'),function(index,value){
// console.log(index,value);
// });
//jQuery构造函数的map方法
// var newArrJQuery = jQuery.map(['a', 'b', 'c', 'd'], function (value, index) {
// console.log(value, index);
// return value + index;
// });
// console.log(newArrJQuery);
// var n2 = $.grep([0, 1, 2], function (n, i) {
// return n > 0;
// });
// console.log(n2);
});
//JS ec5 中提供的map方法 对数组中的元素进行处理并返回新数组
// var arr = ['a', 'b', 'c', 'd'];
// var newArr = arr.map(function(value, index){
// return value + index; // 'a' + 0
// });
// console.log(newArr);
//浅拷贝,子对象只复制 子对象的地址.具体内容不进行复制.
// var target = {name:'zyc'};
// var obj1 = {age:18, cellphone:'13181699498',mail:'[email protected]'}
// var p1 = {k:123, m:'abc'};
// var obj2 = {run:function(){ console.log(1);}, p:p1}
// var newObj = jQuery.extend(target, obj1, obj2);
// console.log(newObj, target);
// console.log(newObj === target)
// //console.log(newObj.p === p1);
// console.log(newObj.p.k); //123
// p1.k = 444; //newObj.p.k
// console.log(newObj.p.k); //444
//深拷贝
var target = {name:'zyc'};
var obj1 = {age:18, cellphone:'13181699498',mail:'[email protected]'}
var p1 = {k:123, m:'abc'};
var obj2 = {run:function(){ console.log(1);}, p:p1}
var newObj = jQuery.extend(true,target, obj1, obj2);
console.log(newObj, target);
console.log(newObj === target)
//console.log(newObj.p === p1);
console.log(newObj.p.k); //123
p1.k = 444; //newObj.p.k
console.log(newObj.p.k); //123
console.log('p1.k', p1.k); //444
</script>
</body>
</html>32-jQueryl链式编程
<!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>链式编程</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<div class="box">
sss
</div>
<script>
$(function () {
$('.box').text('33333').slideUp(1000).slideDown(1000);
});
//链式编程的原理:对象调用了方法后,方法返回当前对象.
var cat = {
run: function () {
console.log('runing');
return this; //核心:方法内部又把当前对象返回了
},
sayHi: function () {
console.log('Hi');
return this;
},
jump: function () {
console.log('jump');
return this;
}
};
cat.run().sayHi().jump();
</script>
</body>
</html>33-评分控件案例
<!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>评分控件案例</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
<style>
html,
body,
div,
ul,
li {
padding: 0;
margin: 0;
}
ul,
ol {
list-style: none;
}
.list li {
float: left;
width: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<ul class="list">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
<script>
$(function () {
//第一个效果: 当鼠标移入 五角星的时候.之前的五角星和自己都变成实心的五角星
$('.list li').hover(function (e) {
//鼠标移入:当鼠标移入 五角星的时候. 之前的五角星和自己都变成实心的五角星
$(this).text('★').prevAll().text('★'); //隐式迭代.
}, function (e) {
//鼠标移出:把自己变成空心五角星,而且后面的也都变成空心五角星了
$(this).text('☆').nextAll().text('☆');
}).on('click', function (e) {
//点击之后,记录当前点击的是谁
$(this).addClass('cur').siblings().removeClass('cur');
});
//给整个ul标签绑定一个mouseleave事件.
$('.list').on('mouseleave', function (e) {
//拿到当前cur类的li标签
$('.list li.cur').text('★')
.prevAll().text('★') //前面的节点都设置成实心
.end().nextAll().text('☆'); //点击元素后面的节点设置成空心
});
});
</script>
</html>34-jQuery插件扩展
<!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>jQuery插件扩展</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<div class="box">
123
</div>
<script>
//jQuery扩展插件:
// 第一种:扩展jQuery原型对象的方法
(function ($) {
//给jQuery原型的扩展方法,可以jQuery的包装对象上使用
$.fn.logText = function () {
console.log(this.text());
}
})(jQuery);
//使用自己的扩展方法
$(function () {
//自定义扩展的原型的方法,也就是jQuery插件
$('.box').logText();
});
//第二种: 扩展jQuery构造函数上的插件(方法)
// jQuery.logTime = function(){
// console.log(Date.now().toString());
// }
//jQuery的extend方法,不传入target时,可以直接对jQuery构造函数扩展属性或方法.
$.extend({
logTime:function(){
console.log(new Date());
}
});
$.logTime();
</script>
</body>
</html>35-jQuery Ui插件应用
<!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>jQuery Ui</title>
<!-- 一定注意: 用jQuery的插件首先引用jQuery脚本后引用插件的脚本 -->
<script src="../lib/jquery-1.11.3.min.js"></script>
<script src="../lib/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<link rel="stylesheet" href="../lib/jquery-ui-1.12.1.custom/jquery-ui.css">
<link rel="stylesheet" href="../lib/jquery-ui-1.12.1.custom/jquery-ui.theme.css">
</head>
<body>
<div class="tabs">
<ul>
<li>
<a href="#tabs-1">商品</a>
</li>
<li>
<a href="#tabs-2">用户</a>
</li>
<li>
<a href="#tabs-3">管理</a>
</li>
</ul>
<div id="tabs-1">
<p>商品啊</p>
</div>
<div id="tabs-2">
用户的管理
<input type="button" value="弹出对话框" id="btnOpenDialog">
<div title="弹出来的对话框标题" class="dialog-box" style="display: none;">
对话框内容
<img src="../img/2.png" alt="">
</div>
</div>
<div id="tabs-3">
<img src="../img/1.png" alt="">
</div>
</div>
<script>
$(function () {
$('.tabs').tabs();
$('#btnOpenDialog').on('click', function () {
//弹出对话框
$('.dialog-box').dialog({
width: 660,
height: 420,
draggable: true, //设置是否可拖拽
buttons: [{
text: "关闭对话框",
click: function () {
$(this).dialog('close');
}
}],
close: function (e) {
console.log('close dialog')
}
});
});
});
</script>
</body>
</html>在此特别感谢马老师提供的高质量的资料.并将马老师推荐给同学们