jQuery简介
jQuery设计宗旨是“Write Less,Do More”，就是说用更少的代码，做更多的事情。
jQuery项目主要由 jQuery Core(核心库)、jQuery UI(界面库)、Sizzle(CSS选择器) 和 QUnit(测试套件) 四部分组成。
jQuery的特性：
jQuery为频繁的DOM操作，针对浏览器兼容性提供了解决方案，并封装了更为简约的API；
支持链式操作，让JS代码书写更优雅；
jQuery将与之相关的方法和属性，都封装在jQuery对象中，避免造成全局变量污染；
最后不得不提的是jQuery的扩展，即便现在angularJS、vueJS横行的年代，很多时候也不得不借助丰富的jQuery插件；
jQuery相关网址：
jQuery HelloWorld
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>jq hello</title>
</head>
<body>
<!-- 导入jQuery库 -->
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){ console.log('jquery is ready!');
}); </script>
</body></html>$是jQuery的别名，
$()等同于jQuery()。由于jQuery无可避免需要操作DOM文档，所以应该在DOM载入之后再执行jQuery代码。换句话说，所有jQuery相关操作应该再DOM ready事件触发后才进行。
//匹配到document节点后，绑定ready事件（也可简写成以上helloworld的方式）$(document).ready(function(){ //jQuery do something});jQuery对象和DOM对象
很多初学者会在打开一个js文件后，困惑这究竟是JavaScript原生代码还是jQuery代码。是由于没区分JavaScript DOM API和jQuery API的差异，那什么是jQuery对象，什么是DOM对象呢？
区别
DOM(Document Object Model)文档对象模型主要依赖原生JavaScript暴露的接口来访问和操作。比如
getElementByTagName()、getElementById()等内置的方法。而jQuery对象是对DOM对象进行一层包装，更准确的说，jQuery对象将一个或多个DOM对象封装后产生一个新对象。由于jQuery对象和DOM对象存在差异，所以直接用jQuery对象调用DOM对象的方法是错误的，反之亦然。
jQuery对象转DOM对象
上面提到，jQuery对象是包含一个或多个DOM对象的类数组对象。所以直接通过数组下标从jQuery对象获取DOM对象：
//实际上jQuery validate表单验证插件的源码也是这么写的var li = $li[0];
除此之外，还可以通过jQuery对象提供的get方法来获取：
var li = $li.get(0);
DOM对象转jQuery对象
相对来说，DOM对象转成jQuery对象就比较简单了，直接调用jQquery的构造函数即可：
//可以传递单个或多个DOM对象var li = document.getElementByTagName('li');var $li = $(li);jQuery ready()和JavaScript load()事件比较
HTML文档的加载顺序：
解析HTML结构
加载外部javascript脚本和css样式文件
解析并执行javascript脚本
构造HTML DOM模型
加载外部图片等外部文件
页面加载完毕
jQuery.ready()事件是DOM结构绘制完毕就触发，而原生的load()事件要等待所有资源准备好之后才触发。换句话说，如果页面需要加载大量的外部文件时，需要等待很长时间才执行load()方法，而jQuery.ready()则不需等待所有资源加载完毕。另外，
jQuery.ready()事件可以定义多次。
jquery构造函数
jQuery把所有的操作都封装在一个jQuery构造函数中，形成了统一的操作入口，简化了操作门槛。jQuery构造函数主要的调用方式有如下四种：
/***
*
* 方式一：jQuery(expression)
* 参数传入一个表达式的字符串，通过表达式匹配文档的元素，最终会把找到的元素封装成jQuery对象返回。
*/jQuery('#testDiv');/***
*
* 方式二：jQuery(html)
* 参数传入HTML字符串，jQuery将创建一个对应结构的DOM节点的jQuery对象
*/jQuery('<input type="text">');/***
*
* 方式三：jQuery(elements)
* 参数传入一个或多个DOM元素，jQuery将其封装成jQuery对象并返回
*/jQuery('li').css('backgroud-color','#FFF');/***
*
* 方式四：jQuery(fn)
* 传入一个函数，其等价于`$(document).ready()`处理函数
*/$(function(){
$('ul').css('color','red');
});jQuery链式语法
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>jquery 链式操作</title>
<style type="text/css">
.txt{ display: block;
} </style>
</head>
<body>
<span class="txt">我是一段文本内容</span>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
$(function(){ //创建四个按钮
$('<input type="button" value="click me">'+ '<input type="button" value="triggle click">'+ '<input type="button" value="detach handler">'+ '<input type="button" value="show/hide text">').appendTo($('body')); //为第一个按钮绑定click事件
$('input[type="button"]').eq(0).click(function(){
alert('click me!'); //为第二个按钮绑定click事件，触发第一个按钮的点击
}).end().eq(1).click(function(){
$('input[type="button"]:eq(0)').trigger('click'); //为第三个按钮绑定click事件，解除第一个按钮的点击事件
}).end().eq(2).click(function(){
$('input[type="button"]:eq(0)').unbind('click'); //为第四个按钮绑定toggle事件，隐藏或显示文本内容
}).end().eq(3).click(function(){
$('.txt').toggle('slow');
});
}); </script>
</body></html>jQuery提供了
end()、eq()、filter()等方法来进行链式操作。但为了代码的可阅读性，建议同一行调用的方法不超过3个，如果代码过长可考虑换行或者缩进。
jQuery选择器
不可否认，强大的选择器也是jQuery能成为最流行的js框架的原因之一。试想如果jQuery的选择器仍像原生JS
getElementById()那么孱弱，你会在项目中使用jQuery吗？jQuery选择器，实际上就是一个表示特殊语义的字符串，它支持id、tagName、css1~3和xpath表达式。然后调用jquery构造函数将该字符串传入，就能选择DOM对象，封装成jQuery对象。
jquery选择器的过滤和选择
jQuery过滤器按照功能主要分为 选择 和 筛选：
$(':[title]');//等价于 $('*:[title]')
选择功能的选择器则不会有默认的范围。
过滤作用的选择器是从指定条件匹配到的元素中，通过冒号
:来筛选元素，默认情况下，是从所有元素*中进行过滤。
作者：梁同学de自言自语
链接：https://www.jianshu.com/p/0c4d55d48537
共同学习，写下你的评论
评论加载中...
作者其他优质文章
