jQuery入门

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

参考

载入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()方法将$赋值给其他变量

$ === 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...

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

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

获取上一个同级节点(相当于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])

// 修改元素文本内容
$(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

// 修改元素内容
$(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)

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)

//向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数据,如事件/附加数据

$('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])

$('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对象

可以用 $函数将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();

试一试