1. 初始JQuery
1.1 原生js的缺点
- 不能添加多个入口函数(window.onload),如果添加了多个,后面的会把前面的覆盖
- 原生js的api名字都太长
- 原生js有的时候代码冗余
- 原生js中有些属性或者方法有浏览器兼容问题
- 原生js容错率比较低,前面的代码出了问题,后面的代码执行不了
1.2 体验jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
margin-top: 10px;
}
</style>
</head>
<body>
<input type="button" value="设置边框" id="btnOne" />
<input type="button" value="设置边框" id="btnTwo" />
<div></div>
<div></div>
<div></div>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
// 入口函数
$(document).ready(function (){
// 设置边框
$('#btnOne').click(function (){
$('div').css('border','1px solid red');
});
// 设置文本
$('#btnTwo').click(function (){
$('div').text('我是设置得文本');
});
})
// 这又是一个入口函数
$(document).ready(function (){
console.log('我又是一个入口函数')
})
</script>
jQuery的优势:
- 是可以写多个入口函数的
- jQuery的api的名字都容易记忆
- jQuery代码简洁(隐式迭代)
- 没有浏览器兼容问题
- 容错率比较高,前面的代码出了问题,后面的代码不受影响
如何使用jQuery:
- 引入jQuery文件
- 写一个入口函数
- 找到你要操作的元素(jQuery选择器),去操作他(给他添加属性,样式,文本…)
官网下载jQuery:https://releases.jquery.com/jquery/#jquery-all-1.x
2. JQuery的基础
2.1 jQuery的入口函数
写法:
$(document).ready(function (){})
$(function (){});
jQuery入口函数和window.onload入口函数的区别
- window.onload入口函数不能写多个,而jQuery入口函数能写多个
- 执行时机不同,window.onload后执行,jQuery先执行,无关位置
- jQuery入口函数要等待页面上dom树加载后执行
- window.onload入口函数要等待页面上所有的资源(dom树/外部css/js链接/图片)加载完毕后执行
2.2 $是一个函数
-
$是什么?
如果报了这个错误:$ is not defined,没有引入jQuery文件
$与window是等价的,都是一个函数
-
jQuery文件的结构:
(function(){window.jQuery = window.$ = jQuery;}());
是一个自执行函数(给window添加一个jQuery属性和$属性) -
$是一个函数,如果参数传递不同,效果也不同:如果参数传递的是一个匿名函数-》入口函数;如果参数传递的是一个字符串-》选择器/创建一个标签;如果参数是一个DOM对象,那他就会把DOM对象转换为jQuery对象。
2.3 DOM对象和jQuery对象
-
dom对象:原生js选择器获取到的对象,如
var div=document.getElementById("one");
特点:只能调用dom方法或者属性,不能调用jQuery的属性和方法
-
jQuery对象:利用jQuery选择器获取到的对象,如
var $div1=$('#one');
特点:只能调用jQuery的方法和属性,不能调用原生jsDOM对象的属性和方法
-
jQuery对象是一个伪数组jQuery对象其实就是dom对象的一个包装集
-
dom转jQuery:
var div1=document.getElementById('one'); var $div1=$(div1);
-
jQuery转dom
// 1. 使用下标取出来 var $divs=$('div'); var div1=$divs[0]; console.log(div1); // 2. 使用jQuery的方法 var div2=$divs.get(1); console.log(div2);
3. jQuery元素设置
3.1 设置获取文本内容text()
text():获取和设置文本
<body>
<input type="button" value="获取" id="getBtn">
<input type="button" value="设置" id="setBtn">
<div id="div1">我是一个div标签
<p>我是一个p标签<span>span1</span></p>
</div>
<div>我是一个div2标签
<p>我是一个p2标签<span>span2</span></p>
</div>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
// 1. 获取文本,text()不给参数
$('#getBtn').click(function (){
// 1.1 获取id为div1这个标签的文本
// 会获取到这个标签中所有的文本,包括后代元素的文本
console.log($('#div1').text());
// 1.2 获取标签为div的元素的文本
// 包含了多个dom元素的jQuery对象,通过text()方法获取文本,会把所有dom元素的文本获取到
console.log($('div').text());
})
// 2. 设置文本:text()方法有参数,参数为设置得文本
$('#setBtn').click(function (){
// 2.1 给id为div1的这个标签设置文本
// 会覆盖原来的内容,如果设置得文本中包含标签,是不会解析标签的
// $('#div1').text('我是新设置得文本')
// 2.2 给标签为div的元素设置文本
// 包含了多个dom元素的jQuery对象,通过text()方法设置文本,会把所有的dom元素都设置上
$('div').text('设置得文本'); // 隐式迭代
})
</script>
3.2 设置获取样式css()
<style>
#div1{
height: 200px;
background-color: pink;
border: 2px solid red;
}
</style>
<body>
<input type="button" value="获取" id="getBtn">
<input type="button" value="设置" id="setBtn">
<div id="div1" style="width: 200px"></div>
<div id="div2" style="width: 300px"></div>
<div id="div3" style="width: 400px"></div>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
// 1. 获取样式:css()方法设置参数为要获取值的样式名
$('#getBtn').click(function (){
// 1.1 获取id为div1这个元素的样式
console.log($('#div1').css('width')); // 200px
// 在ie浏览器中要获取边框这样的样式,一定要记得给一个准确的值
console.log($(`#div1`).css('border-top-width'));
// 1.2 获取标签为div的元素们的样式,
// 获取了包含多个dom对象的jquery对象的样式,只能获取到第一个dom对象的样式
console.log($('div').css('width'));
})
// 2. 设置样式
$('#setBtn').click(function (){
// 2.1 给id为div1这个元素设置样式
// 设置单样式
// $('#div1').css('width','300px');
// $(`#div1`).css('height','300px');
// 设置多样式
/*$('#div1').css({
width:300,
'height':'300',
'backgroundColor':'green',
border:'10px solid pink'
})*/
// 2.2 给标签为div的元素设置样式
$('div').css('height','300px');
$(`div`).css('backgroundColor','green');
})
</script>
3.3 设置类名class()
/*1.添加一个类, addClass(类名)*/
$('#addClass').click(function (){
// $(`#div1`).addClass('fontSize30'); // 添加单个类
$(`#div1`).addClass('fontSize30 width200'); // 添加多个类
})
/*2.删除一个类 removeClass(类名)*/
$('#removeClass').click(function (){
// $('#div1').removeClass('fontSize30'); // 移除单个类
// $(`#div1`).removeClass('fontSize30 width200'); // 移除多个类
$('#div1').removeClass(); // 移除所有类
})
/*3.匹配一个类 判断是否包含某个类 如果包含返回true否知返回false*/
$('#hasClass').click(function (){
console.log($('#div1').hasClass('fontSize30'));
})
/*4.切换一个类 有就删除,没有就添加 toggleClass(类名)*/
$('#toggleClass').click(function (){
$(`#div1`).toggleClass('fontSize30');
})
3.4 设置属性attr()
// input #btn1 #btn2 #btn3 img为同级元素
$(function () {
//jQuery中操作属性:attr() removeAttr();
//1.设置属性
$('#btn2').click(function () {
//设置单属性.
$('img').attr('src','../image/992.gif');//以前有src属性,更改这个属性.
// $('img').attr('aaa','哈哈哈');//修改自定义属性.
// $('img').attr('bbb','bbb');//如果元素原来没有这个属性,那就是添加属性.
//设置多属性.
$('img').attr({
src:'../image/992.gif',
aaa:"hahaha",
bbb:'bbb'
});
});
//2.获取属性.
$('#btn1').click(function () {
//console.log($('img').attr('src'));//自带的属性可以获取
//console.log($('img').attr('aaa'));//自定义的属性也可以获取
console.log($('img').attr('bbb'));//如果没有这个属性,获取到的值就是undefined; attr()设置的属性也是可以获取的.
});
//3.移除属性.
$('#btn3').click(function () {
//移除单属性.
// $('img').removeAttr('alt');
// $('img').removeAttr('aaa');
// $('img').removeAttr('bbb');
$('img').removeAttr('alt aaa bbb'); //移除多属性.
});
});
3.5 prop()操作布尔类型的属性
/*对于布尔类型的属性,不要attr方法,应该用prop方法 prop用法跟attr方法一样。*/
$("#checkbox").prop("checked"); // 获取
$("#checkbox").prop("checked", true); // 设置
$("#checkbox").prop("checked", false);
$("#checkbox").removeProp("checked"); // 删除
// input #btn1 #ckb1是同级元素
$(function (){
// checked:写在元素的身上就表示选中,没有写在元素的身上就表示没有选中
// 原生js怎么操作? 给他设置true或false,取值也是得到true或false
/*document.getElementById('btn1').οnclick=function (){
// 设置操作,
// document.getElementById('ckb1').checked=false;
// 获取操作
console.log(document.getElementById('ckb1').checked);
}*/
// jQuery
/*$('#btn1').click(function () {
console.log($('#ckb1').attr('checked')); //无论是选中还是没有选中,都返回一个undefined。
});*/
//原因是:在jQuery1.6之后,对于checked、selected、disabled这类boolean类型的属性来说,不能用attr方法,只能用prop方法。
$('#btn1').click(function () {
console.log($('#ckb1').prop('checked'));
//如果多选框是选中状态返回一个true; 如果多选框是取消选中状态那返回就是一个false.
});
})
4. 选择器
jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。
注意:jQuery选择器返回的是jQuery对象
4.1 基本选择器
跟css的选择器用法一模一样
4.2 层级选择器
跟css的选择器用法一模一样
4.3 过滤选择器-隔行变色
这类选择器都带冒号:
4.4 筛选选择器(方法)
5. 动画
5.1 基本动画
5.1.1 显示show()与隐藏hide()
// input #show #hide #toggle为同级元素
// 1. 显示 show()
// 参数1:代表执行动画的时长,毫秒数,也可以是代表时长的字符串(fast:200毫秒 normal:400毫秒 slow:600毫秒)
// 参数2:代表动画执行完毕后的回调函数
$('#show').click(function (){
// 给id为div1的元素动画显示
// 1.1 如果show()这个方法没有参数,则就没有动画效果
// $('#div1').show();
// 1.2 如果想要动画效果,
// 如果代表时长的单词写错了,就相当于写了一个normal
// $('#div1').show(2000);
// 1.3 回调函数
$('#div1').show(2000,function (){
console.log('动画执行完毕了。。。。');
})
})
// 2. 隐藏:hide()
$('#hide').click(function (){
// 让id为div1的元素动画隐藏
// $('#div1').hide(); // 没有参数没有动画效果
// $('#div1').hide(2000);
$('#div1').hide(2000,function (){
console.log('动画隐藏了....');
})
})
// 3. 切换:toggle()
// 如果元素是显示则动画隐藏,如果元素是动画隐藏则显示
$('#toggle').click(function (){
$('#div1').toggle(2000);
})
5.1.2 滑入slideDown()与滑出slideUp()
// input #slideDown #slideUp #slideToggle #div1为同级元素
// 1. 滑入
// 参数1:动画执行的时长
// 参数2:动画执行的回调参数
$('#slideDown').click(function (){
// 1.1 给id为div1的元素滑入
// $('#div1').slideDown(); // 不加参数有动画效果,没有参数相当于给了一个默认参数 normal:400毫秒
// $('#div1').slideDown(2000);
$('#div1').slideDown(2000,function (){
console.log('滑入了.....');
})
})
// 2. 滑出
$('#slideUp').click(function (){
// 让id为div1的元素滑出
// $('#div1').slideUp();
// $('#div1').slideUp(2000);
$('#div1').slideUp(2000,function (){
console.log('滑出了.....');
})
})
// 3. 切换
$('#slideToggle').click(function (){
$('#div1').slideToggle(2000,function (){
console.log('切换.....');
})
})
5.1.3 淡入fadeIn()与淡出fadeOut()
// input #fadeIn #fadeOut #fadeToggle #fadeTo #div1为同级元素
// 1. 淡入
$('#fadeIn').click(function (){
// 1.1 让id为div1的元素淡入
// $('#div1').fadeIn(); // 不给参数相当于给了默认的normal:400毫秒时长
// $('#div1').fadeIn(2000);
$('#div1').fadeIn(2000,function (){
console.log('淡入.....');
})
})
// 2. 淡出
$('#fadeOut').click(function (){
// 1.1 让id为div1的元素淡出
// $('#div1').fadeOut(); // 不给参数相当于给了默认的normal:400毫秒时长
// $('#div1').fadeOut(2000);
$('#div1').fadeOut(2000,function (){
console.log('淡入.....');
})
})
// 3. 切换
$('#fadeToggle').click(function (){
$('#div1').fadeToggle(2000,function (){
console.log('切换.....');
})
})
// 4. 淡入到哪里
$('#fadeTo').click(function (){
$('#div1').fadeTo(1000,0.5); // fadeTo(speed,to,easing,callback)
})
5.2 自定义动画
// input #lr800 #div1 #div2为同级元素
$(function (){
/* 自定义动画
* 参数1:必选的,需要做动画的属性
* 参数2:可选的,需要执行动画的总时长
* 参数3:可选的,代表的是缓动还是匀速,linear:匀速 swing:缓动 默认是swing
* 参数4:可选的,执行动画完成之后的回调函数 */
$('#lr800').click(function (){
// 让id为div1的元素动画移动到800那个位置
// $('#div1').animate({left:800});
// $('#div1').animate({left:800},5000);
// $('#div1').animate({left:800},5000,'linear');
// $('#div2').animate({left:800},5000,'swing');
$('#div1').animate({left:800},5000,'swing',function () {
console.log('动画执行完成');
});
})
})
5.3 动画队列-以及stop参数的含义
// input #start #stop #div1为同级元素
// 1. 开始动画:模拟一个动画队列
$('#start').click(function (){
$('#div1').slideDown(2000).slideUp(2000);
})
// 2. 停止动画:执行stop方法
// 参数1:是否清除队列
// 参数2:是否跳转到最终结果
$('#stop').click(function (){
/*2.1 停止当前动画 如果动画队列当中还有动画立即执行*/
// $('#div1').stop();
/*2.2 和stop()效果一致 说明这是默认设置*/
// $('#div1').stop(false,false);
/*2.3 停止当前动画 清除动画队列*/
// $('#div1').stop(true,false);
/*2.4 停止当前动画并且到结束位置 清除了动画队列*/
// $('#div1').stop(true,true);
/*2.5 停止当前动画并且到结束位置 如果动画队列当中还有动画立即执行*/
$('#div1').stop(false,true);
})
6. 插件
6.1 jQuery插件介绍-颜色插件
// button #btn,div为同级元素
$(function () {
//需求: 点击按钮,让div做动画, left改变到800 , 改变背景色
//animate动画不会改变背景色, 如果非要改,就要使用插件.
$('#btn').on('click', function () {
//让div做动画
$('div').animate({
left:800,
width:100,
height:100,
backgroundColor:'green'
},2000);
});
//什么是插件: 其实就是用来做扩展功能的.
//jQuery插件库: jq22.com
});
6.2 插件使用-省市联动
<body>
<div id="one">
<select name="" ></select>
<select name="" ></select>
<select name="" ></select>
</div>
<script src="../jquery-3.4.1/jquery-1.12.4.js"></script>
<script src="../plugin/distpicker.data.js"></script>
<script src="../plugin/distpicker.js"></script>
<script>
$(function () {
//使用插件
//1.引入jQuery文件.
//2.引入插件文件.
//3.调用插件方法.
$('#one').distpicker({
province: "广东省",
city: "深圳市",
district: "宝安区"
});
});
</script>
</body>
6.3 插件的使用-UI
jQueryUI专指由jQuery官方维护的UI方向的插件。
官方API:http://api.jqueryui.com/category/all/
其他教程:jQueryUI教程
// 基本使用
1. 引入jQueryUI的样式文件
2. 引入jQuery
3. 引入jQueryUI的js文件
4. 使用jQueryUI功能
$(function () {
//ui user interface 用户界面
//jQueryUI插件是jQuery团队自己开发的一套用户界面插件.
$( "#accordion" ).accordion();
$( "#tabs" ).tabs();
});
6.4 自己开发jQuery插件
$(function () {
//1.我们自己能不能封装插件呢?
// //$('div').width(100).height(100).css('backgroundColor','red'); //设置背景色有些麻烦.
// $('div').width(100).height(100).bgColor('red'); //现在jQuery中没有这个bgColor方法,所以报错了.
//我们可以自己封装一个bgColor方法.
//2.如何自己封装插件.
//2.1 给jQuery的原型添加方法.
//$('div').width(100).height(100).bgColor('red');
$('div').bgColor('green').width(100).height(100);
//2.2 给jQuery直接添加方法.
console.log($.add(10, 20));
});
// 需求2.1 实现: jQuery-bgColor.js
(function ($) {
//需要给jQuery的原型添加方法.
$.fn.bgColor = function (yanse) {
//console.log(this); //this是调用这个bgColor方法的jQuery对象.
this.css('backgroundColor',yanse);
//返回调用这个方法的jQuery本身
return this;
}
}(jQuery));
// 需求2.2 实现:jQuery-add.js
(function ($) {
//直接给$添加方法.
$.add = function (num1,num2) {
return num1+num2;
}
}(jQuery));
6.5 表格插件
$('#c').table(['序号', '姓名', '年龄', '工资'],[
{n: 'xy', age: 20, s: 10},
{n: 'wy', age: 10, s: 8},
{n: 'pl', age: 11, s: 9}
]);
// 表格插件实现:jQuery-table.js
(function ($) {
/**
* 给$的原型添加table方法.
* @param arrTableHead 生成表格表头的数组
* @param arrTableBody 生成表格主体部分的数组
*/
$.fn.table = function (arrTableHead,arrTableBody) {
//console.log(this);//这里的this是一个jQuery对象,是调用这个table方法的jQuery对象.
var list = [];
list.push('<table>');
//生成表头
list.push("<thead>");
list.push('<tr>');
for(var i = 0 ; i < arrTableHead.length; i++){
list.push('<th>');
list.push(arrTableHead[i]);
list.push('</th>');
}
list.push('</tr>');
list.push("</thead>");
//生成表格主体部分
for(var i = 0 ; i < arrTableBody.length; i++){
list.push('<tr>')
//生成一个序号td.
list.push('<td>'+(i+1)+'</td>');
//遍历arrTableBody这个数组的一个个的元素.
for(var key in arrTableBody[i]){
list.push('<td>');
list.push(arrTableBody[i][key]);
list.push('</td>');
}
list.push('</tr>')
}
list.push('</table>');
this.html(list.join(""));
}
}(window.jQuery));
6.6 tab栏切换插件
// 与案例tab栏求换html,css相同
$(function () {
$('#wrapper').tabs({
tabHeads:'#tab-menu>li',
tabHeadsClass:'active',
tabBodys:'#tab-main>div',
tabBodysClass:'selected'
});
});
// 插件实现:jQuery-tabs.js
(function ($) {
/**
* 给$的原型添加tabs方法
* @param option.tabHeads 需要注册事件的页签们选择器
* @param option.tabHeadsClass 触发事件的页面要添加的类
* @param option.tabBodys 要显示的页面们选择器
* @param option.tabBodysClass 索引一致要显示的页面要添加的类.
*/
$.fn.tabs = function (option) {
var $bigDiv = this; //把this先存进$bigDiv变量中.
//通过参数传递过来的页签选择器,获取到这些页签. 给这些页面注册点击事件.
$bigDiv.find(option.tabHeads).on('click', function () {
//给当前鼠标点击的这个页签添加option.tabHeadsClass类,其他的兄弟页签移除这个类.
$(this).addClass(option.tabHeadsClass).siblings().removeClass(option.tabHeadsClass);
//获取当前点击的页面的索引
var idx = $(this).index();
//获取索引一致的页面,给他添加option.tabBodysClass, 其他的兄弟页面移除这个类.
$bigDiv.find(option.tabBodys).eq(idx).addClass(option.tabBodysClass).siblings().removeClass(option.tabBodysClass);
});
//返回值.
return $bigDiv;
}
}(window.jQuery));
7. 结点操作
7.1 动态创建元素-html()和$()
// input #btnHtml1 #btn1 #div1为同级元素
// 1. 原生js中创建节点:document.write();||innerHTML();||document.createElement();
// 2. jquery中创建节点:
// 2.1 html()
$('#btnHtml1').click(function (){
// a. 获取内容:html()方法不给参数
console.log($('#div1').html());
// b. 设置内容:html()方法给参数
// // 会把原来的内容给覆盖,如果设置得内容包含标签,会把标签解析出来
$('#div1').html('我是设置的内容<a href="https://www.baidu.com">百度一下</a>');
})
// 2.2 $();
// 确实能创建元素,但是创建的元素只存在于内存中,如果要在页面上显示,就要追加
$('#btn1').click(function (){
var $link=$('<a href="https://www.baidu.com">我是新闻</a>')
// console.log($link);
// 追加节点
$('#div1').append($link); // 不会覆盖原来的内容
})
7.2 jquery添加节点
// input #btn... #ul1 #ul2 为同级元素,#li3 #li32为同级元素
$(function (){
// 1. 父元素.append(子元素):将子元素添加到最后一个
$('#btnAppend').click(function (){
// 1.1 创建一个li标签,添加到ul1中去
/*var $liNew=$('<li>我是新创建的li标签</li>')
$('#ul1').append($liNew);*/
// 1.2 把ul1中已经存在的li标签添加到ul中,剪切后作为最后一个子元素添加
/*var $ul3=$('#li3');
$('#ul1').append($ul3);*/
// 1.3 把ul2中已经存在的li标签添加到ul1中去,剪切后作为最后一个子元素添加
var $li32=$('#li32');
$('#ul1').append($li32);
});
// 2. 父元素.prepend(子元素):将子元素添加到第一个
$('#btnPrepend').click(function (){
// 2.1 创建一个li标签,添加到ul1中去
/*var $liNew=$('<li>我是新创建的li标签</li>')
$('#ul1').prepend($liNew);*/
// 2.2 把ul1中已经存在的li标签添加到ul中,剪切后作为最后一个子元素添加
/*var $ul3=$('#li3');
$('#ul1').prepend($ul3);*/
// 2.3 把ul2中已经存在的li标签添加到ul1中去,剪切后作为最后一个子元素添加
var $li32=$('#li32');
$('#ul1').prepend($li32);
});
// 3. 元素A.before(元素B):把元素B插入到元素A前面,作为兄弟元素添加
$('#btnBefore').click(function (){
// 新建一个div
var $divNew=$('<div>我是新建的div元素</div>');
$('#ul1').before($divNew);
});
// 4. 元素A.after(元素B):把元素B插入到元素A后面,作为兄弟元素添加
$('#btnAfter').click(function (){
// 新建一个div
var $divNew1=$('<div>我是新建的div元素</div>');
$('#ul1').after($divNew1);
});
// 5. 子元素.appendTo(父元素):把子元素作为父元素的最后一个元素添加
$('#btnAppendTo').click(function (){
// 创建一个li标签,添加到ul1中去
var $liNew=$('<li>我是新创建的li标签</li>');
$liNew.appendTo($('#ul1'));
})
})
7.3 清空节点empty()与移除节点remove()
// input #btn #ul1为同级元素
$(function (){
$('#btn').click(function (){
// 1. 清空ul
// $('#ul1').html(""); // 不推荐使用,有可能造成内存泄漏,不安全
// $('#ul1').empty(); // 推荐使用
// 2. 移除某一个元素
// $('#li3').remove(); // 自杀
// 3. 移除ul,但是只能获取Li3这个标签、
$('#li3').parent().remove();
})
})
7.4 克隆节点clone()
// #clone #div1为同级元素
$(function (){
// 给id为div1的元素添加点击事件
$('#div1').click(function (){
alert('div1点击了....');
})
// clone():只存在内存中,如果在页面上显示,就应该追加到页面上
// clone()方法其实有参数,不管是true(表示把事件一起克隆)还是false(不可隆事件),都是会克隆到后代节点的
$('#clone').click(function (){
var $cloneDiv=$('#div1').clone(true); // 默认是false
// 修改克隆节点的id
$cloneDiv.attr('id','div2');
// console.log($cloneDiv);
// 把克隆的节点追加到body中
$('body').append($cloneDiv);
})
})
8. 特殊属性操作
8.1 val()获取或设置表单元素内容
// input #btn #txt 为同级元素
$(function (){
// 原生js通过value属性来获取或者设置表单元素的值
// jquery: val()
$('#btn').click(function (){
// val()方法不给参数就是获取
// console.log($('#txt').val());
// val()方法给参数就是设置
$('#txt').val('我是设置得值');
})
})
8.2 width方法和height方法
// input #btn,div #one是同级元素
$(function (){
$('#btn').click(function (){
// 1. 获取id为one的元素的宽和高
/*console.log($('#one').css('width'));
console.log($('#one').css('height'));*/
// 2.width() height() 获取/设置高度、宽度,不包括内边距和外边距 有参数设置 无参数获取
/*console.log($('#one').width());
console.log($('#one').height());*/
/*$('#one').height(300);
$('#one').width(300);*/
//4 outerWidth()/outerHeight() 方法返回元素的宽度/高度(包括内边距和边框)。
console.log($('#one').outerWidth());
console.log($('#one').outerHeight());
//5 outerWidth(true)/outerHeight(true) 方法返回元素的宽度/高度(包括内边距、边框和外边距)。
console.log($('#one').outerWidth(true));
console.log($('#one').outerHeight(true));
//1.5 获取页面可视区的宽高.
console.log($(window).width()); // 获取可视区宽度
console.log($(window).height()); // 获取可视区高度
})
})
8.3 offset方法与position方法
// input #btn1 #btn2 ,div #father 为同级元素 #son为#father子元素
$(function () {
//1.offset()
//获取会得到一个对象,对象里面包含了top和left的值.
//offset方法获取元素距离document的位置
$('#btn1').click(function () {
console.log($('#son').offset());
});
//2.position();
//获取会得到一个对象,对象里面包含了top和left的值.
//position方法获取的是元素距离有定位的父元素(offsetParent)的位置。
$('#btn2').click(function () {
console.log($('#son').position());
});
});
8.4 scrollLfet()和scrollTop()
// input #btn ,div为同级元素 img为div的子元素
$(function () {
//给按钮设置一个点击事件.
$('#btn').click(function () {
//获取
//scrollLeft() 表示元素内容被卷曲出去的宽度.
//scrollTop() 表示元素内容被卷曲出去的高度
// console.log($('div').scrollLeft() + ":" + $('div').scrollTop());
//设置
//设置元素内容被卷曲出去的高度或者宽度.
// $('div').scrollLeft(217);
// $('div').scrollTop(217);
console.log($(window).scrollTop()); // 获取页面被卷曲的高度
console.log($(window).scrollLeft()); // 获取页面被卷曲的宽度
//设置页面被卷曲出去的距离.
$(window).scrollTop(1000);
$(window).scrollLeft(1000);
});
});
9. 事件机制
9.1 mouseenter和mouseleave
- mouseover事件在鼠标移动到选取的元素及其子元素上时触发
- mouseenter事件只在鼠标移动到选取的元素上时触发
- mouseleave 事件只有在鼠标指针离开被选元素时被触发
- mouseout 事件在鼠标指针离开任意子元素时也会被触发
9.2 jQuery时间发展历程及on
// input div span 为同级元素
$(function () {
//用原生的js给div注册单击事件.
//原生js注册相同的事件,后面的会把前面的给覆盖.
/*document.getElementById("one").onclick = function () {
alert('单击事件');
};
document.getElementById("one").onclick = function () {
alert('单击事件.啦啦啦');
};*/
//jQuery
//给同一个元素注册同样的事件,后面的不会把前面的给覆盖.
/*$('#one').click(function () {
alert('单击事件');
});
$('#one').click(function () {
alert('单击事件,lallal ');
});*/
//给按钮设置点击事件,创建一个div.
$('#btn').click(function () {
var $divNew = $('<div class="two"></div>');
$('body').append($divNew);
});
//jQuery注册事件的发展历程. (了解)
//1.简单事件绑定 click(); 不支持同时注册,也不支持动态注册.
/*$('div').click(function () {
console.log("鼠标单击事件");
});
$('div').mouseenter(function () {
console.log("鼠标移入事件...");
});*/
//2. bind方式注册事件 支持同时注册,也不支持动态注册.
/*$('div').bind({
mouseenter: function () {
console.log("鼠标移入事件...");
},
click: function () {
console.log("鼠标单击事件");
}
});*/
//3.delegate注册委托事件-原理是事件冒泡. 支持同时注册,也支持动态注册.
/*$('body').delegate('div',{
mouseenter: function () {
console.log("鼠标移入事件");
},
click: function () {
console.log("鼠标单击事件");
}
});*/
//4.jQuery1.7之后,jQuery用on统一了所有事件的注册方式。
//4.1 on简单注册事件. 不支持动态注册的.
/*$('div').on('click', function () {
console.log("我是单击事件...");
});*/
//4.2 on委托注册 支持动态注册的. $(触发事件的父级元素)绑定代理事件
$('body').on('click', 'div,span', function () {
console.log("单击事件.");
});
})
9.3 事件解绑off()
// input #btn1 #btn2,div #one是同级元素
$(function () {
//jQuery用on来注册事件,那就用off来解绑事件.
//off()不给参数就是解绑所有的事件.
//off('click')解绑指定的事件.
//1.注册事件.
$('#btn1').on('click', function () {
//给div注册事件.
$('#one').on({
'click': function () {
console.log("单击事件");
},
'mouseenter': function () {
console.log("鼠标移入事件");
}
});
});
//2.移除事件.
$('#btn2').on('click', function () {
//给div解绑事件.
//$('#one').off();//解绑所有事件.
$('#one').off('click');//解绑click事件.
});
});
9.4 事件触发trigger()
// input #btn1 #btn2,div #one是同级元素
$(function () {
//事件触发 trigger.
//a.代码的方式来触发事件.
//b.可以使用他来触发自定义事件.
/*//1.给div注册一个单击事件.
$('#one').on('click', function () {
console.log("单击事件....");
});
//2.给按钮注册事件.
var i = 0;
$('#btn1').on('click', function () {
i++;
if(i === 3){
//条件满足,触发div的单击事件.
//事件触发.感觉就是用代码的方式来触发事件.
//$('#one').click();
$('#one').trigger('click');
}
});*/
//给div注册一个自定义事件.
$('#one').on('linge', function () {
console.log("啦啦,我是林哥事件.");
});
//那我现在就是要触发他怎么办?就可以使用触发器trigger.
$('#btn2').on('click', function () {
var res = confirm('请问林哥帅吗');
if(res){
//触发自定义的linge事件.
$('#one').trigger('linge');
}
});
});
9.5 jQuery事件对象
// input #btn,a是同级元素 div #one是他们的父级元素
$(function () {
//1.什么是事件对象.
//注册一个事件,系统就会帮我们生成一个对象记录这个事件触发时候的一些信息
//比如触发事件的时候有没有按住某个键,再比如触发这个事件的时候的一些坐标信息....
//jQuery中用事件参数e来获取.
//jQuery的事件对象是对原生js事件对象的一个封装,帮你处理好了兼容性.
$('#one').on('click', function (e) {
//2.事件对象中有常用的三个坐标.
console.log("screenX"+ e.screenX +" : " + e.screenY); //触发事件那一点距离 屏幕最左上角的值
console.log("clientX"+ e.clientX +" : " + e.clientY); //触发事件那一点距离 可视区左上角的值
console.log("pageX"+ e.pageX +" : " + e.pageY); //触发事件那一点距离 页面左上角的值
alert("我是div的单击事件.");
});
//3.给按钮注册一个单击事件.
$('#btn').on('click', function (e) {
alert('我是按钮的单击事件');
e.stopPropagation();//阻止事件冒泡.
});
//4.给a标签注册一个单击事件.
$('a').on('click', function (e) {
alert('我是a标签的单击事件....');
// //阻止事件冒泡
// e.stopPropagation();
// //阻止默认行为-阻止a标签的跳转.
// e.preventDefault();
//既能阻止事件冒泡,又能阻止默认行为.
return false;
});
//5.给页面注册键盘按下事件.
$(document).on('keydown', function (e) {
//e.keyCode能获取按的是那个键.
console.log(e.keyCode);
});
});
10. 补充知识点
10.1 链式编程与end
$(function () {
//链式编程
//1.什么时候可以链式编程?
//如果给元素调用一个方法,这个方法有返回值,并且返回的是一个jQuery对象,那就可以继续再点出jQuery方法.
// $('div').width(100).height(100).css('backgroundColor','red');
//2.必须是jQuery对象才能点出jQuery方法.
// console.log($('div').width(100).width()); //100
// $('div').width(100).width().height(100); //报错了,因为数值不能点出jQuery方法.
//3.有些时候我们一个方法返回的确实是一个jQuery对象
//但是这个对象又不是我们想要的对象,那这个时候就不要再继续点下去了..
//4.end(); //回到上一个状态.
//$(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx);
//5.end()方法他也是jQuery方法,那他也需要一个jQuery对象才能点出了啊,
//width()方法返回的是一个数值, 数值能点出end()方法来吗? 显然不行.
$('div').width(100).width().end().height(100); //不行
});
10.2 显示迭代each()
// ul #ulList li*10
$(function () {
//需求:找到所有的li标签,分别设置透明度,透明度是递增到1.
//1.获取所有的li标签.
var $lis = $('#ulList').children();
//2.给$lis里面的每一个li标签设置透明度.
//$lis.css('opacity',0.5);//如果这样设置的话,由于隐式迭代那每一个li标签的透明度都设置成了0.5,不符合需求.
//给每一个对象设置不同的值的时候
//作用:遍历jQuery对象集合,为每个匹配的元素执行一个函数
$lis.each(function (index,element) {
// console.log(index); //每一个li标签的索引
// console.log(element);//每一个li标签,是一个dom对象.
$(element).css('opacity',(index+1)/10);
});
});
10.3 多库共存
//1.如何查看jQuery的版本?
//通过jQuery文件名来查看jQuery的版本是不靠谱的做法.
//通过以下四种方式可以查看jQuery的版本.
// console.log(jQuery.fn.jquery);
// console.log(jQuery.prototype.jquery);
// console.log($.fn.jquery);
// console.log($.prototype.jquery);
//2.如果引入了多个jQuery文件. 那使用的$是哪一个jQuery文件中的呢?
//那个文件后引入,使用的$就是谁的.
//console.log($.fn.jquery);
//3.多库共存
/*var _$ = $.noConflict(); //3.0.0版本jQuery文件把$符号的控制权给释放了.
(function ($) {
//在这个自执行函数中,就可以继续使用$了.
}(_$));
console.log(_$.fn.jquery); //1.12.4
console.log(jQuery.fn.jquery); //1.12.4
console.log($.fn.jquery); //3.4.1 */
//4.多库共存2
var _$341 = $.noConflict(); //3.4.1版本的jQuery把$的控制权给释放了
var _$1124 = $.noConflict(); //1.12.4版本的jQuery把$的控制权给释放了
console.log($); // undefined
console.log(_$1124.fn.jquery); // 3.4.1
console.log(_$341.fn.jquery); // 1.12.4
//$lis.css('opacity',0.5);//如果这样设置的话,由于隐式迭代那每一个li标签的透明度都设置成了0.5,不符合需求.
//给每一个对象设置不同的值的时候
//作用:遍历jQuery对象集合,为每个匹配的元素执行一个函数
$lis.each(function (index,element) {
// console.log(index); //每一个li标签的索引
// console.log(element);//每一个li标签,是一个dom对象.
$(element).css('opacity',(index+1)/10);
});
});
#### 10.3 多库共存
```javascript
//1.如何查看jQuery的版本?
//通过jQuery文件名来查看jQuery的版本是不靠谱的做法.
//通过以下四种方式可以查看jQuery的版本.
// console.log(jQuery.fn.jquery);
// console.log(jQuery.prototype.jquery);
// console.log($.fn.jquery);
// console.log($.prototype.jquery);
//2.如果引入了多个jQuery文件. 那使用的$是哪一个jQuery文件中的呢?
//那个文件后引入,使用的$就是谁的.
//console.log($.fn.jquery);
//3.多库共存
/*var _$ = $.noConflict(); //3.0.0版本jQuery文件把$符号的控制权给释放了.
(function ($) {
//在这个自执行函数中,就可以继续使用$了.
}(_$));
console.log(_$.fn.jquery); //1.12.4
console.log(jQuery.fn.jquery); //1.12.4
console.log($.fn.jquery); //3.4.1 */
//4.多库共存2
var _$341 = $.noConflict(); //3.4.1版本的jQuery把$的控制权给释放了
var _$1124 = $.noConflict(); //1.12.4版本的jQuery把$的控制权给释放了
console.log($); // undefined
console.log(_$1124.fn.jquery); // 3.4.1
console.log(_$341.fn.jquery); // 1.12.4