//jQuery的优点 :
1 轻量级
2 强大的选择器
3 出色的DOM操作的封装
4 可靠的事件处理机制
5 完善的Ajax
6 不污染顶级变量
7 出色的浏览器兼容性
8 链式操作方式
9 隐式迭代
10 行为曾与结构层的分离
11 丰富的插件支持
12 完善的文档
13 开源
<script src="jquery.js" type="text/javascript">这里不许放任何代码</script>
$("#foo")和 jQuery("#foo")是等价的
$.ajax 和 jQuery.ajax 是等价的 $符号是jQuery的简写形式
// window.onload : $(function(){ })
$(function(){ }) 就相当于 js 中的window.onload事件一样,是在页面加载完成后,立刻执行的 只有这个和window.onload一样
不过window.onload只能写一个 但是$(function(){ })可以写多个
没有简写的时候是 $(document)ready(function(){ })
//链式操作风格 :
$(".level1>a").click(function(){
$(this).addClass("current") //给当前元素添加"current"样式
.next().show(); //下一个元素显示
.parent().siblings()//父元素的同辈元素
.children("a") //子元素<a>
.removeClass("current")//移出"current"样式
.next().hide();//他们的下一个元素隐藏
return false;
})
//jQuery对象转成DOM对象 :
1 jQuery对象是一个类似数组,可以通过[index]的方法得到相应的DOM对象
var $cr = $("#cr");//jQuery对象
var cr = $[0]; //DOM对象
2 另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象
var $cr = $("#cr");//jQuery对象
var cr = $cr.get(0);//DOM对象
//DOM对象转成jQuery对象 :
对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了.
方式为 : $(DOM对象);
var cr = document.getElementById("cr");//DOM对象
var $cr = $(cr); //jQuery对象
//解决冲突 :
1 如果其他JS库和jQuery库发生冲突,我们可以在任何时候调用 : jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库
var $jaovo = jQuery.noConflict();
$jaovo(function(){
$jaovo("p").click(function(){
alert($jaovo(this).text());
});
});
2 可以直接使用"jQuery"来做一些jQuery的工作
jQuery(function(){
jQuery("p".click(function(){
alert(jQuery(this).text());
}));
});
//jQuery选择器
1 基本选择器
基本选择器是jQuery中最常用的选择器,也是最简单的选择器,他通过元素id、class 和 标签名 等来查找DOM元素
//jQuery :
只要获得标签对象 . 就是数组
//jQuery对象获取 :
$("p");//获取所有p标签对象 ---- 获取的对象是数组
$("#aa");//获取id为aa的那个标签的对象 --- 获取的对象是数组
$(".aaa");//获取class为aaa的那个标签的对象 --- 获取的对象是数组
//jQuery对象和DOM对象的转换 :
jQuery的方法和DOM的方法不能互相使用(调用),但是对象可以互相转换
$("p");//是jQuery对象
document.documentElementsTagName("p");//是DOM对象
$(document.documentElementsTagName("p"));//把DOM对象转换成jQuery对象
$("p").get(1);//是一个DOM对象,
get(1);代表p这个数组的第二位,(下标为1 就是第二位)
$($("p").get(1));//是jQuery对象转成
//jQuery对象转成DOM对象 :
1 jQuery对象是一个类似数组,可以通过[index]的方法得到相应的DOM对象
var $cr = $("#cr");//jQuery对象
var cr = $[0]; //DOM对象
2 另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象
var $cr = $("#cr");//jQuery对象
var cr = $cr.get(0);//DOM对象
//DOM对象转成jQuery对象 :
对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了.
方式为 : $(DOM对象);
var cr = document.getElementById("cr");//DOM对象
var $cr = $(cr); //jQuery对象
//创建元素 :
$("<li title='其他'>123</li>");//创建<li>标签 属性为title=其他 内容为123
元素节点(标签名) 属性节点(属性 title='xxx') 文本标签(123)
//text()文本节点 :
text() : 函数/方法,是获得选定标签内部文本(人眼能够看到的内容)
<li>123</li>
var li = $("li").text();//获得了li的文本节点里面的数据(就是 123 这个内容)
//attr()获得属性/设置属性/更改属性 :
<p title="aaa"></p>;
var i = $("p").attr("title");//这是获得p标签里面的title属性的值
$("p").attr("title"," bbb");//把p标签里面的title属性的值 更改为bbb
//removeAttr() 删除指定元素的属性值 :
removeAttr(xx,xx);删除属性值
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
$("p").removeAttr('title',"你最不喜欢的");//就是把p标签里面的title属性的值,(你最不喜欢的)删除
//append()添加元素 :
将匹配到的子元素 添加到指定的父元素中.
函数的链式调用 : 为什么可以链式调用?
是因为前面的函数返回的仍然是调用的那个对象
如下面 a.append(b).append(c) a是个父标签对象,调用函数把b添加进去,并且返回的值,还是a的对象,所以还可以在调用函数,把c也添加进去
//a和b和c 都是标签的对象
var $li_1 = $