jQuery笔记
基础补充
入口函数
1.原生和jQuery入口函数的区别
// 1.原生
window.onload = function(){}
// 2. jQuery 对象
$(document).ready(function(){})
原生与jQuery的区别 :
1.原生会等待DOM元素全部加载完成(包括图片)后执行里边的代码,
Jquery会等到Dom元素加载完成,但是不会等到图片也加载完成
2.元素的入口函数只能有一个
jQuery入口函数可以有多个,顺序是从上到下执行
- jQuery入口函数的四种写法
- 用法一样, 没区别
// 1
$(document).ready(function(){})
// 2
jQuery(document).ready(function(){})
// 3
$(function(){})
// 4
jQuery(function(){})
3.入口函数的冲突问题
var nj = jQuery.noConflict();
nj(function () {
alert("hello lnj");
});
$()小型总结
- 接收一个函数,作为入口函数
- 接收一串字符串
- 选择器 $(’.box’)
- Dom对象转成jQuery对象 $(document) (jQuery转成原生的用 get())
- 接收字符串代码片段 $(‘
你好,我是新创建的元素
’) ==>(类似于 document.creatElement)
常用的jQuery方法
DOM原生对象不能使用Jquery对象的方法,Jquery对象不能使用DOM原生对象的方法
- jQuery转成原生的用 1. get() 2. 直接[]下标
- 原生转jQuery : $(原生)
- each
-
each 和 元素数组forEach的区别
- 通过jQuery获取的的元素为伪元素,伪元素默认为对象,不能使用forEach方法,所以可以用到Jquery的each方法
var arr = [1,2,3,4] // 1. 都能遍历数组 arr.forEach(function(ele,index){}) // ele在后,index在前 $.each(arr,function(index,ele){}) // index在前,ele在后 // 2. forEach不能遍历伪元素 querySelectorAll获取到的例外 // jQuery对象没有forEach方法,所以不能使用forEach,
- map
- 用法和元素map一样,return有返回值
- $.map(arr,function(ele,index))
- trim
- var newArr = $.trim(arr)
- isArray
- var trueOrFalse = $.isArray()
- isFunction
- var trueOrFalse = $.isFunction()
- isWindow
- var trueOrFalse = $.isWindow()
选择器
DOM操作
样式操作
attr 行内样式操作 attribute
// 1.获取
$('div').attr('class')
// 2.设置
// 单个
$('div').attr('class','glmbox')
// 多个
$('div').attr({class : 'glmbox',index : 10})
removeAttr 删除行内样式 removeAttribute
-
删除 行内样式
$(‘div’).removeAttr(‘class’)
prop
- 获取或设置jQuery对象的属性或者方法
- 但是通常用于获取和设置checked / selected / disable
- 通常用于表单操作
removeProp
css()
// 1.获取样式
var a = $('.box').css('width')
// 2. 设置样式
// 2.1
$('.box').css('width','100px')
$('.box').css({width:'100px',zIndex : 1})
文本操作
html === innerHTML
- 用法和innerHTML一样
text() === innerText
$(’.box’).text()
val === value
- $(’.box’).val()
class操作
- 可以同时操作多个
addClass
removeClass
toggleClass
hasClass
获取元素
chidlren 获取子元素 children
- $(’.box’).children(‘span’) ==> 获取.box中的span子元素
- $(’.box’).children() ==> 获取.box中的全部子元素
find 获取后代元素
- $(’.box’).find(’.son’) ==> 获取.box中的类是son的所有后代元素
parent 获取父元素 parentNode
- $(’.box’).parent()
parents 获取祖宗元素 parentNode.parentNode
- $(’.box’).parents(’.father’) ==> 获取祖宗是.father的元素
prev 获取上一兄弟元素 prevElementSiblings
$(’.box’).prev()
next 获取下一元素 nextElementSiblings
$(’.box’).next()
siblings 获取其它所有的兄弟元素
$(’.box’).siblings()
增加元素
var $(‘
你好
’)append
- 父元素.append(子元素)
- 添加到父元素的最后面
prepend
- 父元素.prepend(子元素)
- 添加到父元素里边的第一个
after
before
删除元素
remove
- 删除全部
empty
- 删除内容和子元素,自己本身不会删除
获取各种宽高
width height
- 获取/设置的是内容高度,不包括边框和内边距类似于 : scrollHeight / scrollTop
- 获取当前的可视区域的宽高 : $(window).width()
outerWidth outerHeight
- 类似于原生 : offsetWidth/offsetHeight == padding + bording + width的宽度
- 获取的一样是数字类型
- 比 offsetWidth/offsetHeight强大,可以做修改 : $(’.box’).outerWidth(200)
- outerWidth(true) / outerHeight(true) 获取的是 margin + padding + bording + width的宽度
innerWidth / innerHeight
- 获取的是padding + width的宽度
offset()
- 注意 : 并不是offsetLeft和offsetTop的封装
- 类似于pageX 和 pageY
- 可以修改
// 获取距离窗口的偏移位 ==> 获取盒子距离浏览器窗口顶部的距离
$('.box').offset().left ==> 获取盒子距离浏览器顶部的距离
$('.box').offset().left ==> 获取盒子距离浏览器窗口最左边的距离
position
- 类似于原生 offsetLLeft / offsetTop
- 注意 : 只能获取不能设置 var a = $(’.box’).position().top ==> 返回的是对象
- 设置的话直接用css
scrollTop
-
获取当前浏览器的滚动宽度
$(‘body,html’).scrollTop()
一般用 $(window).width()
-
设置当前浏览器的滚动高度
$(‘body,html’).scrollTop(300) // 不能用 ‘300px’
事件
事件对象
- 用法和原生一模一样,唯一的区别就是不需要再处理兼容性(任何兼容性)
- e.target / e.pageX / e.screenX / e.clientX / e.keyCode
事件绑定
- 元素.on(‘事件名称’,function(){ 执行函数 })
- 元素.click(function(){ 执行函数 })
移除事件
元素.off(‘事件名’,函数名字) // 函数名字可有可无
阻止事件冒泡
- event.stopPropagation()
- return false (同时阻止了a标签事件默认行为)
阻止默认事件 (a标签的跳转)
- event.preventDefault()
- return false (同时阻止了事件冒泡)
自动触发
$(’.box’).trigger(‘click’)
事件委托
$(’.box’).delegate(’.box:eq(1)’,‘click’,function(){})
- $(this)指的是当前点击的元素 === e.target ?
- 用于新创建的元素事件操作
事件绑定
- bind
- delegate
- on
bind
- 不常用,只能用于对同个元素同时注册多个事件,不同用事件委托
delegate
- 事件委托
- 只能处理事件委托
$('.father').delegate('.son','click',function(){})
on
- 能对同一个元素同时注册多个事件,同时事件委托
- 注意点 : 和delegate的事件和选择器的位置不一样
$('.father').on('click','.son',function(){})
- data
$('.father').on('click','.son','我是data数据,通过事件对象:edata可以访问到我',function(e){
console.log(e.data)
})
change()
-
用于值改变 :
1. 常用于表单操作(file select控制option中的value值,select必须要有name属性)
click()
dbclick()
mouseenter
- 不支持冒泡
mouseleave
- 不支持冒泡
mouseover
- 支持冒泡
mouseout
- 支持冒泡
show
$(’.box’).show(1000,function(){})
- 时间参数 : ‘fast’ == 200 ‘slow’ == 600 ‘normal’ == 400
hide
$(’.box’).hide(1000,function(){})
slideDown
slideUp
fadeIn
$(’.box’).fadeIn(1000,function(){})
fadeOut
fadeToggle
动画
animate
$(’.box’).animate({width:‘100px’,height : ‘+=100’},1000,linear,function(){})
- 第一个参数 : 改变的样式
- 第二个参数 : 时间
- 第三个参数 : 匀速还是变速
- 第四个参数 : 完成之后执行啥
delay
$(’.box’).animate({width:‘100px’},1000).delay(1000)
stop
stop(参数一,参数二)
作用 : 参数一 : true :清除所有队列
参数二 : true: 直接到达当前执行动画地点
-
进入下一个队列动画,并停止当前动画
$(“div”).stop(false, false);
-
清除所有队列动画,并停止当前动画
$(“div”).stop(true, false);
-
进入下一队列动画,并直接到达当前动画的终点
$(“div”).stop(false, true);
-
清除所有队列动画,并直接到达当前动画的终点
$(“div”).stop(true, true);
注意点 :
- 顶部导航加载动画(slideDown 或者 slideUp 的效果)
- slideDown对 $(“div”).stop(false, false); / $(“div”).stop(true, false);中的 后边的false是不管用的
- 或者不用slide方法, 直接控制animate的高度,并设置overflow为hidden
<!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>
*{margin: 0;padding: 0;}
.box{
width: 300px;
height: 50px;
background:red;
margin: 0 auto;
padding-top: 50px;
}
.box2{
width: 600px;
height: 600px;
background: purple;
margin: 0 auto;
/* overflow: hidden; */
display: none;
}
</style>
</head>
<body>
<div class="box">
<div class="box2">
<p>1111111111</p>
<p>1111111111</p>
<p>1111111111</p>
<p>1111111111</p>
<p>1111111111</p>
<p>1111111111</p>
<p>1111111111</p>
<p>1111111111</p>
<p>1111111111</p>
<p>1111111111</p>
<p>1111111111</p>
<p>1111111111</p>
<p>1111111111</p>
<p>1111111111</p>
<p>1111111111</p>
<p>1111111111</p>
<p>1111111111</p>
<p>1111111111</p>
<p>1111111111</p>
<p>1111111111</p>
</div>
</div>
<script src="../js/jQuery/jquery-1.10.1.min.js"></script>
<script>
$(function(){
$('.box').mouseenter(function(){
// $('.box2').stop(true,false).animate({height:600});
$('.box2').stop(true,true).slideDown();
})
$('.box').mouseleave(function(){
// $('.box2').stop(true,false).animate({height:0});
$('.box2').stop(true,false).slideUp()
})
})
</script>
</body>
</html>
- 轮播图
原生jQuery的学习
补充知识点
-
伪数组转化成真数组 :
var obj = {0:1,1:2,2:'你好',length:3} var arr = [] arr = [].slice.apply(obj) // [1,2,'你好'] arr = [].slice.call(obj) // [1,2,'你好']
-
真数组转化成伪数组
var arr = [1,23,3,5];
var obj = {};
arr.forEach(function(ele, index){
obj[index] = ele;
})
obj.length = arr.length;
console.log(obj); // {0: 1, 1: 23, 2: 3, 3: 5, length: 4}
jQuery 的模型架构
- underfine的作用 : 为了方便后期的压缩
(function(window,underfine){
// 定义jQuery构造函数,也是入口函数
function jQuery(selected){
// 返回jQuery的原型上的init方法(构造函数)的实例对象
return new jQuery.fn.init(selected)
}
jQuery.fn = jQuery.prototype = {
constructor : jQuery,
init : function(selected){
}
}
// 让所有的属性和方法添加到jQuery属性上和原型上
jQuery.extend = jQuery.prototype.extend = function(MethodAndAttribute){
for(var key in MethodAndAttribute){
this[key] = MethodAndAttribute[key];
}
}
jQuery.fn.init.prototype = jQuery.prototype;
window.jQuery = window.$ = jQuery
})(window,underfine)
jQuery构造函数添加方法(基本判断类型等)
jQuery.extend({
// 判断是否是函数
isFunction : funtion(sele){
return typeof sele == 'function';
},
// 判断是否是字符串
isString : function(sele){
return typeof sele == 'string';
},
// 判断是否是数组
isArray : function(sele){
return Object.prototype.toString.call(sele) == "[object Array]" ;
},
// 判断是否是HTML
isHTML : function(sele){
if(sele.charAt(0) && sele.charAt(sele.length - 1) && sele.length > 3){
return true;
},
// 判断是否是window
isWindow : function(sele){
return sele == window;;
},
// 去除字符串两端的空格
trim : function(sele){
if(jQuery.isString(sele)){
return sele.trim()
}
},
// 判断是否是对象
idObject : function(sele){
return typeof sele == 'object';
},
// 监听DOM的加载
ready : function(fn){
// 判断DOM是否加载完毕
if(document.readyState == "complete"){
fn();
}else if(document.addEventListener){
document.addEventListener("DOMContentLoaded", function () {
fn();
});
}else{
// 兼容IE8
document.attachEvent("onreadystatechange", function () {
if(document.readyState == "complete"){
fn();
}
});
}
},
})
入口函数的传值
- 传入 ‘’ null undefined NaN 0 false, 返回空的jQuery对象
init : function(selected){
if(!selected){
return this;
}
}
- 传入的为函数,监听DOM加载
- 原生 : window.onload会等到DOM元素全部加载完毕,且图片也加载完成,且window.onload只能调用一次
- jQuery : 只会等到DOM元素加载完毕,不会等到图片也加载完成才执行,且能调用多次
// IE8以上可用 : IE8以下不支持addEventListener
init : function(fn){
if($.isFunction(fn)){
// 判断DOM是否加载完毕
if(document.readyState == "complete"){
fn();
}else if(document.addEventListener){
document.addEventListener("DOMContentLoaded", function () {
fn();
});
}else{
document.attachEvent("onreadystatechange", function () {
if(document.readyState == "complete"){
fn();
}
});
}
}
}
- 传入为字符串
init : function(selected){
if(jQuery.toString(selected)){
// 0. 将两端的空格去掉
selected = jQuery.trim(selected);
// 1. 判断是否HTML字符串
if(jQuery.isHTML(selected)){
// 1.1 创建一个div标签
var newdiv = document.creatElement('div');
// 1.2 这个div的innerHTML赋值为selected
newdiv.innerHTML = selected;
// 1.3.1 给当前的实例对象添加属性,值为当前创建的所有元素(不建议使用,代码太多)
for( var i = 0; i < newdiv.children.length; i++){
this[i] = newdiv.children[i]
}
// 1.3.2 给当前的实例对象添加属性,值为当前创建的所有元素(建议使用)
[].push.apply(this,newdiv.children)
// 1.4 返回这个实例对象
return this
}
// 2. 判断是否是选择器
else {
var res = querySelectorAll(selected);
[].push.apply(this,res);
return this;
}
}
}