jQuery之基础核心
作者的热门手记
-
jQuery之基础核心（demo)
本文主要简单的介绍下jQuery一些基础核心，大致了解jQuery使用模式。适用于有HTML、CSS、javascript基础，又刚刚接触jQuery的初学者。（如有错误，请指正）
咱们从基础语法说起,
基础语法是：$(selector).action()
- 美元符号$定义jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
-
jQuery 的 action() 执行对元素的操作
$是什么？在jQuery程序中，基本上都是以“$”开头的，那么这个$到底是什么呢？调试一下就知道
console.log(typeof $); //function实际上来说，一般后面带()都是函数，如
test();是不是应该之前就有定义过这个函数
function test(){ //... }现在是不是就知道$是一个函数，那么也就是说$就是jQuery封装的一个函数。
由于$本身就是jQuery的缩写，也就是说$和jQuery是等价的。如：console.log($===jQuery); //true那么其实也可以用jQuery开头。
强大的jQuery选择器接下来我们来了解一下selector，一直以来，jQuery强大的选择器使其广受青睐。jQuery选择器大致分为基本选择器、属性选择器、表单选择器、位置选择器、过滤选择器、用于结果集的选择器。
- 基本选择器（仿CSS选择器，基本上能写CSS选择器，jQuery的基本选择器也掌握差不多）
$(*) //获取所有元素
$('#div1') //获取ID名为div1的元素
...- 属性选择器（根据页面元素属性来获取）
$("[href]") //获取所有带有 href 属性的元素 $("[href='#']") //所有 href 属性的值等于 "#" 的元素 ...- 表单选择器(根据表单type值来获取）
$(":password") // 获取type="password" 的 <input> 元素 $(":button") //获取type="button" 的 <input> 元素 ... - 位置选择器（根据页面元素在页面的位置来获取）
$("ul li:first-child") //获取所以ul中第一个子元素li $("ul li:last-child") // 获取所以ul中最后一个子元素li ... - 过滤选择器（通过特定的过滤规则来筛选出所需的 元素）
$(":empty") //获取无子（元素）节点的所有元素 $("p:hidden") //获取所有隐藏的 <p> 元素 ... - 用于结果集的选择器（通过jQuery方法传参来筛选所需的元素）
$('div').has('span'); // 获取包含span元素的div元素 $('div').first(); //获取第1个div元素 ...想了解更多jQuery选择器请查阅jQuery API，这里就不一一列举。
- 表单选择器(根据表单type值来获取）
上文提到$是jQuery封装的函数，那么$()是什么呢？
console.log($()); //Object显而易见，$()是一个对象。$是jQuery封装的函数，那么$()也应该是jQuery对象。
console.log($() instanceof jQuery); //true那么通过jQuery获取一个页面元素，也应该是jQuery对象。如获取页面上id名为p1的元素。
console.log($('#p1') instanceof jQuery); //true在获取到页面元素以后，就可以对其进行某种操作了，也是action。在原生的JS中，我们要对元素进行操作是这样写的：
document.getElementById('p2').innerHTML="Perona";那么在jQuery里面是不是可以这样写的：
$('#p3').html="Perona";//没任何效果没有任何反应，这显然是不对。实际上，在jQuery里，执行操作很少用=，而是通过()传参来执行，前面提到凡是带()基本上就是一个函数，那么也就是说jQuery源码中应该有html()这个函数。那么现在我们试着传参来看看:
$('#p3').html('佩罗娜');程序运行成功。这就是方法函数化。
取值与赋值操作网页元素，最常见的需求是取值和赋值。
有趣的是，jQuery使用同一个函数，来完成取值（getter）和赋值（setter）。到底是取值还是赋值，由函数的参数决定。
如：
alert($('#div1').html()); //html()没有参数，表示取值
$('#div2').html("爱慕课");//html()有参数，表示赋值需要注意的是，如果结果包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（text()例外，它将取出所有元素的text内容）。
alert($('li').html());//当一组元素的时候，取值是一组中的第一个
$('li').html('佩罗娜');//当一组元素的时候,赋值是一组中的所有元素
alert($('li').text());前面提到$(selector)是jQuery对象，那么$(selector).action()执行完返回的又是什么呢？咱们调试一下：
console.log($('#div3').css('color', 'red'));//object
console.log($('#div3').css('color', 'red') instanceof jQuery);//true返回的是object，还是一个对象。这是为什么呢？其实在执行action()操作的时候，我们得先获取元素对象后才可以调用action()。如果缺乏元素对象，代码就会报错，也就是说$().css('color', 'red');这种写法是错误的。我们得先获取元素对象，返回对象才可以调用action()。那么，也就是说，这个对象还是个jQuery对象。既然还是jQuery对象，那么是不是还可以接着调用action()，答案是肯定的。
console.log($('#div3').css('color', 'red').html('imooc'));//object
console.log($('#div3').css('color', 'red').html('imooc')instanceof jQuery);//true这也正是jQuery的魅力之一，采用了链式写法，可以连续调用action()，大大简化代码。根据基本的语法采用链式写法，便衍生出这样的$(selector).action()…action()
如下面代码：
$('#div3').css('color', 'gold');
$('#div3').html('么么哒');采用链式写法
$('#div4').css('color', 'gold').html('么么哒');接下来咱们说说jQuery与原生JS的关系，首先知道jQuery 是一个 JavaScript 库，它在语法上是遵循原生JS的语法，也就是说jQuery与原生JS是可以共存的。但是两者之间并不能混用，不能在jQuery对象里调用JS的事件或方法，同样也不能在JS对象里调用jQuery的事件或方法。
js的写法
document.getElementById('btn1').onclick=(function(){
alert('么么哒');
});jq的写法
$('#btn2').click(function(){
alert('慕女神');
});错误的写法如：
在原生JS里调用jQuery的事件
document.getElementById('btn3').click(function(){
alert('慕女神');
});在jQuery里调用原生JS的事件
$('#btn4').onclick=(function(){
alert('么么哒');
});正所谓“知其然知其所以然”，想要更好的学习掌握jQuery,不妨去看看源码。推荐去看看Aaron艾伦的jQuery源码解析。