//jQuery的优点 :
1 轻量级
2 强大的选择器
3 出色的DOM操作的封装
4 可靠的事件处理机制
5 完善的Ajax
6 不污染顶级变量
7 出色的浏览器兼容性
8 链式操作方式
9 隐式迭代
10 行为曾与结构层的分离
11 丰富的插件支持
12 完善的文档
13 开源
<script src="https://www.jb51.net/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对象
//创建元素 :