一.给JQuery Selector赋值的变量名通常以‘$’符号开头,如:
var $p = $('p');
二.Compound Selector
可以一次选择多个文档对象模型来构造jQuery对象,如:$('p, li').fadeTo('slow', 0);
选择了所有的<p>标签和<li>标签。
三.slideToggle()函数,滑动展开和收起动画效果,接受一个字符串表示的速度参数,如:$('.panel').slideToggle('slow');
四.动态添加HTML标签
1.创建一个完整的jQuery对象,如:var $p = $("<p>I'm a new paragraph!</p>");
2.调用相应函数,添加标签:
(1)append():添加该标签作为最后一个子节点,如:
$(".info").append("<p>Stuff!</p>");
表示在class属性值为info的标签中添加一个<p>子节点,且为最后一个子节点。
(2).prepend():添加该标签作为第一个子节点,如:$(".info").prepend("<p>Stuff!</p>");
(3).appendTo()函数效果和append()函数类似,只是改变了调用顺序,如:
$('<p>Stuff!</p>').appendTo('.info');
同理有prependTo()函数。
五.before()函数和after()函数,表示在一个已有标签的前面或后面插入新标签,如:$('target').after('<tag>To add</tag>');
六.删除标签
(1)empty()函数:删除标签内的所有内容,包括子标签的,不删除标签本身;(2)remove()函数:删除内容的同时删除标签本身。
七.编辑标签的class属性值,调用addClass()或removeClass()方法,如:
$('selector').addClass('className');
$('selector').removeClass('className');
还可以调用toggleClass()方法,该方法检测该标签是否具有参数指定的class属性值,如果有
则删除该值,如果没有则添加该值。
八.修改标签的宽高,调用height()和width()函数,如:
$("div").height("100px");
$("div").width("50px");
九.css()函数简介
该函数接收两个参数,第一个参数指定要修改的属性,第二个参数指定要改成的属性值,如:$("div").css("background-color","#008800");
表示将背景色改为"#008800"。
十.获取用户输入值,调用val()函数,如:
var input = $('input[name=checkListItem]').val();
补充HTML知识:使用<form>标签获取用户输入,如:
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
十一.添加鼠标点击监听事件,调用click()事件处理者(Event Handler),如:
$('#button').click(function(){
});
十二.移除添加的标签:
不能使用:$('.item').click(function() {
$(this).remove();
});
因为jQuery在文档加载完成后就开始寻找class属性值为item的标签,此时还没有动态添加,所以它会认定
没有该属性的标签存在,所以函数执行会失败。
可以使用on()事件处理者,简介如下:
$(document).on('event', 'selector', function() {
Do something!
});
在这里,事件(event)可以是鼠标点击,鼠标进入,鼠标移出等,selector为事件要作用的标签,function就是
事件发生时调用的函数。十二.鼠标双击监听:dblclick();
十三.鼠标悬停监听:hover();
注:该事件处理者可以接受两个回调函数,两个函数之间用逗号隔开,如:
$('div').hover(
function(){
$(this).addClass('highlight');
},
function(){
$(this).removeClass('highlight');
}
);
第一个函数当鼠标悬停是调用,第二个函数当鼠标移开时调用。