jquery

测试是否引入成功

两种方法

alert($)

alert(jQuery)

能弹出函数就引入成功了

jquery的特点：

jquery选择到的元素，都是伪数组

伪数组不能使用DOM操作

//$div.innerText = '123'; 这是将innertext放到$div的数组中
// console.log($div);
// // 除非取下标获取到准确的dom元素
console.log($div[0])
$div[0].innerText = '456';

jquery中给选择到的伪数组提供了一个方法叫get,可以通过下标选择到准确的dom元素

 console.log( $div.get(0).innerText );

dom元素也不能使用伪数组的操作

var div = document.querySelector("div");
// div.get() // 报错
// 除非将dom元素转为jquery的伪数组 - $(dom元素)
console.log( $(div) );

总结：

jquery是js的一个库，将很多js的操作封装成了很多函数放到了一个文件中

jquery有3个特点：

强大的选择器

隐式迭代

链式操作

jquery选择到的元素都是伪数组，伪数组不能使用dom的操作，除非取下标或调用get方法得到dom元素

dom元素也不能使用jquery的方法去操作，除非使用 $(dom元素) 转成jquery的伪数组

 

基本选择器

 

标签名、类名、id名、属性

 

标签名：$('标签名')

var ul = $('ul')
console.log(ul);

类名：$('.类名')

var second = $('.second')
console.log(second);

id：$('#id名')

console.log( $('#four') );

属性：$('[属性名="值"]')

console.log( $('[name="three"]') );

伪类选择器

var first = $('li:first-child') //第一个
var last = $('li:last-child')  //最后一个
var four = $('li:nth-child(4)') //nth-child() 选择第几个
var even = $('li:even')  //奇数
var even = $('li:odd')  //偶数
var empty = $('li:empty') //空的li

筛选器

// 筛选器跟伪类选择器差不多，要稍微简单一点点
var first = $('li:first')
// console.log(first);

var four = $('li:eq(3)') // 下标 选择第几个
// console.log(four);

var lt = $('li:lt(3)') //小于下标3的
// console.log(lt);

var gt = $('li:gt(2)')  //大于下标2的
console.log(gt);

表单元素选择器

console.log( $(':input') ); //选中表单中所以元素
console.log( $(':text') );  //选中表单中所以属性值text的元素
console.log( $(':password') ); //选中表单中所以属性值password的元素
console.log( $(':radio') );  //选中表单中所以属性值radio的元素
console.log( $(':checkbox') );  //选中表单中所以属性值checkbox的元素

console.log( $(':submit') );  //选中表单中所以属性值submit的元素
console.log( $(':reset') );  //选中表单中所以属性值reset的元素
console.log( $(':image') ); //选中表单中所以属性值image的元素
 

console.log( $(':hidden') ); // 所有不显示的标签

console.log( $(':file') ); //选中表单中所以属性值file的元素

筛选器的方法

$("li").first() // 元素集合中的第一个
$("li").last() // 元素集合中的最后一个
$("div").next() // div的下一个兄弟元素
$("div").prev() // div的上一个兄弟元素
$("div").nextAll() // div后面的所有兄弟元素
$("div").prevAll() // div前面的所有兄弟元素
$("div").parent() // div的父元素
$("div").parents() // div的所有直系祖宗元素
$("div").eq(数字) // 指定下标的div元素
$("div").find(选择器) // div后代中的的指定元素
$("div").siblings() // div的所有兄弟元素
$("div").children() // div下的所有子元素

事件 

jquery中的事件，省略on来绑定，且事件类型是一个方法

div.onclick = function(){}
$div.click(function(){})
$('li').click(function(){
    console.log(this);
})
$('li').mouseover(function(){
    console.log(this);
})

使用on方法来绑定

参数1：事件类型

参数2：可选项 - 委托的子元素

参数：可选项 - 传入事件对象的数据

 $('ul').on('click','.four',[1,2,3,4,5],function(e){
     console.log(this);
     console.log(e);
 })

one方法绑定事件 - 事件只能触发一次

$('ul').one('click',function(){
    console.log(this);
})

trigger - 手动触发事件

 $('li').click(function(){
     console.log(this);
 })

$('li').trigger('click')

off方法用来解绑事件

$('li').click(function(){
     console.log(this);
 })
$('li').off('click')

hover方法 - 用来处理移入移出

$('ul').hover(function(){ //移入
    console.log(123);
},function(){  //移出
    console.log(456);
})

window.onload = function(){} // 等页面中 所有资源 都加载完成以后再执行这个事件

这里的所有资源：html结构、css文件、js文件、图片文件 .....

$(document).ready(function(){
    // 功能跟window.onload差不多
    // 要比window.onload的效率高 - 等html结构加载完成以后就加载这个事件
})

$(function(){

}) 是$(document).ready(function(){ }的简写

总结：

1.jquery中的事件语法：伪数组.事件类型(function(){})

2.伪数组.on(事件类型,委托元素:可选项,数据:可选项,function(){})

3.只能触发一次的事件：伪数组.one(事件类型,function(){})

4.手动触发事件：伪数组.trigger(事件类型,某个函数:可选项)

5.解绑事件：伪数组.off(事件类型,函数:可选项)

6.hover事件可以处理移入和移出

7.$(function(){})或$(document.ready(function(){})) 来代替 Window.onload 效率高

 

属性操作

添加一个属性 - attr方法

$('div').attr('aa','bb')

删除属性 - removeAttr方法

$('div').removeAttr('aa')

注意：特殊属性需要使用 - prop方法去操作：checked disabled

$('input').prop('checked',true)
$('input').prop('disabled',true)

$('input').prop('checked',false)

设置和获取样式

// 设置和获取使用同一个方法去做 - css
$('div').css('color','red') // 设置一个样式

// 设置多个
$('div').css({
    width:'200px',
    height:"200px",
    backgroundColor:"green"
})

// 获取样式
console.log( $('div').css('width') );

类名操作 - 4个方法：addClass(添加类型) removeClass(删除类名) toggleClass(让类名在添加和删除之间切换) hasClass(判断是否具有某个类名)

$('div').addClass('box')

$('div').addClass('red')

$('div').removeClass('red')

$('button').click(function(){
    $('div').toggleClass('red')
})

console.log( $('div').hasClass('red') );
console.log( $('div').hasClass('box') );
</script>

内容操作

内容：text - 获取/设置 文本

console.log( $('div').text() );

  $('div').text('div标签');

html - 获取/设置 带标签的内容

console.log( $('div').html() );

$('div').html('<b>加粗的文本</b>')

 val - 获取/设置 表单元素的内容

console.log( $('input').val() );

$('input').val('lisi')