jQuery尺寸和位置操作
width方法与height方法
设置获取高度，不包括内边距、边框和外边距
//带参数表示设置高度
$('img').height(200);
//不带参数表示获取高度
$('img').height();
获取网页的可视区宽高
//获取可视区宽度
$(window).width();
//获取可视区高度
$(window).height();
innerWidth/innerHeight/outerWidth/outerHeight
innerWidth()/innerHeight() 方法返回元素的宽度/高度（包括内边距）
outerWidth()/outerHeight() 方法返回元素的宽度/高度（包括内边距和边框）
outerWidth(true)/outerHeight(true) 方法返回元素的宽度/高度（包括内边距、边框和外边距）
scrollTop与scrollLeft
设置获取获取垂直滚动条的位置
//获取页面被卷曲的高度
$(window).scrollTop();
//获取页面被卷曲的宽度
$(window).scrollLeft();
offset方法与position方法
offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素（offsetParent）的位置
//获取元素距离document的位置，返回值为对象:{left:100,top:100}
$(selector).offset();
//获取相对于其最近的有定位的父元素的位置
$(selector).position();
jQuery事件机制
javaScript中已经学习过了事件，JQuery对JavaScript事件进行了封装增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力
jQuery事件发展历程（了解）
简单事件绑定--bind事件绑定--delegate事件绑定--on事件绑定
- 简单事件注册
clinck(handler) 单击事件
mouseenter(handler) 鼠标进入事件
mouseleave(handler) 鼠标离开事件
缺点：不能同时注册多个事件
- bind方式注册事件
//第一个参数：事件类型
//第二个参数：事件处理程序
$('p').bind('click mouseenter',function(){
//事件响应方式
});
缺点：不支持动态事件绑定
- delegate注册委托事件
//第一个参数：selector,要绑定事件的元素
//第二个参数：事件类型
//第三个参数：事件处理函数
$('.parentBox').delegate('p','click',function(){
//为.parentBox下面的所有p标签绑定事件
});
缺点：只能注册委托事件，因此注册事件需要及的方法太多了
- on注册事件
on注册事件（重点）
- jQuery1.7之后，jQuery用on统一了所有事件的处理方法
- 最现代的方法，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用
on注册简单事件
//表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定
$(selector).on('click',function(){});
on注册事件委托
//表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on('click','span',function(){});
事件委托原理
//事件委托的原理
var ul=document.querySelector('#ul');
ul.οnclick=function(e){
//console.log(e.target.tagName);
if(e.target,tagName.toLowerCase()==='li'){
console.log(e.target);}
};
案例-动态数据添加和删除
原来的代码需要给新添加的$trNew里面的a标签添加一个事件，用来进行删除，现在去掉这个事件，把原代码的删除操作，直接用on委托注册的方法来添加删除操作（支持动态注册）
$('#j_tb').on('click','.get',function () {
//jQuery为了使用方便，把this给修改了
// console.log($(this));
$(this).parent().parent().remove();
});事件解绑
- unbind方式（不用）
$(selector).inbind();//解绑所有的事件
$(selector).unbind('click');//解绑指定的事件
- undelegate方式（不用）
$(selector).undelegate();//解绑所有的delegate事件
$(selector).undelegate('click');//解绑所有的click事件
- off方式（推荐）
//解绑匹配元素的所有事件
$(selector).off();
//解绑匹配元素的所有click事件
$(selector).off('click');
触发事件
$(selector).click();//触发click事件
$(selector).trigger('click');
jQuery事件对象
jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性
//screenX和screenY 对应屏幕左上角的值
//clientX和xlientY 距离页面左上角的位置（忽略滚动条）
//pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条）
//event.stopPropagation() 阻止事件冒泡行为
//event.prevenDefault() 阻止浏览器默认行为
//return false: 既能阻止事件冒泡，又能阻止浏览器默认行为
//event.keyCode按下的键盘代码
案例-案件变色
初始：
想要达到效果：
$(function () {
//获取div
var $div = $('#bgChange');
//获取显示按键的span
var $showCode = $('#keyCodeSpan')
//给页面注册一个键盘按下事件
$(document).on('keydown', function (e) {
// console.log(e.keyCode);// r 82 g 71 b 60 p 80 y 89
switch (e.keyCode) {
case 82:
$div.css('backgroundColor', 'red');
$showCode.text(82);
break;
case 71:
$div.css('backgroundColor', 'green');
$showCode.text(71);
break;
case 66:
$div.css('backgroundColor', 'blue');
$showCode.text(66);
break;
case 80:
$div.css('backgroundColor', 'purple');
$showCode.text(80);
break;
case 89:
$div.css('backgroundColor', 'yellow');
$showCode.text(89);
break;
default:
$div.css('backgroundColor', 'pink')
$showCode.text("没有该键");
break;
}
});
});jQuery补充知识点
链式编程
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回jQuery对象
end;//筛选选择器会改变jQuery对象的DOM对象，想要恢复到上一次的状态，并且但会匹配元素之前的状态
each方法
jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
//参数一表示当前元素在所有匹配元素中的索引号
//参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});
多库共存
jQuery使用作为标识符，但是如果与其他框架中的冲突时，jQuery可以释放$符的控制权
var c=$.noConflict();//释放$的控制权，并且把$的能力给了c
案例
五角星评分案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: red;
}
.comment li {
float: left;
cursor: pointer;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
<script src="lib/jquery-3.6.1.js"></script>
<script>
$(function () {
});
</script>- 需求1：鼠标移入到li标签上，当前li标签和他之前的li标签显示实心五角星，后面的li显示空心五角星
- 需求2：鼠标离开后，所有的li都变成空心
- 需求3：点击li，鼠标离开后，刚才点击的那个li和之前的li都变成实心五角星，后面空心五角星
prev(); 上一个兄弟
prevAll(); 之前所有的兄弟
next(); 下一个兄弟
nextAll(); 之后所有的兄弟
实现：
$(function () {
//声明两个变量，分别记录这个实心/空心五角星
var sx_wjx='★';
var kx_wjx='☆';
//需求1：
$('.comment>li').on('mouseenter',function () {
//当前鼠标移入的li和他的兄弟li都显示实心五角星
// $(this).text(sx_wjx).prevAll().text(sx_wjx);
// //当前鼠标移入的li之后的兄弟li都显示空心五角星
// $(this).nextAll().text(kx_wjx);
//这样不行
// $(this).text(sx_wjx).prevAll().text(sx_wjx).nextAll().text(kx_wjx);
//这样又可行，加了一个end()
$(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx);
}).on('mouseleave',function () {
//需求2：
// $(this).text(kx_wjx).prevAll().text(kx_wjx);
$('.comment>li').text(kx_wjx);
//获取刚才点击的那个li
$('.comment>li[clickCurrent]').text(sx_wjx).prevAll().text(sx_wjx);
}).on('click',function () {
//需求3：
//给鼠标当前点击的li做一个记号，是因为鼠标离开的时候，要知道你刚才点击的是哪一个li
//给当前鼠标点击的这个li添加一个独一无二的属性
$(this).attr('clickCurrent','current').siblings().removeAttr('clickCurrent');
});
});插件
jQuery插件库：jq22.com
常用插件
- 颜色插件
- 省市联动插件
- jQueryUI
- 常用的2-3个功能演示
- 查看jQuery插件的源码
JQuery插件开发
- 给jQuery增加方法的两种方式
$.method=fn 静态方法
$.fn.method=fn 实例方法
- 增加一个静态方法，实现两个数的和，插件
(function($){
$.add=function(a,b){
return a+b;
};
}(jQuery));
$.add(5,6);
- tab栏插件
-
(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));
-
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
