jQuery是js的封装库，它的核心理念是“wirte less，do more”。
- jquery入口函数
$(document).ready(function(){ //dom加载完成后才能执行dom操作
// 开始写 jQuery 代码...
});
//简写
$(function(){
// 开始写 jQuery 代码...
});
//var jq = $.noConflict();
//jq(".class").text();
$.noConflict();
jQuery(".class").text();
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
- 选择器
语法 描述
$("*") 选取所有元素
$(this) 选取当前 HTML 元素
$("p.intro") 选取 class 为 intro 的 <p> 元素
$("p:first") 选取第一个 <p> 元素
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素
$("[href]") 选取带有 href 属性的元素
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素 在线实例
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even") 选取偶数位置的 <tr> 元素
$("tr:odd") 选取奇数位置的 <tr> 元素
- 事件
鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick（双击） keydown change resize
mouseenter(鼠标穿过元素) keyup focus scroll
mouseleave（离开） blur unload
事件处理
on()//选择元素上绑定一个或多个事件
off()//在选择元素上移除一个或多个事件
one()//为每一个匹配元素的特定事件（像click）绑定一个一次性的事件
trigger()//触发事件
- 效果函数
hide(1000/"slow"/"fast")//隐藏元素
show()//显示
toggle()//hide和show进行切换
fadeIn()//淡入
fadeOut()//淡出
fadeToggle()
fadeTo("slow",0.7)//渐变为给定的不透明度
slideDown() //向下滑出元素
slideUp() //向上
slideToggle()
text()//设置或返回
html()
val()//值value
attr()
append() //在被选元素的结尾插入内容(元素内)
appendTo() //在被选元素的开头插入内容(元素内)
prepend() // 在被选元素的开头插入内容（元素内）
prependTo() // 在被选元素的结尾插入内容（元素内）
after() // 在被选元素之后插入内容（元素外）
before() // 在被选元素之前插入内容（元素外）
remove() // 删除被选元素（及其子元素）
//$("p").remove(".test");//删除class=test的p元素
//△：过滤器中条件只能作用于同级，不能作用于子元素。
// $("#div1").remove(".part");//不能删除div1内class=part的子元素
empty() //从被选元素中删除子元素
animate()//动画
/*
$("div").animate({left:'250px',opacity:'0.5'},'slow');
△必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left
*/
stop() //停止动画，如fadeIn()等都可以
△Callback回调函数
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
addClass() //向被选元素添加一个或多个类
removeClass() // 从被选元素删除一个或多个类
toggleClass() // 对被选元素进行添加/删除类的切换操作
css() // 设置或返回样式属性
$("p").css({"background-color":"yellow","font-size":"200%"});
width()//设置或返回元素的宽度（不包括内填充、边框或外边距）
height()
innerWidth()//返回元素的宽度（包括内填充）
innerHeight()
outerWidth()//返回元素的宽度（包括内填充和边框）
outerHeight()
//遍历
parent() //返回被选元素的直接父元素。
parents("ul") //返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
parentsUntil()//返回介于两个给定元素之间的所有祖先元素
$("span").parentsUntil("div");//不包括div
children()//返回被选元素的所有直接子元素
find()//返回被选元素的后代元素，一路向下直到最后一个后代
$("div").find("*");//所有后代
siblings()//返回被选元素的所有同胞元素
next()//返回被选元素的下一个同胞元素
nextAll()//返回被选元素的所有跟随的同胞元素
nextUntil()//返回介于两个给定参数之间的所有跟随的同胞元素
prev()//前一个同胞元素
prevAll()//
prevUntil()//
//过滤，优先级是从里到外 ，从前到后
$("p").filter(".url");
$("p").eq(1);
$("div p").first();
$("div p").last();
$("p").not(".url");
load() //方法从服务器加载数据，并把返回的数据放入被选元素中
$(selector).load(URL,data,callback);
$("#div1").load("demo_test.txt");
get()
post()// 通过 HTTP GET 或 POST 请求从服务器请求数据
- 链(Chaining)
可以把动作/方法链接在一起，例：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
<!--"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动-->
- jquery中的html
document.getElementById("temp").innerHTML="AAA"; //√
$("#temp").innerHTML="AAA"; //×
//不能显示，因为document.getElementById("temp") 获得的是dom对象,所有 对象都有innerHTML
//$("#temp")获得的是jquery对象,无innerHTML
可以这样使用：
$("#temp").html("aaa");
or
$("#temp")[0].innerHTML="aaa";
- jquery中的 height(),width(),outerwidth(),innerwidth()
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($("#div1").height());
alert($("#div1").outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding
alert($(window).innerheight());//返回高度+padding
- preventDefault()
preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交，点击超链接进行跳转等）
$("a").click(function(event){
event.preventDefault();
});
- stopPropagation()
stopPropagation() 方法阻止冒泡事件的发生
$("a").click(function(event){
event.stopPropagation();
});
扫一扫
1213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
