jQuery

jQuery是什么?

jQuery是一个JavaScript库 JavaScript库 -> 一个封装好的函数集合(对象)

jQuery的核心 -> 操作DOM元素，事件处理，动画，网络请求 jQuery的本质 -> 就是学习调用这些函数（方法）易少快

jQuery优点

轻量级。核心文件才几十kb，不会影响页面加载速度。
跨浏览器兼容，基本兼容了现在主流的浏览器。
链式编程、隐式迭代。
对事件、样式、动画支持，大大简化了DOM操作。
支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
免费、开源。

jQuery下载

官网: jQuery 开发版: 代码注释，变量命名规范，报错友好生产版: 代码压缩文件后缀 .min 版本介绍： 1x ：兼容 IE 678 等低版本浏览器，官网不再更新兼容性好 2x ：不兼容 IE 678 等低版本浏览器，官网不再更新功能方法多 3x ：不兼容 IE 678 等低版本浏览器，是官方主要更新维护的版本。功能方法、移动端适应好

jQuery的使用

引入jquery
入口函数

    // jQuery的入口函数
    // 第一种写法
    $(function () {
        var a = 1
        $('h1').css('color', 'red')
    })
    // 第二种写法
    $(document).ready(function() {
        var a = 1
        $('h1').css('color', 'red')
    })

相当于原生 js 中的 DOMContentLoaded
等着 DOM 结构渲染完毕即可执行内部代码

jQuery中的顶级对象

原生JS中顶级对象是：window 在jQuery中的顶级对象： jquery 可以简写为 $

注意点: 在定义变量时不要定义jquery和$

DOM对象与jQuery对象的区别

DOM对象：原生JS提供的对象 jQuery对象: jQuery封装的对象

区别: DOM只能用原生JS的方法 jQuery对象只能用jQuery封装的方法

DOM对象与jQuery对象互转

DOM对象 -> jQuery对象语法: $(DOM对象) => jQuery对象

var button = document.querySelector('button')
$(button).html('asdasdasdsadasd')

jQuery对象 -> DOM对象语法：jQuery对象[索引] => DOM对象

$('button')[0].innerHTML = '1233213'
$('button').innerHTML = '1233213'

jQuery的选择器

基础选择器

语法： $(css选择器) -> jQuery对象

标签选择器 $(标签名) -> $('button')
类选择器 $(.类名) -> $('.item1')
ID选择器 $(#id名) -> $('#btn')
后代选择器 $(选择器选择器选择器) -> $('ul li h1')
子代选择器 $(选择器 > 选择器) -> $('ul > li')
选择第一个元素 $(选择器:first) -> $('ul li:first')
选择最后一个元素 $(选择器:last) -> $('ul li:last')
选择第n个元素(n从0开始) $(选择器:eq(n)) -> $('ul li:eq(2)')

筛选方法（节点操作）

查找子元素 jQuery对象.children(选择器) $('.box').children().css('color', 'red') 注意点：默认返回所有子元素
查找后代元素 jQuery对象.find(选择器) $('.box').find('li:eq(1) a').css('font-size', '40px') 注意点：默认返回所有子元素
获取父元素 jQuery对象.parent() $(this).parent('li')
获取祖先元素 jQuery对象.parents(选择器) $(this).parents('div').css('background', 'red')
获取兄弟元素 jQuery对象.siblings(选择器) $(this).parent('li').siblings('li').css('color', 'yellow')
获取当前元素在其父元素下的下标 jQuery对象.index() $(this).index()

jQuery绑定事件

语法: jQuery对象.事件名(事件函数)

$('button').click(function() {})

jQuery操作样式

jQuery操作Style

语法： jQuery对象.css()

参数只写属性名，则是返回属性值 var strColor = $(this).css('color');
参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号 $(this).css('color', 'red');
参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号 $(this).css({ "color":"white","font-size":"20px"});

jQuery操作Class

常用的三种设置类样式方法：

添加类 $("div").addClass("current");
删除类 $("div").removeClass("current");
切换类 (无则添加有就删除) $("div").toggleClass("current");

jQuery效果（动画）

1. 显示与隐藏

show(time, fn) 显示
hide(time, fn) 隐藏
toggle(time, fn) 显示 <--> 隐藏

time 动画时间（单位/毫秒） fn 动画结束后的回调函数效果：宽与高以及透明度变化 -> display:none

2. 滑入与滑出

slideDown(time, fn) 滑入
slideUp(time, fn) 滑出
slideToggle(time, fn) 显示（滑入） <--> 隐藏（滑出）

time 动画时间（单位/毫秒） fn 动画结束后的回调函数效果：高变化 -> display:none

3. 淡入与淡出

fadeIn(time, fn) 淡入
fadeOut(time, fn) 淡出
fadeToggle(time, fn) 显示（淡入） <--> 隐藏（淡出）
fadeTo(time, fn)

time 动画时间（单位/毫秒） fn 动画结束后的回调函数效果：透明度变化 -> display:none

jQuery设置属性和获取属性

HTML标签属性 -> 原生属性自定义属性数据属性原生属性： html规定好的属性 id class title src href checked 自定义属性：开发者自己定义的属性数据属性：用于存放数据的属性

jQuery获取与设置原生属性：获取： jQuery对象.prop(属性名) => 属性值设置： jQuery对象.prop(属性名, 属性值)

jQuery获取与设置自定义属性：(可以去操作原生属性) 获取： jQuery对象.attr(属性名) => 属性值设置： jQuery对象.attr(属性名, 属性值)

jQuery介绍和使用