JQ笔记-加强版

Posted 2020-09-29 钢铁小坦克

Query初级

 

一、介绍、基本写法

 

什么是JQ:

一个优秀的JS库，大型开发必备

JQ的好处:

简化JS的复杂操作 
不再需要关心兼容性 
提供大量实用方法

如何学习JQ:

www.jquery.com 
JQ只是辅助工具，要正确面对 
需要分阶段学习

JQ设计思想:

选择网页元素 
模拟CSS选择元素 
独有表达式选择 
多种筛选方法

JQ写法 :

方法函数化

$(function(){

//var oDiv = $(‘#div1‘);

 

$(‘#div1‘).click(function(){

 

alert( $(this).html() );

});

});

链式操作:

$(function(){

/*var oDiv = $(‘#div1‘);

 

oDiv.html(‘hello‘);

 

oDiv.css(‘background‘,‘red‘);

 

oDiv.click(function(){

alert(123);

});*/

 

$(‘#div1‘).html(‘hello‘).css(‘background‘,‘red‘).click(function(){

alert(123);

});

});

取值赋值合体:

$(‘#div1‘).html(‘hello‘); //赋值

//alert( $(‘#div1‘).html() ); //取值

//alert( $(‘li‘).html() ); //当一组元素的时候，取值是一组中的第一个

$(‘li‘).html(‘hello‘); //当一组元素的时候,赋值是一组中的所有元素

JQ与JS关系 :

可以共存，不能混用

$(function(){

$(‘#div1‘).click(function(){

 

alert( $(this).html() ); //jq的写法

 

alert( this.innerHTML ); //js的写法

 

alert( $(this).innerHTML ); //错误的

alert( this.html() ); //错误的

});

}); 



二、方法

 

$()下的常用方法

 

has()

not()

filter()

next()

prev()

find()

eq()

index()

attr()

 

addClass() removeClass()

width() innerWidth() outerWidth()

insertBefore() before()

insertAfter() after()

appendTo() append()

prependTo() prepend()

remove()

on() off()

scrollTop()

 

ev pageX which

preventDefault stopPropagation

one()

offset() position()

offsetParent()

val()

size()

each()

 

hover()

show() hide()

fadeIn() fadeOut()

fadeTo()

slideDown() slideUp()

 

 

1、fiter() not() has()

 

filter() : 过滤，选择某项

not(): filter的反义词，不选择某项，除了某项

 

$(function(){

 

//$(‘div‘).filter(‘.box‘).css(‘background‘,‘red‘);

 

$(‘div‘).not(‘.box‘).css(‘background‘,‘red‘);

 

});

 

filter和not是针对当前元素

 

has是针对当前元素的子元素

 

has() : 包含

 

$(function(){

 

$(‘div‘).has(‘span‘).css(‘background‘,‘red‘);//div中包含span的元素

$(‘div‘).filter(‘.box‘).css(‘background‘,‘red‘); //div中class为box的元素

 

});

 

2、next() 、prev()、find()

 

next()是找下一个兄弟节点，参数具有筛选功能

 

prev()是找上一个兄弟节点，参数具有筛选功能

 

find()是选择子元素中的

 

$(‘div‘).find(‘h2‘).eq(1).css(‘background‘,‘red‘);

 

3、 eq() idnex()

 

eq():

 

代表一组元素的下标，从0开始。

 

index()：

 

$(function(){

 

alert( $(‘#h‘).index() ); //索引就是当前元素在所有兄弟节点中的位置，从0开始

 

});

 

 

4、addClass()、removeClass()：

 

$(function(){

 

$(‘div‘).addClass(‘box2 box4‘);

 

$(‘div‘).removeClass(‘box1‘);

 

});

 

 

5、width()、innerWidth()、outerWidth()

 

div{ width:100px; height:100px; background:red; padding:10px; border:10px #000 solid; margin:10px;}

 

$(function(){

 

alert( $(‘div‘).width() ); //width

 

alert( $(‘div‘).innerWidth() ); //width + padding

 

alert( $(‘div‘).outerWidth() ); //width + padding + border

 

alert( $(‘div‘).outerWidth(true) ); //width + padding + border + margin

 

});

 

 

6、insertBefore()、before()、insertAfter()、after()：

 

$(‘span‘).insertBefore( $(‘div‘) ); // 动词、把span添加到div前面

 

$(‘div‘).before( $(‘span‘) ); //名词、div的前面是span

 

$(‘div‘).insertAfter( $(‘span‘) ); // 动词、把div添加到span后面

 

$(‘span‘).after( $(‘div‘) ); //名词、 span的后面是div

 

 

7、appendTo()、prependTo()、append() 、prepend()

 

$(‘div‘).appendTo( $(‘span‘) ); //把div追加到span中的元素的最后

 

$(‘span‘).append( $(‘div‘) ); //span中最后面添加的是div

 

$(‘div‘).prependTo( $(‘span‘) ); //把div放在span中的元素的最前面

 

$(‘span‘).prepend( $(‘div‘) ); //span中最前面添加的是div

 

 

8、创建节点

 

var $iLi = $("<li>香蕉</li>");

 

$(‘ul‘).append($iLi);

 

9、删除节点：remove()、detach()、empty()

 

remove():删除节点，返回的是删除的节点，删除完成后，与该节点绑定的事件也都删除

 

$(function(){ //删除之后，再次点击无反应

 

$(‘div‘).click(function(){

alert(123);

});

 

var oDiv = $(‘div‘).remove();

 

$(‘body‘).append( oDiv );

 

 

});

 

detach() : 跟remove方法一样，只不过会保留删除这个元素的事件操作行为

 

$(function(){

 

$(‘div‘).click(function(){

alert(123);

});

 

var oDiv = $(‘div‘).detach();

 

$(‘body‘).append( oDiv );

 

});

 

三、

 

1、事件写法:

 

$(‘div‘).click(function(){

alert(123);

});

 

$(‘div‘).on(‘click‘,function(){

alert(123);

});

 

$(‘div‘).on(‘click mouseover‘,function(){

alert(123);

});

 

$(‘div‘).on({

‘click‘ : function(){

alert(123);

},

‘mouseover‘ : function(){

alert(456);

}

});

 

触发一次取消该事件：

 

$(‘div‘).on(‘mouseover‘,function(){

alert(123);

$(‘div‘).off(‘mouseover‘);

});

 

 

 

2、scrollTop()：滚动距离

 

$(function(){

 

$(document).click(function(){

 

alert( $(window).scrollTop() ); //滚动距离

 

});

 

});

 

 

 

3、事件相关细节：无兼容问题、ev、ev.pageX、ev.which、one()、阻止默认事件和阻止冒泡

 

 

$(‘div‘).click(function(ev){

 

//ev : event对象

 

//ev.pageX(相对于文档的) = clientX(相对于可视区)+ scrollTop(滚动距离)

 

//ev.which = keyCode

 

ev.preventDefault(); //阻止默认事件

 

ev.stopPropagation(); //阻止冒泡的操作

 

return false; //阻止默认事件 + 阻止冒泡的操作

 

});

 

 

one()：

 

$(‘div‘).one(‘click‘,function(){ //只执行事件一次

alert(123);

});

 

 

 

4、位置操作：offset()、position()

 

<div id=‘div1‘>

<div id=‘div2‘></div>

</div>

 

#div1{ width:200px; height:200px; background:red; overflow:hidden; margin:20px; position:absolute;}

#div2{ width:100px; height:100px; background:yellow; margin:30px; position:absolute; left:25px;}

 

$(function(){

 

//div2.offsetLeft； //js原生offset距离是指到定位父级的距离，没有定位父级就是到文档的距离

 

//alert( $(‘#div2‘).offset().left ); //获取到文档屏幕的左距离

 

alert( $(‘#div2‘).position().left ); //父级有定位，到有定位的父级的left值,把当前元素转化成类似定位的形式。若父级没有定位，则返回父级元素的margin-left值。

 

 

});

5、parent()、offsetParent()

parent() : 获取父级

offsetParent() : 获取有定位的父级

 

6、val()、size()、each()

 

$(function(){

 

alert( $(‘input‘).val() ); //获取value值

$(‘input‘).val(456); //修改value值

 

alert( $(‘li‘).size() ); //获取元素的个数，像length

 

$(‘li‘).each(function(i,elem){ //遍历。一参：下标 ；二参 : 每个元素

 

$(elem).html(i);

 

});

 

});

 

 

7、hover() hide() show() fadeIn() fadeOut() fadeTo() slideUp() slideDown()

 

$(function(){

 

$(‘#div1‘).hover(function(){ //参数为两个函数，鼠标移入和移出

 

//$(‘#div2‘).hide(3000); //隐藏，参数为毫秒，默认400

 

//$(‘#div2‘).fadeOut(1000); //淡出，变透明

 

//$(‘#div2‘).slideUp();//由下向上缩短隐藏

 

$(‘#div2‘).fadeTo(1000,0.5);// 两个参数分别为时间和不透明度

 

},function(){

 

//$(this).css(‘background‘,‘red‘);

 

//$(‘#div2‘).show(3000);//显示

 

//$(‘#div2‘).fadeIn(1000);//淡入，变不透明

 

//$(‘#div2‘).slideDown();//由上向下延伸显示

 

$(‘#div2‘).fadeTo(1000,1);// 两个参数分别为时间和不透明度

 

});

 

});

---

 

JQuery 高级

 

一、基础方法

 

基础方法扩充

 

$（）下的常用方法： $().next()

 

get() : 下标和length属性

outerWidth() : 针对隐藏元素和参数true

text() : 合体的特例

remove() : detach()

$() : $(document).ready()

 

parents() closest()

siblings()

nextAll() prevAll()

parentsUntil() nextUntil() prevUntil()

clone()

wrap() wrapAll() wrapInner() unwrap()

add() slice()

serialize() serializeArray()

 

animate()

stop()

delay()

delegate() undelegate()

trigger()

ev.data ev.target ev.type

 

 

 

 

 

1、get()

 

get() : 就是把JQ转成原生JS,不带参数表示集合，参数为索引值，带参数表示哪一个

 

$(function(){

 

alert( $(‘#div1‘).get(0).innerHTML );

 

for(var i=0;i<$(‘li‘).length;i++){ //jquery本身有length属性

 

$(‘li‘).get(i).style.background = ‘red‘;

//$(‘li‘)[i].style.background = ‘red‘;// [i]和get()方法一样

}

});

 

 

2、outerWidth()与原生的区别

 

outerWidth()：包括width和innerWidth都能获取隐藏元素

 

offsetWidth : 是获取不到隐藏元素的值

 

$(function(){

 

alert( $(‘#div1‘).get(0).offsetWidth );

 

alert( $(‘#div1‘).outerWidth() );

 

});

 

3、text() 和 html() 的区别

 

$(function(){

 

alert( $(‘div‘).html() );//只获取一组元素第一个

 

$(‘div‘).html(‘文本‘); //可以修改文本内容，修改的是所有的元素标签

 

$(‘div‘).html(‘<li>lilili</li>‘)；//可以修改标签， 修改是修改所有元素的标签

 

alert( $(‘div‘).text() ); //会获取所有的内容(特例)

 

$(‘div‘).text(‘<h3>h3</h3>‘); //不能修改标签，只能修改集合中所有文本内容

 

 

});

 

 

4、parents()、closest()

 

parents() : 获取当前元素的所有祖先节点，参数就是筛选功能

 

closest() : 获取最近的指定的祖先节点(包括当前元素自身),必须要写筛选的参数,只能找到一个元素

 

$(function(){

 

//$(‘#div2‘).parents(‘.box‘).css(‘background‘,‘red‘);//所有class为box的元素都变红

 

$(‘#div2‘).closest(‘.box‘).css(‘background‘,‘red‘); //最近的一个class为box的祖先节点，也包括自己。

 

});

 

 

5、siblings()、nextAll() 、prevAll()、parentsUntil()、nextUntil()、prevUntil()

 

 

siblings() : 找所有的兄弟节点，参数也是筛选功能

 

nextAll() : 下面所有的兄弟节点，参数也是筛选功能

 

prevAll() : 上面所有的兄弟节点

 

 

parentsUntil(): 截止到哪一个祖先节点，不包括截止的那一个

 

nextUntil(): 截止到哪一个下面的兄弟节点，不包括截止的那一个

 

prevUntil(): 截止到哪一个上面的兄弟节点，不包括截止的那一个

 

 

$(function(){

 

$(‘span‘).nextUntil(‘h2‘).css(‘background‘,‘red‘); //不包括h2

 

});

 

6、clone()

 

$(function(){

 

//$(‘div‘).appendTo( $(‘span‘) );

 

//$(‘span‘).get(0).appendChild( $(‘div‘).get(0) );

 

//clone() : 不带参数时，只复制节点不复制它的事件；接收一个参数true ，作用可以复制之前的事件操作行为

 

$(‘div‘).click(function(){

alert(123);

});

 

$(‘div‘).clone(true).appendTo( $(‘span‘) );

 

});

 

 

 

7、wrap() 、wrapAll() 、wrapInner()、unwrap()

 

 

//wrap() : 包装 ，对指定的一组元素单个单个的包装

 

//wrapAll() : 整体包装，把指定的一组元素整体包装

 

//wrapInner() : 内部包装，在指定元素内部进行包装

 

//unwrap() : 删除包装 ( 删除父级 : 不包括body )

 

$(function(){

 

//$(‘span‘).wrapInner(‘<div>‘); // 参数一定要加标签符号

 

$(‘span‘).unwrap();

 

});

 

8、add() 增加元素

 

$(function(){

 

var elem = $(‘div‘);

 

var elem2 = elem.add(‘span‘);

 

elem.css(‘color‘,‘red‘);

 

elem2.css(‘background‘,‘yellow‘);

 

});

 

 

9、slice() 截取元素

 

$(function(){

 

$(‘li‘).slice(1,4).css(‘background‘,‘red‘); //截取第二个到第四个 [1，4）

 

});

 

10、数据串联化： serialize()、serializeArray()

 

<form>

<input type="text" name="a" value="1">

<input type="text" name="b" value="2">

<input type="text" name="c" value="3">

</form>

 

$(function(){

 

console.log($(‘form‘).serialize()); //string类型 : a=1&b=2&c=3

 

console.log( $(‘form‘).serializeArray() );

 

/*

JSON类型：

 

[

{ name : ‘a‘ , value : ‘1‘ },

{ name : ‘b‘ , value : ‘2‘ },

{ name : ‘c‘ , value : ‘3‘ }

]

 

 

*/

 

});

 

 

11、animate() :

 

第一个参数 : {} 运动的值和属性

 

第二个参数 : 时间(运动快慢的) 默认 : 400

 

第三个参数 : 运动形式 只有两种运动形式 ( 默认 : swing(慢快慢) 、linear(匀速) )

 

第四个参数 : 回调函数

 

$(function(){

 

$(‘#div1‘).click(function(){

 

$(this).animate({width : 300 , height : 300} , 4000 , ‘linear‘,function(){

alert(123);

});

 

$(‘#div2‘).animate({width : 300 , height : 300} , 4000 , ‘swing‘);

 

});

 

 

});

 

 

 

 

12、stop()、finish()、delay()

 

$(function(){

 

$(‘#div1‘).click(function(){

 

//回调函数可以改写成链式操作

 

$(this).animate({width : 300} , 2000 , ‘linear‘,function(){

$(this).animate({height : 300});

});

 

$(this).animate({width : 300} , 2000).animate({height : 300} , 2000);

 

// delay() : 延迟执行 delay(1000): 延迟1秒后执行后续操作

 

$(this).animate({width : 300} , 2000).delay(1000).animate({height : 300} , 2000);

 

 

});

 

 

$(‘#div2‘).click(function(){

 

//$(‘#div1‘).stop(); //默认 : 只会阻止当前运动

 

//$(‘#div1‘).stop(true); //阻止当前和后续的运动

 

//$(‘#div1‘).stop(true,true); //可以立即停止到当前运动指定的目标点

 

$(‘#div1‘).finish(); //立即停止到所有（当前和后续操作）指定的目标点

 

});

 

});

 

 

 

13、事件委托：delegate()、undelegate()

 

$(function(){

 

//这种做法还要遍历每个li，影响性能

 

$(‘li‘).on(‘click‘,function(){

this.style.background = ‘red‘;

});

 

//事件委托：利用事件冒泡，好处：提高性能、后续动态添加的元素也有事件操作

 

$(‘ul‘).delegate(‘li‘,‘click‘,function(){ // 第一个参数是事件实际触发的对象

 

this.style.background = ‘red‘;

 

// $(‘ul‘).undelegate(); 取消事件委托

 

});

 

});

 

 

 

14、主动触发：trigger()

 

$(function(){

 

$(‘#div1‘).on(‘click‘,function(){

alert(123);

});

 

$(‘#div1‘).trigger(‘click‘); //主动触发 click事件

 

$(‘#div1‘).on(‘show‘,function(){

alert(123);

});

 

$(‘#div1‘).on(‘show‘,function(){

alert(456);

});

 

$(‘#div1‘).trigger(‘show‘); //主动触发 自定义show所有事件的操作

 

});

 

 

15、事件的细节：ev.data 、ev.target 、ev.type

 

$(function(){

 

$(‘#div1‘).on(‘click‘,{name:‘hello‘},function(ev){

 

alert(ev.data.name); // 事件中数据：hello

 

alert( ev.target ); // 事件操作的对象：div

 

alert( ev.type ); //事件操作类型 ：click

 

});

 

});

 

 

---

二、工具方法

 

$下的常用方法：不是$()

 

type()

trim()

inArray()

proxy()

noConflict()

parseJSON()

makeArray()

ajax() : json形式的配置参数

url success

error contentType

data type

dataType cache timeout

抽象出来的方法：

get()

post()

getJSON()

支持jsonp的形式：指定?callback=?

插件：

$

$.extend

$.fn

$.fn.extend

 

深入：

$.Callbacks() : 回调对象

deferred() : 延迟对象

$.hodeReady() : 持有和释放ready

$.dequeue() : 执行队列

$.support : 功能检测

 

16、$、$.type

 

//$().css() $().html() $().val() : 只能给JQ对象用

 

//$.xxx() $.yyy() $.zzz() : 不仅可以给JQ用，也可以给原生JS用 : 叫做工具方法

 

 

$(function(){

 

//var a = null;

 

//$.type() : 也是判断类型

 

alert( typeof a ); // js原生

 

alert( $.type(a) ); // 比原生的类型细分的深

 

 

});

 

17、$.trim()

 

$(function(){

 

var str = ‘ hello ‘;

 

alert(‘(‘+$.trim(str)+‘)‘); // 去掉hello前后的空格 （hello）

 

});

 

 

18、$.inArray()

 

//inArray() : 类似于 indexOf

 

$(function(){

 

var arr = [‘a‘,‘b‘,‘c‘,‘d‘];

 

alert( $.inArray(‘b‘,arr) ); // 返回数组中的索引，没有找到返回 -1 ，相当于indexOf

 

 

});

 

 

19、$.proxy()

 

$(function(){

 

//proxy() : 改变this指向的

 

function show(n1,n2){

alert(n1);

alert(n2);

alert(this);

}

 

//show();

 

$.proxy(show , document)(3,4); // 在后面的括号中传参，立即执行

 

$.proxy(show , document，3，4)( ); //也可在$.proxy()中传参

 

 

$(document).click( $.proxy(show,window,3,4) );

//在$.proxy()中传参，若在后面添加一个()并在括号里传参，页面刷新后立即执行

 

});

 

 

20、$.noConflict()

 

防止jQuery中 $ 冲突的

 

var mao = $.noConflict(); //把mao改成 jQuery 中 $ 的作用

 

var $ = 10; //仅仅是一个变量

 

mao(function(){

 

mao(‘body‘).css(‘background‘,‘red‘);

 

});

 

21、$.parseJSON()

 

将字符串类型转成json类型

 

var str = ‘{"name":"hello"}‘;

console.log($.parseJSON( str ).name); //hello

 

22、$.makeArray()

 

将类数组转化成数组，可以具备数组的方法

 

var aDiv = document.getElementsByTagName(‘div‘); //类数组

 

$.makeArray(aDiv).push(1);

 

 

 

23、ajax() ！看文档！！！

 

$.ajax({

url : ‘xxx.php‘,

data : ‘name=hello&age=20‘,

type : ‘POST‘,

success : function(data){

alert(1);

},

error : function(){

alert(2);

}

});

 

$.get(‘xxx.php‘,function(){

 

});

 

$.post(‘xxx.php‘,function(){

 

});

 

$.getJSON(‘xxx.php?callback=?‘,function(data){

data ..

});

 

随机({});

 

········

 

 

 

 

24、扩展插件：$.extend、$.fn.extend

 

 

<script src="jquery-1.10.1.min.js"></script>

 

<script>

 

//$.extend : 扩展工具方法下的插件形式 $.xxx() $.yyy()

 

//$.fn.extend : 扩展到JQ对象下的插件形式 $().xxx() $().yyy()

 

//写成JSON形式：

 

$.extend({

 

leftTrim : function(str){

return str.replace(/^\s+/,‘‘);

},

 

rightTrim : function(){},

 

aaa : function(){

alert(1);

},

 

bbb : function(){}

 

});

 

$.fn.extend({

 

drag : function(){

//this : $(‘#div1‘)

var disX = 0;

var disY = 0;

var This = this;

this.mousedown(function(ev){

disX = ev.pageX - $(this).offset().left;

disY = ev.pageY - $(this).offset().top;

$(document).mousemove(function(ev){

This.css(‘left‘ , ev.pageX - disX);

This.css(‘top‘ , ev.pageY - disY);

});

$(document).mouseup(function(){

$(this).off();

});

return false;

});

},

 

 

aaa : function(){

alert(2);

}

 

});

 

</script>

 

 

<script>

 

 

//$.trim()

//$.leftTrim()

 

var str = ‘ hello ‘;

 

alert( ‘(‘+$.leftTrim(str)+‘)‘ ); // 只清除了左空格

 

 

 

$(function(){

 

$(‘#div1‘).drag(); //拖拽

 

});

 

 

$.aaa(); // 1

$().aaa(); //2

 

</script>

 

 

<div id="div1"></div>