Jquery学习笔记

Jquery学习笔记
1. 引入
- 本地引入
- 网络引入
- 入口函数
$(function() { })

2. jquery对象和dom对象(原生的js对象)

2.1 区别

        来源

                dom对象主要通过document获取，得js对象，或js对象数组

                jquery对象通过$(选择器)来获取，得到【伪数组】

        调用机制

                dom对象本质是操作元素的属性

                jquery对象本质是调用方法

                两者是不能混用的

2.2 转换

        dom对象 --> jquery对象

        $( document.querySelector('div') )

        jquery对象 --> dom对象

        $('div')[0]

        $('div').get(0)

3. 选择器

3.1 基本选择器
- id选择器 $('#d1')
- 类选择器 $('.c1')
- 元素选择器 $('div')
3.2 复合选择器

（jquery含隐式迭代：把匹配到的所有元素进行遍历，对每个元素调用相同的方法

（js则需要手动遍历）
- 并集选择器 , ,
- 交集选择器
- 后代选择器 $('ul li').css('color','blue')
- 子选择器 >
3.3 筛选选择器
- :first
- :last
- :even $('ul li:even') 奇数
- :odd $('ul li:odd') 索引值为偶数，0 2 4 ...
- :not() $('ol li:not(:first)')
- :gt() $('ol li:gt(0)') 所有【大于索引值】的元素
- :eq() $('ol li:eq(3)') 给定【索引值】的元素
- :nth-child(n) $('ol li:nth-child(4)').css('color','gold')
选择ol下的第四个（并非索引4）

n为自然数：0 1 2 3 ...

3.4 筛选方法
- first() $('ol li').first()
- last() $('ol li').last()
- parent() $('.son').parent()
- children() $('.nav').children('p')
- slice(start, [end]) $('ol li').slice(1)
选取一个匹配的子集
参数1，起始索引，为负是从尾
参数2 默认为结尾
- eq(索引) 给定索引值的元素 $('ol li').eq(3)
- nextAll() 当前元素之后所有的同辈元素 $('ol li').first().nextAll()
- find("") 查找后代元素 $('.nav').find('p')
- siblings() 其他兄弟元素 $('ol li').first().siblings()
- not() $('ol li').not($('ol li').first()).css('color','pink')
- get(索引) js 对象 $('ol li').get(0)
- first() jquery 对象 $('ol li').first()
4. DOM操作

4.1 操作样式

        css方法

        css(属性名) 获取样式属性的值

        $('div').css('width')

        css(属性名,属性值) 设置样式属性的值

        $('div').css('background-color','yellow')

        $('div').css("background", "") //空属性值

        $('div').css({         "width":"200px",         "background-color":"red"         })

        类方法

                addClass() 添加类 $('div').addClass('d1')

                removeClass() 移除类 $('div').removeClass('d1')

                toggleClass() 切换类：存在（不存在）就删除（添加）

        $('div').click(function(){         $(this).toggleClass('d1')         })

4.2 操作属性
- prop() 一般操作元素固有属性
prop(属性名) 获取 $('a').prop('href')

prop(属性名,属性值) 设置 $("input").prop("checked", true);
- attr() 一般操作元素自定义属性（也可操作固有属性）
attr(属性名,属性值) 设置 $('div').attr('data-index', '3')

attr(属性名) 获取 $('a').attr('href')

4.3 操作文本 ⭕text和html
- html() 有样式
html() 获取 $('div').html()

html(内容) 设置 $('div').html('
标题
')
- text() 纯文本
text() 获取 $('div').text()

text(内容) 设置 $('div').text('内容')
- val() 操作文本框内容
                val() 获取          $('input').val()

                val(内容) 设置   $('input').val('张三')

4.4 操作节点

1）创建节点   $('字符串类型的元素')

        var li = $('
中国移动

')
         $('ul').append(li)

2）添加元素

append() 末尾

var li = $('

中国移动

')
         $('ul').append(li)

li.appendTo($('ul'))

prepend() 前面

var li = $('

中国移动

')
         $('ul').prepend(li)

3）删除元素 元素.remove() 可以自己删除自己

var li = $('

中国移动

')
         $('ul').append(li)
         li.remove()

4）克隆复制 $("img").clone()

5. Jquery效果

5.1 参数

speed 预定速度字符串("slow", "normal", "fast")或动画时长毫秒数(如：1000)
easing (Optional) 用来指定切换效果，默认"swing"，可用参数"linear"
fn 在动画完成时执行的函数，每个元素执行一次

5.2 显示和隐藏

改的是display属性

show([s,[e],[fn]]) $('div').show(1000,function(){ alert('显示') })
hide([s,[e],[fn]]) $('div').hide(1000,function(){ alert('隐藏') })
toggle([s],[e],[fn]) $('div').toggle(1000,function(){ alert('切换') })

5.3 上滑和下滑

slideDown([s],[e],[fn]) $('div').slideDown(1000,function(){ })
slideUp([s,[e],[fn]]) $('div').slideUp(1000,function(){ })
slideToggle([s],[e],[fn]) $('div').slideToggle(1000,function(){ })

5.4 淡入淡出

fadeIn([s],[e],[fn]) $('div').fadeIn(1000,function(){ })
fadeOut([s],[e],[fn]) $('div').fadeOut(1000,function(){ })
fadeTo([[s],o,[e],[fn]]) 修改透明度 $('div').fadeTo(1000,0.5,function(){ })
fadeToggle([s,[e],[fn]]) $('div').fadeToggle(1000,function(){ })

6. 遍历

6.1 jquery对象.each(匿名函数)


var arr =  ['red','green','blue']
 
$('div').each(function(i, e) {
     //参1: 索引  参2: 元素，  参2 === this
     //this，js元素对象，此处 this == e
    $(e).css('color',arr[i])
})

隐式迭代（自动遍历） $("ul li").css('color', red)

6.2 $.each(jquery对象,匿名函数)


//普通遍历
$.each(        $("div")        ,function (i, e) {
		// 参1: 索引   参2: 元素
});
 
//遍历字面量对象
$.each({ name: "张三", age: 23 }, function (i, e) {
		//参1：属性名  参2：属性值
});

7. 事件绑定和解绑

7.1 绑定

1）传统绑定 jq对象.方法名(匿名函数)

添加多个点击事件不会被覆盖，因为jquery本质是调用方法


$('div').click( function(){
    $(this).css('background','red')
})

2）on

绑定多个不同类型事件


$('div').on({
    click:function(){
        $(this).css('background','red')
    },
    mouseover:function(){
        $(this).css('background','blue')
    }
})

事件委托、动态绑定

把子元素事件绑定到父元素上
原理：事件冒泡(向上传递)
会给动态生成的元素绑定事件


$('ul').on('click', 'li', function() {
//参1: 事件名，参2: 具体绑定对象，参3: 匿名函数
    //this就是代表里面的子元素
    console.log(this.innerHTML);
})

7.2 解绑 off

移除单个事件 $('div').off('click')
移除所有事件 $('div').off()

8. 其它

8.1 链式编程

$('#content div').eq(index).show().siblings().hide()

$(this).css('background','pink').siblings().css('background','')

$("button").not($(this)).css("background", "")

8.2 获取索引

$('#left li').mouseover(function(){
//获取光标移入元素在同辈中的索引
var index = $(this).index();

$("div").attr("index")

1. 引入

2. jquery对象和dom对象(原生的js对象)

2.1 区别

2.2 转换

3. 选择器

3.1 基本选择器

3.2 复合选择器

3.3 筛选选择器

3.4 筛选方法

4. DOM操作

4.1 操作样式

4.2 操作属性

4.3 操作文本 ⭕text和html

标题

4.4 操作节点

5. Jquery效果

5.1 参数

5.2 显示和隐藏

5.3 上滑和下滑

5.4 淡入淡出

6. 遍历

6.1 jquery对象.each(匿名函数)

6.2 $.each(jquery对象,匿名函数)

7. 事件绑定和解绑

7.1 绑定

7.2 解绑 off

8. 其它

8.1 链式编程

8.2 获取索引

`标题`