jQuery笔记

1） $ 符号作为 jQuery 的简介方式

某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号

var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号

2）jQuery事件

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

 

 

 

 

 

 

3）效果

1.显示/隐藏

jQuery hide() 和 show()

$("#hide").click(function(){
  $("p").hide();
});

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

jQuery toggle()

$("button").click(function(){
  $("p").toggle();
});

语法：

$(selector).toggle(speed,callback);

2.淡入/淡出

jQuery Fading 方法     fadeIn()/fadeOut()/fadeToggle()/fadeTo()

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

语法：

$(selector).fadeIn(speed,callback);

3.向上滑动/向下滑动

jQuery slideUp() 和 slideDown()

$("#hide").click(function(){
  $("p").slideUp();
});

语法：

$(selector).slideUp(speed,callback);

$(selector).slideDown(speed,callback);

jQuery slideToggle()

$("button").click(function(){
  $("p").slideToggle();
});

语法：

$(selector).slideToggle(speed,callback);

4.jQuery 动画 - animate() 方法

$("button").click(function(){
  $("div").animate({left:'250px'});
});

语法：

$(selector).animate({params},speed,callback);

提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等。

5.停止动画/效果，在它们完成前

jQuery stop()

$("#hide").click(function(){
  $("panel").stop();
});

语法：

$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

4） jQuery获得内容和属性

1.获得/设置内容 - text()、html() 以及 val()

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

2.获取/设置属性 - attr()

jQuery attr() 方法用于获取属性值。

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

3.添加新元素/内容

jQuery attr() 方法用于获取属性值。

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容  

4.删除新元素/内容

jQuery remove()方法删除被选元素及其子元素

jQuery empty()方法删除被选元素的子元素

remove()方法也可接收一个参数，允许对被删元素进行过滤

该参数可以是任何class='italic'的所有<p>元素

例如：$('p').remove('.italic');