1. 参考
  2. 载入jQuery
  3. 兼容性
  4. 获取元素
    1. $()
    2. find 获取子/孙节点
    3. children
    4. parent
    5. parents
    6. next
    7. prev
    8. first
    9. last
    10. eq
    11. get
  5. 修改/获取元素内容
    1. text
    2. html
    3. val
  6. 插入元素
    1. append
    2. before
    3. after
  7. 删除元素
    1. remove
    2. detach
    3. empty
  8. CSS
  9. class
    1. hasClass 检查class
    2. addClass 添加class
    3. removeClass 删除claass
  10. 属性
    1. attr
    2. prop 获取/设置属性
    3. removeAttr 删除属性
  11. 事件
    1. on 绑定事件
    2. off 删除事件
    3. click 点击事件
    4. ready dom载入后触发
  12. event
    1. event.width | event.height 获取元素宽/高度
    2. event.pageX
  13. 对象转化
    1. 转换为jQuery对象
    2. 还原js对象
      1. $()[]
      2. get()
  14. jQuery对象遍历
    1. each
    2. map
    3. is
    4. filter 过滤节点
  15. 其他
    1. hide() | show()
    2. toggle()

jQuery入门

jquery是一个Javascript库.简化了js Dom/CSS/Ajax操作,支持链式表达式/动画.兼容ie6+浏览器,拥有丰富的第三方扩展

参考

jQuery API 中文文档

载入jQuery

本地加载

1
2
3
<head>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
</head

cdn加载

1
2
<!--使用Microsoft CDN加载jQuery-->
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>

兼容性

jQuery 2.x和3.x版本支持ie9及以上版本的浏览器
如需兼容不兼容ie6~ie8 ,需使用jQuery 1.12版本

获取元素

$()

用于获取/转换节点,返回jQuery对象 向$函数传入css选择器,$函数会返回一个对象,内含css选择器匹配到的元素
$(selector| node)

1
$('body') // [body, selector: "body", context: document]

不要直接用for循环迭代jQ选择器返回的对象,因为返回的是对象而非数组

1
2
for(let i of $('*')){} // $(...) is not a function or its return value is not iterable 
for(let i in $('body')){console.log(i)} // 0 selector context...

正确的方式是使用each()获取所有元素

$符号是jQuery的别名
当jQuery中的$符号和其他库冲突时,用noConflict()方法将$赋值给其他变量

1
2
3
4
$ === jQuery //true
var j = jQuery.noConflict();
j('body') // [body...
$ // undefined

常用选择器
:input //选择input textarea select button
:radio //选择单选框
:focus //选择当前焦点
:checked //选择以被选中的单选框/复选框
:enabled // 选择可用的input select
:disabled 选择不可用的input select
:visible //选择可见元素 :hidden //选择隐藏元素

find 获取子/孙节点

.find(selector)
获取后代节点

1
$(document.body).find('*'); // [div,div...

children

$().children([selector])

  • selector 可选,留空时返回所有子元素
1
2
$('html').children() // [head, body]
$('html').children('body') //[body]

parent

.parent([selector])
获取父节点

1
$('button').parent() // [body...

parents

.parents([selector])
获取所有祖先节点(父/祖父...)

1
$('button').parents() // [body, html...

next

获取下一个同级节点(相当于node.nextElementSibling) .next()

1
$('head').next() //[body..

prev

获取上一个同级节点(相当于node.previousElementSibling)

1
$('body').prev() // [head...

first

获取匹配的元素合集的第一个元素
.first()

1
$('div').first() // [div...

last

获取匹配到的元素合集的最后一个元素
.last()

1
$('div').last() // [div...

eq

获取匹配到的元素合集的第n的元素,返回jQuery对象
.eq(n)

  • n可以为负数(从-1开始)
1
$('div').eq(1) // [div...

get

获取匹配到的元素合集的第n的元素,返回js DOM对象
.get([n])

  • n 可选,留空时返回一个数组,包含获取到的所有js DOM对象
1
2
3
$('div').get(0) // [div...
// 等价于
$('div')[0]

修改/获取元素内容

text

获取/修改元素文本内容(相当于innerText)
.text([text])

1
2
3
4
5
// 修改元素文本内容
$(document.body).text('hello')
// 获取元素文本内容
$(document.body).text() // "hello"
$(document.body).text('<button>test</button>')

html

获取/修改元素内的HTML文档内容(相当于innerHTML)
.html(content|function)

  • content 需添加内容,接受String Object jQuery
  • function 需定义两个参数,分别为所获元素的index和html内容.将返回内容(可以是html文档/dom对象/jQuery对象)作为修改的html
1
2
3
4
5
6
7
8
9
10
11
12
13
// 修改元素内容
$(document.body).html('<button>hello</button>')
// 获取元素内容
$(document.body).html() // "<button>hello</button>"
// 也可以传入DOM/jQuery对象
var n = $('<button>test</button>');
$('body').html(n);
// 传入函数
$('button').html(function(index,html){
console.log(index); // 0 1...
console.log(html) // test submit...
return html + 'end'
});

val

获取/修改input/select/textarea元素的的value值(相当于node.value)
.val(string|function)

1
2
3
4
5
6
7
8
9
10
var n = '<input value="1">'
$('body').append(n);
// 获取值
$('input').val() // "1"
// 修改值
$('input').val('2');
// 传入函数
$('input').val(function(index,value){
return parseInt(value) + 1;
})

插入元素

append

在内部子元素结尾添加元素(相当于appendChild(newNode))
$().append(content|function)

1
2
3
4
5
6
//向body添加div
$('body').append('<button>test</button>');

$('body').append(function(index,html){
return '<button>test</button>'
})

before

在元素前插入元素(相当于node.parentElement.insertBefore(newNode,node))
.before(content|function)

1
$('button').before('<span>test</span>')

after

在元素后插入内容(相当于node.parentNode.insertBefore(newNode,node.nextSibling)) .after(content|function)

1
$('button').after('<span>test</span>')

删除元素

remove

把匹配的元素从DOM文档树中删除
.remove([selector])

  • selector 可选,当元素匹配选择器时,删除该元素
1
2
3
$('body').remove(); 
// 删除符合选择器的内容
$('body').remove(':parent');

该方法会清除所有绑定在元素上jQuery数据,如事件/附加数据

1
2
3
4
5
$('button')[0].onclick = function(){alert('1')};
$('button').click(function(){alert('2')})
var b = $('button').remove();
document.body.appendChild(b[0])
// 点击button 弹出"1"

detach

把匹配的元素从DOM文档树中删除.类似remove,区别是detach保留jQuery绑定数据
.detach([selector])

1
2
3
4
5
$('button')[0].onclick = function(){alert('1')};
$('button').click(function(){alert('2')})
var b = $('button').detach();
document.body.appendChild(b[0])
// 点击button 弹出"1" "2"

empty

删除元素的所有子节点(包括文本节点) .empty()

1
$('body').empty()

CSS

可用css()获取/设置css属性
$().css(property) 获取属性
$().css(property, value) 设置css属性

//只传入一个参数,则返回css属性值  
$('body').css('background-color') // "rgb(255, 255, 255)"

css方法同时可用于设置属性,需传入两个参数,第二个参数为css属性值

//设置背景颜色为灰色
$('body').css('background-color', '#aaa');
// 删除背景颜色
$('body').css('background-color', '');

class

hasClass 检查class

检查jQuery对象的class属性是否有某值,相当于classList.contains()

<div class="c-4 test"></div>
alert($('.c-4').hasClass("test")) //true
alert($('.c-4').hasClass("t")) //false

addClass 添加class

添加类名,相当于classList.add()

$('.c-4').addClass("t");
alert($('.c-4').hasClass("t")) // true

removeClass 删除claass

删除类名,相当于classList.remove()

$('.c-4').removeClass("t");
alert($('.c-4').hasClass("t")) // flase

属性

attr

获取/设置属性
$().attr(attribute) //获取属性
$().attr(attribute, value) //设置属性

//获取body的class属性
$('body').attr('class') //body
//设置body的class属性值为test
$('body').attr('class','test')

prop 获取/设置属性

类似attr,区别为对于checked属性,attr返回checked/undefined,prop返回true/false

<input type="radio"></input>
alert($('input').attr('checked')) //undefined
$('input').attr('checked','checked')
alert($('input').attr('checked')) //checked

alert($('input').prop('checked')) // false
$('input').prop('checked', true)
alert($('input').prop('checked')) // true
//或
$('input').prop('checked', 'true')

要是想移除选中,用attr('checked','')是没用的. 应使用attr('checked',false)或removeAttr('checked')
操作selected/checked等还是建议用prop

removeAttr 删除属性

删除jQuery对象的属性
$().removeAttr(attribute)

//删除body的class属性
$('body').removeAttr('class')

事件

on 绑定事件

$().on(event,function(){...}) //绑定事件
$().on(event) //触发事件

//给body元素绑定onclick事件
$('body').on('click',function(){alert('')});

其他事件见参考Jquery事件手册

可用$().on(event)触发事件

//触发点击事件
$('body').on('click')

off 删除事件

删除绑定在元素上的事件,无法删除绑定的匿名函数
$('body').off(event, functionName)

function print(){
    alert('');
}
$('body').click(print);
$('body').off('click', print)

如下的匿名函数是无法删除的

$('body').click(()=>alert(''));
//两个匿名函数不是同一个函数对象,因此无法移出lick绑定的函数事件
$('body').off('click', ()=>alert(''));

click 点击事件

绑定事件还有一种写法,直接在jQuery对象后接事件名作为方法调用
$().event(function(...)) //绑定点击事件
$().click() // 触发点击事件

$().click(function(){alert('')});
//等价于
$('body').on('click',function(){alert('')});

js中有一个长得很像的属性叫onclick
二者的区别是click可向同一个元素绑定多个事件,而onclick先绑定的事件会被后绑定的覆盖

//隐藏body元素
$('.hide-page').click(function(){
    $("body").hide();
})

//更改背景颜色
$('.hide-page').click(function(){
    $("body").css("background","yellow");
})

ready dom载入后触发

ready事件会在dom载入后触发,防止代码在dom加载前执行

$('body').ready(() => alert(''));
//等价于
$('body').on('ready', () => alert(''));

$().ready()还有一种简写 $(function(){})

$(function(){alert('')})
//等价于
$('window').on('ready',function(){alert('')}
//其实就是个dom载入后触发的子执行匿名函数

event

所有事件都会自动传入event作为参数,内含所有的事件信息
$().on(event,function(event){...})

//打印触发click事件的元素名
$('body').click((e)=>alert(e.target.tagName)); //H!

event.width | event.height 获取元素宽/高度

获取/设置元素宽度/高度
width() //获取元素宽度
width(number) //设置元素宽度

$(window).width(); //1000
$(window).height(); // 500

//设置body宽度为100px;
$('body').width(100)

event.pageX

鼠标位置(相对于窗口)

var body = $('body');
body.mousemove(function(e){
    console.log(e.pageX);
})

对象转化

转换为jQuery对象

可以用jsjQueryjs函数将js对象转换成jQuery对象 将js对象作为参数传给函数,返回jQuery对象
$(jsObj)

var body = document.getElementsByTagName('body')
$(body) instanceof jQuery; // true

还原js对象

从jQuery中获取js对象有两种方式

$()[]

可用[]号直接从jQuery中获取js对象

$(body)[0].tagName //"BODY"

get()

可用get函数将jQuery对象转换为js对象
$().get(index)

$(body).get(0).tagName //body

另需注意 each等方法传入的第二个参数是js对象,不是jQuery对象

$('body').each(function(i, node){
    //node相当于this,是一个js对象
    alert(node instanceof jQuery); //false
    alert(node.tagName) // BODY
})

jQuery对象遍历

each

遍历jQuery对象,为处理其中的所有节点
each中的函数将被传入两个参数,循环计数(从0开始)和js对象
$().each(function(index,node){})

$("div").each(function(i,node){
    //node是js对象,需使用$()转换成jQuery对象
    console.log($(node).text());
})

注:index,node参数是可选的

$("div").each(function(){
    console.log(this);
})

可用return结束每一循环

$("div").each(function(i,node){
    console.log('1'); //1 1 1 1 1...
    return;
    //return后的代码不会被执行
    console.log('2');
})    

map

类似each,区别为map()返回一个新jQuery对象,内含所有return返回的值
$().map(function(index, node){return ...})

$('div').map(function(i){
    return i;
}) //[0, 1, 2, 3, 4, 5, 6, 7, 8]

is

检查jQuery对像 $().is(selector) //检查对象是否符合css选择器规则
$().is(function(index){return }) //根据返回值判断
$().is(Object | jQueryObj) //检测jQ对象和传入对象是否是同一节点

//判断body是否是html的子元素
$('body').is('html>*') //true
//判读$('body')获取的Dom节点和对象node是否是同一节点
var node = document.querySelector('body');
$('body').is(); //true
//判断$('body')的元素名是否是"BODY"
$('body').is(function(index){
    //如果函数返回true,is()也返回true,反之亦然.
    return this.tagName === "BODY"; //true
})

filter 过滤节点

删除jQuery对象中不符合条件的节点
$().filter(selector | function(){})

$('html').children().each((i,node)=> alert(node.tagName)); // HTML BODY
//html不符合filter内选择器条件,被删除
$('html').children().filter("body").each((i,node)=> alert(node.tagName)); //BODY

也可传入一个函数作为参数
该函数将被传入两个参数(序号和Dom对象),通过返回true/false决定是否保留元素

$('html').children().filter(function(i, node){
    return node.tagName === "BODY";
}).each((i,node)=> alert(node.tagName)) //BDOY

其他

hide() | show()

隐藏/显示元素
$(selector).hide(speed,callback)
$(selector).show(speed,callback)

$('div').hide();
$('div').show();
试一试

speed 元素显示/隐藏速度,默认值为0

  • 'slow'
  • 'normal'
  • 'fast'
  • number

callback hide/show执行完后,要执行的函数,可选(必须设置speed,才能设置callback)

$('.hide-show-page').click(function(){
    $("body").hide(1000, function(){
        $("body").show();
    });
});

toggle()

toggle可切换元素的hide和show状态
$(selector).toggle(speed,callback)

$('div').toggle();
试一试