2019-07-26 JQueary


jQuery 简介

jQuery 极大地简化了 JavaScript 编程。

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

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性:

•HTML 元素选取

•HTML 元素操作

•CSS 操作

•HTML 事件函数

•JavaScript 特效和动画

•HTML DOM 遍历和修改

•AJAX

•Utilities

[if !supportLists]Ø [endif]jQuery 语法

通过jQuery,您可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions)。

1.jQuery语法实例

$(this).hide()

演示jQuery hide() 函数,隐藏当前的 HTML 元素。

$("#test").hide()

演示jQuery hide() 函数,隐藏 id="test" 的元素。

$("p").hide()

演示jQuery hide() 函数,隐藏所有

元素。

$(".test").hide()

演示jQuery hide() 函数,隐藏所有 class="test" 的元素。

2.jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。

基础语法是:$(selector).action()

•美元符号定义 jQuery

•选择符(selector)“查询”和“查找” HTML 元素

•jQuery 的 action() 执行对元素的操作

示例

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

我们的实例中的所有jQuery 函数位于一个 document ready 函数中:

$(document).ready(function(){

--- jQuery functions go here ----


});

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

[if !supportLists]Ø [endif]jQuery 选择器

选择器允许您对元素组或单个元素进行操作。

1.jQuery 选择器

在前面的章节中,我们展示了一些有关如何选取HTML 元素的实例。

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

选择器允许您对HTML 元素组或单个元素进行操作。

在HTML DOM 术语中:

选择器允许您对DOM 元素组或单个 DOM 节点进行操作。

2.jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

3.jQuery 属性选择器

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

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

4.jQuery CSS 选择器

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

下面的例子把所有p 元素的背景颜色更改为红色:

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

jQuery 事件

jQuery 是为事件处理特别设计的。

1.jQuery 事件函数

jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。

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

  $("button").click(function(){

    $("p").hide();

  });

在上面的例子中,当按钮的点击事件被触发时会调用一个函数:

$("button").click(function() {..some code... } )

该方法隐藏所有

元素:

$("p").hide();

2.单独文件中的函数

如果您的网站包含许多页面,并且您希望您的jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。

<head>

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

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

</head>

3.jQuery名称冲突

jQuery 使用 $ 符号作为jQuery 的简介方式。

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

jQuery 使用名为 noConflict() 的方法来解决该问题。

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

由于jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:

把所有jQuery 代码置于事件处理函数中

把所有事件处理函数置于文档就绪事件处理器中

把jQuery 代码置于单独的 .js 文件中

如果存在名称冲突,则重命名jQuery 库

$(document).ready(function)将函数绑定到文档的就绪事件(当文档完成加载时)

$(selector).click(function)触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function)触发或将函数绑定到被选元素的双击事件

$(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件

[if !supportLists]Ø [endif]jQuery - 获得内容和属性

jQuery 拥有可操作 HTML 元素和属性的强大方法。

jQuery DOM 操作

jQuery 中非常重要的部分,就是操作 DOM 的能力。

提示:DOM = Document Object Model(文档对象模型)

DOM 定义访问 HTML 和 XML 文档的标准:

三个简单实用的用于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"));

});

[if !supportLists]Ø [endif]jQuery - 设置内容和属性

设置内容- text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容:

•text() - 设置或返回所选元素的文本内容

•html() - 设置或返回所选元素的内容(包括 HTML 标记)

•val() - 设置或返回表单字段的值

下面的例子演示如何通过text()、html() 以及 val() 方法来设置内容:

$("#btn1").click(function(){

  $("#test1").text("Hello world!");

});

$("#btn2").click(function(){

  $("#test2").html("<b>Hello world!</b>");

});

$("#btn3").click(function(){

  $("#test3").val("Dolly Duck");

});

text()、html() 以及 val() 的回调函数

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

设置属性- attr()

jQuery attr() 方法也用于设置/改变属性值。

attr() 方法也允许您同时设置多个属性。

下面的例子演示如何同时设置href 和 title 属性:

$("button").click(function(){

  $("#w3s").attr({

    "href" : "http://www.w3school.com.cn/jquery",

    "title" : "W3School jQuery Tutorial"

  });

});

attr() 的回调函数

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

[if !supportLists]Ø [endif]jQuery - 添加元素

通过jQuery,可以很容易地添加新元素/内容。

我们将学习用于添加新内容的四个jQuery 方法:

•append() - 在被选元素的结尾插入内容

•prepend() - 在被选元素的开头插入内容

•after() - 在被选元素之后插入内容

•before() - 在被选元素之前插入内容

jQuery append() 方法

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

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

jQuery prepend() 方法

jQuery prepend() 方法在被选元素的开头插入内容。

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

通过append() 和 prepend() 方法添加若干新元素

append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。

在下面的例子中,我们创建若干个新元素。这些元素可以通过text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中(对 prepend() 同样有效):

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);         // 追加新元素

}

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

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

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

通过after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中,我们创建若干新元素。这些元素可以通过text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中(对 before() 同样有效):

function afterText()

var txt1="<b>I </b>";                    // 以 HTML 创建新元素

var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建新元素

var txt3=document.createElement("big");  // 通过 DOM 创建新元素

txt3.innerHTML="jQuery!";

$("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素

[if !supportLists]Ø [endif]jQuery - 删除元素

通过jQuery,可以很容易地删除已有的 HTML 元素。

如需删除元素和内容,一般可使用以下两个jQuery 方法:

•remove() - 删除被选元素(及其子元素)

•empty() - 从被选元素中删除子元素

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

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

过滤被删除的元素

jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。

该参数可以是任何jQuery 选择器的语法。

下面的例子删除class="italic" 的所有

元素:

$("p").remove(".italic");

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容

  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 649评论 0 3
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,095评论 0 3
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,325评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,162评论 0 1
  • jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。 下载 j...
    垃圾桶边的狗阅读 2,201评论 0 5