1.jQuery是一个对js选择性封装的js库,它可以使用很少的代码做好多的事情,一种跨浏览器的库,简化对HTML的操作,对于ajax也有很大的简化。
2.jQuery的优点:
- 少写代码,完成的任务多。
- 免费开源,一个轻量级的js库,容量小。
- 使用简单,在使用的时候只需要加入min的js库就可以了。
- 兼容主流的浏览器。
- 可以处理HTML./JSP/XML/css/Dom等,对于ajax有很好的支持。
- 文档齐全,可以作为很好的查阅。
- 成熟的插件可以选择
- 可以简单的时候多种方式定位标签
- 出错会有提示,在js是没有提示的。
- 它的使用在<script>标签中。
3.开发步骤:
(1)引入第三方js库文件
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
(2)查找Api使用,定位标签
var $div = $("#divID"); var html = $div.html(); alert(html);
4.使用jQuery前后比较
(1)定位标签
//var divElement = document.getElementById("divID"); var $div = $("#divID"); //var html = divElement.innerHTML; var html = $div.html(); alert(html);
(2)获取值
传统
var divv=document.getElementById("divID"); var div=divv.innerHTML; alert(div);
jQuery
var $div=$("#divID");
var i=$div.html();
alert(i);
5.定位标签的三种方法
(1)使用ID
var $div = $("#divID"); var html = $div.html(); alert(html);
(2)使用标签名
var $div = $("div"); var html = $div.html(); alert(html);
(3)使用CSS
$(".myClass")
6.jquery和js的方法
Js对象 JQuery对象
innerHTML html()
value val()
Remove remove()
appendChild append()
js和jQuery各自有各自的Api调用。但是二者的API是可以相互转换的。
7.js规则和Jquery规则,他们是各自调用自己的Api
对于js
js代码规则----divElement var divElement = document.getElementById("divID");
对于jQuery
jQuery代码规则----$div var $div = $("#divID")
8。二者转换
js----->jQuery
语法:$(js对象)---->jQuery对象
例如:$(divElement)---->$div
例如:$(this)---->$this
var inputElement = document.getElementById("inid");//js对象 var $input = $(inputElement);//jquery对象,将js转成jQuery var txt = $input.val(); alert(txt);
jQuery---->js
语法1:jQuery对象[下标,从0开始]
语法2:jQuery对象.get(下标,从0开始)
例如:$div[0]---->divElement
var $div = $("#divid");//jquery对象 var divElement = $div[0];//js对象(方式一) var txt = divElement.innerHTML; alert(txt);
或者
var $div = $("#divID");//jquery对象 var divElement = $div.get(0); var txt = divElement.innerHTML; alert(txt);
总结:
$(js对象)-->jQuery对象
jQuery对象.get(下标,从0开始) 或者 jQuery对象.get[下标,从0开始]