jQuery笔记一

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

语法1jQuery对象[下标,从0开始]

语法2jQuery对象.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开始]

原文地址:https://www.cnblogs.com/kw28188151/p/8290530.html