JQuery 新启航 基础

文档就绪函数

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

$(document).ready(function(){

--- jQuery functions go here ----

});

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

语法描述
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的第一个元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

使用js设置css样式

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

jQuery 名称冲突

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

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

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

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

jQuery 事件

下面是 jQuery 中事件方法的一些例子:

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

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法:

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

设置属性 - attr()

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

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

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

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

 删除元素/内容

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

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

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:

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

jQuery 尺寸 方法

jQuery 提供多个处理尺寸的重要方法:

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

jQuery AJAX

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:

  • responseTxt - 包含调用成功时的结果内容
  • statusTXT - 包含调用的状态
  • xhr - 包含 XMLHttpRequest 对象
原文地址:https://www.cnblogs.com/chenyao/p/3010283.html