简要解析jQuery的用法知识点

jQuery语法

一、语法实例(演示hide函数)

$(this).hide（）：隐藏当前的HTML元素
$("#test").hide（）：隐藏id=“test"的元素
$(“p”).hide（）：隐藏所有p标签元素
$(”.test").hide（）：隐藏class=“test"元素”

• $：美元符号定义jQuery
• ()：查询和查找的HTML元素
• .hide():对元素的操作

二、文档就绪函数

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

• 试图隐藏一个不存在的元素
• 获得未完全加载的图像的大小

三、jQuery选择器

1、元素选择器

• $(“p”)选取p元素
• $(“p.intro”)选取所有class="intro"的p元素
• $(“p#demo”)选取所有id=”demo“的p元素

2、属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。

• $("[href]") 选取所有带有 href 属性的元素。
• $("[href=’#’]") 选取所有带有 href 值等于 “#” 的元素。
• $("[href!=’#’]") 选取所有带有 href 值不等于 “#” 的元素。
• $([href $=’.jpg’]") 选取所有 href 值以 “.jpg” 结尾的元素。

3、css选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

• $(“p”).css(“background-color”,“red”);

四、jQuery事件

通常会把 jQuery 代码放到 部分的事件处理方法中：

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>

$(document).ready(function)：将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)：触发或将函数绑定到被选元素的点击事件

五、jQuery效果-淡入淡出

• .fadeIn(speed,callback):淡入
  speed:可以是"slow",“fast”,毫秒

• .fadeOut(speed,callback)：淡出
  可选的 callback 参数是 fading 完成后所执行的函数名称。

• fadeToggle(speed,callback)：在前两种方法之间切换淡入淡出效果
  如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
  如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

• fadeTo(speed,opacity,callback)：
  必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
  fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
  可选的 callback 参数是该函数完成后所执行的函数名称。

六、jQuery滑动

• .slideDown(speed,callback)：向下滑动元素
• .slideUp(speed,callback)：向上滑动元素
• .slideToggle(speed,callback)：在向上滑动和向下滑动之间进行切换

七、动画

• .animate({params},speed,callback)
  必需的 params 参数定义形成动画的 CSS 属性。
  可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
  可选的 callback 参数是动画完成后所执行的函数名称。
  animate() 方法来操作所有 CSS 属性（注：必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left）

• 停止动画

• stop(stopAll,goToEnd)：
  stop() 方法用于停止动画或效果，在它们完成之前，适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
  stopAll 参数规定是否应该清除动画队列，默认是 false
  goToEnd 参数规定是否立即完成当前动画，默认是 false

八、jQuery - Chaining

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

把 css(), slideUp(), and slideDown() 链接在一起。“p1” 元素首先会变为红色，然后向上滑动，然后向下滑动

九、获取/设置内容和属性

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值
• attr() - 方法用于获取属性值。

//获取内容和属性
$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});
$("button").click(function(){
  alert($("#w3s").attr("href"));
});
//设置内容或属性
$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});
$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});

十、添加/删除元素

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容
• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

$("p").append("Some appended text.");

$("p").prepend("Some prepended text.");

function appendText()
{
var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
var txt3=document.createElement("p");  // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // 追加新元素
}

$("img").after("Some text after");
$("img").before("Some text before");

$("#div1").remove();

$("#div1").empty();
//过滤参数中包含的元素
$("p").remove(".italic");

十一、获取并设置 CSS 类

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

$("button").click(function(){
  $("h1,h2,p").addClass("blue"，"important");
  $("div").addClass("important");
});

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

• css(“propertyname”)：设置或返回被选元素的一个或多个样式属性

//返回
css("propertyname");
css("propertyname","value");
//设置
$("p").css("background-color","yellow");
css({"propertyname":"value","propertyname":"value",...});

jQuery尺寸方法

• width()：设置或返回元素的宽度（不包括内边距、边框或外边距
• height()：设置或返回元素的高度（不包括内边距、边框或外边距）
• innerWidth()：返回元素的宽度（包括内边距）
• innerHeight()：返回元素的宽度（包括内边距）
• outerWidth()：返回元素的宽度（包括内边距和边框）
• outerHeight()：返回元素的高度（包括内边距和边框）
• outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
• outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。