jQuery简介

什么是jQuery

jQuery是js的一个函数库,其中的代码也就是普通的js,不是新的东西！！

write less,do more 写的更少，做的更多

为啥要使用jQuery

释放自己的记忆用更简介的方法替代原生dom接口

document.getElementById()  -> $('选择器')

积累丰富的插件库,极大简化了JavaScript的开发
兼容性低版本的浏览器,同时兼容移动端(适配)
版本升级到了3.x 2.x 更适用于移动端 pc 1.x 1.11.3
jQuery是前端发展的必经之路 $

zepto 轻量级的jQuery

祛除了兼容移动端的代码
一部分的方式实现与jQuery不相同
部分公司会自行封装zepto

学习jQuery注意点

jQuery只是一个辅助工具,不能替代js,在一些项目中可能二者并存
学会使用，学会中心思想
按需学习
学会查文档 api

jQuery使用

引入jQuery库引入一个js文件
官网：jquery.com
中文：jquery123.com
cdn官网中查找jquery 1.xx
版本
压缩 compress 减少服务器的请求压力
未压缩版：uncompress 开发过程中使用

使用

$() 从jquery中抛到全局window中的函数等同于jQuery函数

$() 执行后会返回一个jquery对象去调用jquery上的方法

$ === jQuery // true

参数的类型

css中的选择器

.
div
div>li
[type=’text’]

原生dom节点

$(div) ->jquery对象

null undefined “” 容错机制
jquery中独有选择器

:first ：第一个
:last ：最后一个
:odd ：ul>li 得到的jquery对象中的下标为奇数li
:even ：ul>li 得到的jquery对象中的下标为偶数li
:eq() :筛选出jquery对象与下标与参数一致的元素

两个参数
选择器
context:父级选择器
函数

函数中的代码会等到文档解析完成后执行,等同于触发DOMContentLoaded事件

script>
        $(function fn() {
            // 文档解析完成后 再执行函数中的代码
        })
        $(document).ready(function () {
            // 文档解析完成后 再执行函数中的代码
        })
        // 文档解析完成      DOMContentLoaded js唯一一个大写   10遍
        //   onload     complete：状态
        // window.onDOMContentLoaded = fn;
        window.addEventListener('DOMContentLoaded', fn);
        // onload 和 $(document).ready的区别?
        // 1. onload是在资源下载完成后触发,document.ready是在文档解析完成后触发
        // 2. onload是原生js中的监听事件 document.ready是jquery中的方法
    </script>

jq对象与原生节点的转换，获取与不同

<script>
        // 获取：原生
        var odiv = document.getElementsByTagName('div')[0];
        // div.innerHTML = '宋涛';
        // 获取：jQuery
        var jdiv = $('div');  // 返回一个对象  不是原生的dom节点  jquery对象 可以调用jquery原型上的所有的方法
        // div.html('songtao');
        // jquery对象能不能调用原生js的方法  不ok
        // jdiv.innerHTML = '宋涛'
        // 原生div能不能调用jquery上面的方法  报错
        // odiv.html('songtao')
        // 用jquery对象->调用js方法  转换为原生dom
        // jdiv[0].innerHTML = 'songjiangtao';
        // 原生dom节点  -> jq方法  原生转换为jq    参数之一  原生的dom节点
        $(odiv).html('songjiangtao');
    </script>

通过下标将jq对象转换成了原生节点

jq与原生的不同

jquery实例方法会对jquery对象进行遍历
参数容错不会阻塞代码执行

主要特征

循环操作：循环获取到的对象进行操作
链式调用：操作完成后返回被操作的对象
选择元素：强大的选择器

jquery基础