jQuery

 

简介

jQuery 库可以通过一行简单的标记被添加到网页中。
jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性:
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

向页面添加jquery库

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

注意,<script> 标签应该位于页面的 <head> 部分。

使用微软的jquery,大多数 CDN 都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度。

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>

jquery语法

jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素,jQuery 的 action() 执行对元素的操作。

$(this).hide() 隐藏当前的 HTML 元素。
$("#test").hide() 隐藏 id="test" 的元素。
$("p").hide() 隐藏所有 <p> 元素。
$(".test").hide() 隐藏所有 class="test" 的元素。

文档就绪函数

为了防止文档在完全加载(就绪)之前运行 jQuery 代码。所有 jQuery 函数位于一个 document ready 函数中。

$(document).ready(function(){

--- jQuery functions go here ----

});

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色:

$("p").css("background-color","red");

jquery事件

当按钮的点击事件被触发时会调用一个函数:

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

jquery获取内容

获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法:
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容:

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

下面的例子演示如何通过 jQuery val() 方法获得输入字段的值:

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

获取属性 - attr()

jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值:

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 text() 和 html():

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变(设置)链接中 href 属性的值:

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

attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性:

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

 

attr() 的回调函数

jQuery 方法 attr(),也提供回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 attr() 方法:

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});

jquery添加元素

jQuery append() 方法在被选元素的结尾插入内容。

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

jquery删除元素

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

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

jQuery 操作 CSS


jQuery 拥有若干进行 CSS 操作的方法。
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

jQuery addClass() 方法

下面的例子展示如何向不同的元素添加 class 属性。当然,在添加类时,您也可以选取多个元素:

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

也可以在 addClass() 方法中规定多个类:

$("button").click(function(){
  $("#div1").addClass("important blue");
});

jQuery removeClass() 方法

下面的例子演示如何不同的元素中删除指定的 class 属性:

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

jQuery toggleClass() 方法

下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作:

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

jQuery css() 方法


css() 方法设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性
如需返回指定的 CSS 属性的值,请使用如下语法:

css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值:

$("p").css("background-color");

设置 CSS 属性

如需设置指定的 CSS 属性,请使用如下语法:

css("propertyname","value");

下面的例子将为所有匹配元素设置 background-color 值:
$("p").css("background-color","yellow");


设置多个 CSS 属性

如需设置多个 CSS 属性,请使用如下语法:

css({"propertyname":"value","propertyname":"value",...});

下面的例子将为所有匹配元素设置 background-color 和 font-size:

$("p").css({"background-color":"yellow","font-size":"200%"});

 

posted @ 2018-07-18 17:58  quartzite  阅读(195)  评论(0编辑  收藏  举报