JavaScript&&jQuery_j&& jquery-优快云博客

一.给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');
   }
);

第一个函数当鼠标悬停是调用，第二个函数当鼠标移开时调用。

JavaScript&&jQuery