首页 > 行业动态 > 正文

jQuery入门
2017-02-23 14:18:25   来源:   评论:0 点击:

jquery的历史官网:www jquery com看见logo和slogan(口号):写更少的代码,做更多的事情。官网的自我介绍:jQuery is a fast, small,

jquery的历史

官网:www.jquery.com
看见logo和slogan(口号):
写更少的代码,做更多的事情。
 
官网的自我介绍:
jQuery is a fast, small, and feature-rich JavaScript library.
jQuery是一个快速、小巧的、特点众多的JavaScript库。
 
It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
它用自己非常方便的跨浏览器API,使得诸如文档遍历、文档操作、事件监听、动画、和Ajax变得更简单。
 
With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
通过把多用途和高拓展性结合起来,jQuery改变了无数程序员书写JavaScript程序的方式。
 
说说jQuery的版本问题:
jQuery的最新版本是3.1.0,不兼容IE6、7、8的。
我们学习的是jQuery1.12.3,兼容IE6、7、8的,更符合中国的实际情况。
jQuery3和jQuery1.12.3的API完全一样,我们在HTML5的课程上,也要介绍高版本jQuery。
 
 
 
  jQuery创始人 John Resig
 
最早发布于2006年1月,十年磨一剑,现在的jQuery非常剑了。
 
工作中用不用jQuery:即使不用jQuery,也是在用类似的东西。比如公司自己开发库。100%的其他库都会模仿jQuery的语法。
 
jQuery的哲学是什么简化DOM开发,为兼容而生!
 
jQuery简化了我们对DOM的开发,所以我们就有更多的精力,着眼于业务的书写。所以,从jQuery课程开始,我们要练习写业务!写鲁棒可靠的业务!代码量就要多起来了!
 

引包和使用

jQuery是一个库,所以所有jQuery的语法都必须先引包,然后使用jQuery。
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   //这里书写你的jQuery程序
</script>
 
这条语句看着简单,特别容易写错

<script type="text/javascript" src="js/jquery-1.12.3.min.js">
    //错误的把jQuery写到了这里,是无效的!!引包语句和自己的程序不能合二为一!
</script>
 
一定要注意,script不是单标签:

<script type="text/javascript" src="" />
 
注意看控制台,一旦你的程序明明引包了,但是没有生效,赶紧看控制台
 
$ is not defined, 表示你试图使用$()函数,但是没有引包。

$()函数

jQuery对象

jQuery是我们引用了一个包,事实上,这个包只向全局作用域提供了一个$()函数。
这是jQuery设计上一个特别好的地方,jQuery不污染全局变量。至于更多的全局变量的知识,我们等到面向对象的时候再说。
 
所以,任何的jQuery语句都必须以$()函数开始,这个函数的功能是根据你的参数(CSS选择器)返回jQuery对象。

$("#box").css("background-color","red");
 
$()是一个函数,返回了一个所谓的“jQuery对象”的东西,后续的打点比如.css()、.animate()等等都是jQuery对象的能力。
 
一定要注意,jQuery对象只能调用自己的方法,不能调用原生JS的语句。反过来说,原生JS的对象,不能使用jQuery对象的方法。
 
下面的语句是错误的:

$("#box").innerHTML = "哈哈";
这是因为$("#box")返回了jQuery对象,而jQuery对象是不能打点调用原生JS的属性和方法的。
 
而应该使用jQuery自己的方法:

$("#box").html("哈哈");
 
反过来,原生JS也不能使用jQuery的方法:

var box = document.getElementById("box");
box.css("background-color","red");   //这里试图给原生JS对象调用jQuery的方法
而是应该老老实实写你原来的语句:
var box = document.getElementById("box");
box.style.backgroundColor = "red";
 
问题是没有没有方法能够把jQuery对象变为原生对象,有没有方法把原生对象变为jQuery对象呢?面试常考!
 
jQuery对象 →→→→ 原生对象
非常简单只需要在$()函数后面加上[]索引就可以了:

$("p")[0].innerHTML = "哈哈";
$("p")[1].innerHTML = "哈哈";
$("p")[2].innerHTML = "哈哈";
为什么能这样呢?因为jQuery对象是一个类数组对象,属性0、1、2、3……里面放置的都是原生对象。




原生对象 →→→→ jQuery对象
$()一下就行了:

var obox = document.getElementById("box");
$(obox).animate({"left":1000},2000);
 
 
特别的,我们现在学一下.length属性,可以知道这个jQuery对象中存放了多少原生对象。简单的说,就是得到了多少元素。等价于.size()方法。

var geshu = $("p").length;  //length属性就表示选择了多少个p
alert(geshu);
等价于:
var geshu = $("p").size();  //size()方法就是length属性,一个功能,表示选择了多少个p
alert(geshu);

选择器

$()函数就是jQuery的最大卖点,可以方便的通过CSS选择器来选择元素。一定记住加引号!因为它接收string类型的字符串。
 
$()函数支持所有的CSS2.1选择器

$("p")   标签选择器
$("#box")  id选择器
$(".haha")  类选择器
$("div ul li a.haha")  后代选择器
$("div.haha")  交集选择器
$("div,p")   并集选择器(分组选择器)
$("*")  通配符选择器


注意,eq可以单独提炼出方法
$("p").eq(5).css();
等价于
$("p:eq(5)").css();
 
好处就是可以用变量表示这个数字了。
 
事实上,jQuery再用正则表达式分析你的字符串,比如你给他一个 

$("#box ul li:first");
实际上底层在通过正则式分析、解析,变为原生JS的语句,getElementById等等。
 
特别的,eq可以提炼出方法

var a = 3;
// 特别的,eq可以提炼出方法
$("p").eq(a).animate({"width":1000},1000);
// 比这样写好:
$("p:eq(" + a + ")").animate({"width":1000},1000);
表格的隔行变色:
$("tr:even").css("background-color","pink");
eq的使用我们后面有专题“序与对应”详细讲解,有一个整体大排队的问题。

jQuery()函数

最最开始的jQuery版本,提供的是jQuery()函数,后来网友建议用更简单的函数名,所以改名为了$()。
但是现在的版本,也保留了jQuery()函数,和$()是一个函数。

jQuery("p")
等价于
$("p")
 
至此我们就已经学习完毕怎么选择元素了,换句话说学习了怎么得到jQuery对象了。



更多精彩内容敬请关注爱创课堂培训 官方网站:http://www.icketang.com/














相关热词搜索:jQuery入门

上一篇:jQuery的基本方法
下一篇:node js异步IO机制

分享到: 收藏