1.语法格式：$(selector).action()
selector:要操作的元素 eg:this,#identifer(根据ID取元素),.class（根据类取元素）
action：对元素操作如hide，show之类
$(this).hide()
2.入口函数：
jquery：
$(document).ready(function(){
// 开始写 jQuery 代码...
//文档加载完成之后再执行，避免还没加载完成找不到元素
});
注意和JavaScript 的 window.onload 事件不同的是JavaScript等到所有内容，包括外部图片之类的文件加载完后，才会执行而ready是在
文档的html元素加载完成后就开始执行
3.选择器：
元素选择器：$("p").action() 选择所有p元素
id选择器：$("#identifer") 选择id为identifer的元素
类选择器：$("box") 选择class为box的元素
4.常用事件：
$("div").click(function(){
console.log('点击了div盒子')；
});
$("div").dblclick(function(){
console.log('双击了div盒子')；
});
$("div").mouseenter(function(){
console.log('鼠标滑过了div盒子')；
});
$("div").mouseleave(function(){
console.log('鼠标离开了div盒子')；
});
$("div").mousedown(function(){
console.log('鼠标按下div盒子未离开')；
});
$("div").mouseup(function(){
console.log('鼠标按下div盒子离开了')；
});
$("div").hover( function(){ console.log ("你进入了div 盒子");
},
function(){ console.log("你离开了div盒子!");
});
$("div").focus(function(){
console.log('聚焦在div盒子')；
});
$("div").blur(function(){
console.log('焦点离开div盒子')；
});
5.动作
$("div").hide();//隐藏
$("div").show();//显示
$("div").toggle(); //用来切换hide和show
$("div").fadeIn(); //淡入
$("div").fadeOut();//淡出
$("div").fadeToggle();//用来切换fadeIn和fadeOut
$("#div1").fadeTo("slow",0.15); //淡入淡出添加透明度
$("#div").slideDown() //滑下
$("#div").slideUp()//滑上
$("#div").slideToggle() //滑下滑上切换
$("button").click(function(){ $("div").animate({
height:'150px', //动画
width:'150px' });});
$("button").stop(); //停止动画
jQuery 方法链接
允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条
例如：$("div").css("color","red").slideUp(2000).slideDown(2000);
6.dom属性操作
$("#identfier").text();设置或返回所选元素的文本内容
$("#identfier").html();设置或返回所选元素的内容（包括 HTML 标记）
$("#identfier").val();设置或返回表单字段的值
$("#identfier").attr("href");获取属性
$("#identfier").text("Hello world!"); //设置元素属性的值
$("#identfier").val("Hello");
$("#identfier").attr("href","http://baidu/com");
$("p").append("追加文本");
$("p").prepend("在开头追加文本");
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");
$("#div1").remove();删除被选元素及其子元素。
$("#div1").empty();删除被选元素的子元素。
$("p").remove(".italic");
$("h1,h2,p").addClass("blue"); 添加class
$("h1,h2,p").removeClass("blue"); 移除class
$("h1,h2,p").toggleClass("blue"); 添加和移除切换
$("p").css("background-color","yellow");设置 CSS 属性
$("p").css({"background-color":"yellow","font-size":"200%"});设置多个 CSS 属性
$("#div1").width()； 方法设置或返回元素的宽度（不包括内边距、边框或外边距）
$("#div1").height()；设置或返回元素的高度（不包括内边距、边框或外边距）
$("#div1").innerWidth()； 方法返回元素的宽度（包括内边距）
$("#div1").innerHeight()；innerHeight() 方法返回元素的高度（包括内边距）
$("#div1").outerWidth()；返回元素的宽度（包括内边距和边框）
$("#div1").outerHeight()；返回元素的高度（包括内边距和边框）
7.dom元素操作
$("span").parent()；方法返回被选元素的直接父元素
$("span").parents(); 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
$("span").parentsUntil("div");方法返回介于两个给定元素之间的所有祖先元素
$("div").find("span"); 方法返回被选元素的后代元素，一路向下直到最后一个后代
$("h2").siblings(); 方法返回被选元素的所有同胞元素
$("h2").next(); 方法返回被选元素的下一个同胞元素
$("h2").nextAll();方法返回被选元素的所有跟随的同胞元素
$("h2").nextUntil("h6"); 方法返回介于两个给定参数之间的所有跟随的同胞元素
$("div p").first(); 方法返回被选元素的首个元素
$("div p").last();方法返回被选元素的最后一个元素
$("p").eq(1);方法返回被选元素中带有指定索引号的元素
$("p").filter(".url");方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
$("p").not(".url");方法返回不匹配标准的所有元素
网友评论