JQuery笔记_知识点总结

JQuery笔记_知识点总结

---

• val() 取表单元素值

$("#input1").val()

• html() 和 text() 获取元素内容（区别是是否包含子标签）

<div id="d1">
    这是div的内容<span>这是div里的span</span>
</div>

$("#d1").html()

这是div的内容<span>这是div里的span</span>


$("#d1").text()

这是div的内容这是div里的span

• addClass() removeClass() toggleClass() 增加 删除 切换样式class

<style>
.pink{
   background-color:pink;
}
</style>

增加样式 pink
$("#d").addClass("pink");

删除样式 pink
$("#d").removeClass("pink");

切换样式 pink （有就删除，没有就增加）
$("#d").toggleClass("pink");

• css() 增加style样式

$("#d1").css("background-color","pink");
$("#d2").css({"background-color":"pink","color":"green"});

• 选择器

元素名，id，类名选择器
$("div")
$("#d1")
$(".d")

id为d3的div下的span
$("div#d3 span")

第一个div，最后一个div，第5个div
$("div:first")
$("div:last")
$("div").eq(4)

奇数div，偶数div，0为偶数
$("div:odd")
$("div:even")

可见的div，隐藏的div
$("div:visible").hide();
$("div:hidden").show();

有id的div
$("div[id]")

id是否为pink的div
$("div[id='pink']")
$("div[id!='pink']")

id以p开头的div，id以k结尾的div
$("div[id^='p']")
$("div[id$='k']")

id包含ee的div
$("div[id*='ee']")

当前元素（触发事件的元素）
$(this).hide();

最近的父元素，所有父元素，最近的子元素，所有div子元素，同级元素
$("#currentDiv").parent()
$("#currentDiv").parents()
$("#currentDiv").children()
$("#currentDiv").find("div")
$("#currentDiv").siblings()

• attr() 获取或修改元素属性值

<h1 id="h" align="center">居中标题</h1>

获取align属性值：
$("#h").attr("align")
修改align属性值
$("#h").attr("align","right");

• removeAttr() 删除属性， prop() 获取属性值

$("#h").removeAttr("align");
$("#h").prop("align")
$("#c").prop("checked")


注意：
prop()不能获取自定义属性的值。
而attr()只能访问选中属性的初始值，无法获取选中属性(checked,selected)变化以后的值。
prop()获取的选中属性值为布尔类型。

• 效果：

立即显示、隐藏、切换
hide()	show()	toggle()

延时显示、隐藏、切换
hide(1000)	show(1000)	toggle(1000)

上滑隐藏、下滑显示、上下滑动显示切换、延时效果
slideUp()	slideDown()	slideToggle()	slideUp(2000)

淡入、淡出、切换、延时效果、透明度80%
fadeIn()	fadeOut()	fadeToggle()	fadeIn(2000)	fadeTo("slow",0.8)

动画效果，2s内变化至指定样式
animate({left:'100px',height:'50px'},2000)

• 事件

页面加载完毕（不包含图片等非文字媒体文件）
$(document).ready(function(){
    $("#message1").html("页面加载成功");
});
$(function(){
	$("#message1").html("页面加载成功");
})

图片加载完毕
$("#img").load(function(){
	$("#message2").html("图片加载成功");
});

单击双击事件
$("#b").click(function(){})
$("#b").dblclick(function(){})

键盘事件
$("#i").keydown(function(e){});
$("#i").keypress(function(e){});
$("#i").keyup(function(e){});

鼠标按下和弹起
$("#downup").mousedown(function(){});
$("#downup").mouseup(function(){});
鼠标移动，鼠标进入（mouseover经过子元素会调用）
$("#move").mousemove(function(){});
$("#enter").mouseenter(function(){});
$("#over").mouseover(function(){});
鼠标离开（mouseout经过子元素会调用）
$("#leave1").mouseleave(function(){});
$("#out1").mouseout(function(){});

获得和失去焦点，文本内容改变（只有失去焦点时才会被调用）
$("input").focus(function(){});
$("input").blur(function(){});
$("#input1").change(function(){});

表单提交事件
$("#form").submit(function(){});

事件的另一种写法
$("#b").on("click",function(){});
自动触发事件
$("#b").trigger("dblclick");

• Ajax

$('#comment-container').load(
    "/comments", 
    {
    "parentComment.id" : $("[name='parentCommentId']").val(),
	"blog.id" : $("[name='blog.id']").val(),
	"nickname" : $("[name='nickname']").val(),
	"email" : $("[name='email']").val(),
	"content" : $("[name='content']").val()
    }, 
    function(responseTxt, statusTxt, xhr) {
    	clearContent();
    }
);

• JQuery元素和DOM元素的相互转换：

JQuery元素转为DOM元素（通过get(0)或者[0]）：
var div= $("#d");
var d = div[0];


DOM对象转为JQuery对象（通过$()）：
var div= document.getElementById("d");
var d = $(div);

注：DOM对象只能调用DOM的方法或属性，JQuery元素只能调用JQuery的方法或属性，因此就有对象转换的需求。