您的位置：首页 > Web前端 > JQuery

jQuery是一个JavaScript库极大的简化JavaScript编程

2016-07-19 13:08 573 查看

jQuery是一个JavaScript库极大的简化JavaScript编程

1.jQuery 库包含以下特性：

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

2.页面中添加jQuery库

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
//提示：您是否很疑惑为什么我们没有在 <script> 标签中使用 type="text/javascript" ？
//在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

3.jQuery语法

基础语法是：$(selector).action()
美元符号$定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
$(this).hide(); //演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
$("#test").hide(); //演示 jQuery hide() 函数，隐藏 id="test" 的元素。
$("p").hide(); //演示 jQuery hide() 函数，隐藏所有 <p> 元素。
$(".test").hide(); //演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。
//这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
$(document).ready(function(){
--- jQuery functions go here ----
});
//如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
试图隐藏一个不存在的元素
获得未完全加载的图像的大小

4.jQuery 选择器

//在 HTML DOM 术语中：
//选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。例如
$(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");

更多的选择器实例


语法	描述
$(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” 的元素

5.jQuery事件

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

jQuery 名称冲突

var jq=jQuery.noConflict()

,帮助您使用自己的名称（比如 jq）来代替 $ 符号。

结论
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
1. 把所有 jQuery 代码置于事件处理函数中
2. 把所有事件处理函数置于文档就绪事件处理器中
3. 把 jQuery 代码置于单独的 .js 文件中
4. 如果存在名称冲突，则重命名 jQuery 库

jQuery 事件


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

6.jQuery 效果 - 隐藏和显示

$(selector).hide(speed,callback);//隐藏
$(selector).show(speed,callback);//显示
$(selector).toggle(speed,callback);//切换显示和隐藏
//selector被操作元素
//可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
//可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

7.jQuery 效果 - 淡入淡出

$(selector).fadeIn(speed,callback);//淡入
$(selector).fadeOut(speed,callback);//淡出
$(selector).fadeToggle(speed,callback);//淡入淡出互相切换
$(selector).fadeTo(speed,opacity,callback);//允许渐变为给定的不透明度
//selector被操作元素
//可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
//可选的 callback 参数是 fading 完成后所执行的函数名称。
//fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
###8.jQuery 效果 - 滑动
```HTML
$(selector).slideDown(speed,callback);//下滑
$(selector).slideUp(speed,callback);//上滑
$(selector).slideToggle(speed,callback);//切换上下滑
//selector被操作元素
//可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
//可选的 callback 参数是滑动完成后所执行的函数名称。

<div class="se-preview-section-delimiter"></div>

9.jQuery 效果 - 动画

$(selector).animate({params},speed,callback);
//必需的 params 参数定义形成动画的 CSS 属性。
//可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
//可选的 callback 参数是动画完成后所执行的函数名称。
$("div").animate({
left:'250px',
opacity:'0.5',
height:'+=150px',//（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=
width:'toggle' //动画值设置为 "show"、"hide" 或 "toggle"
});
//animate() 方法几乎可以用来操作所有 CSS 属性,不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
//同时，色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。
/*===实例1.隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能===*/
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
//jQuery 停止动画所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
$(selector).stop(stopAll,goToEnd);
//可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
//可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
//因此，默认地，stop() 会清除在被选元素上指定的当前动画。

<div class="se-preview-section-delimiter"></div>

10.jQuery - Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);//jQuery 会抛掉多余的空格，并按照一行长代码来执行上面的代码行

<div class="se-preview-section-delimiter"></div>

11.jQuery - 获得内容和属性

三个简单实用的用于 DOM 操作的 jQuery 方法：获得内容 - text()、html() 以及 val()
1. text() - 设置或返回所选元素的文本内容
2. html() - 设置或返回所选元素的内容（包括 HTML 标记）
3. val() - 设置或返回表单字段的值
4. attr() - 设置或获取属性值
//获取值
$("#btn1").click(function(){
let a = $("#test1").text();
});
$("#btn2").click(function(){
let a = $("#test2").html();
});
$("#btn3").click(function(){
let a = $("#test3").val();
});
$("button").click(function(){
alert($("#w3s").attr("href"));//获得链接中 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"//允许您同时设置多个属性。
});
});

<div class="se-preview-section-delimiter"></div>

jQuery 参考手册 - 文档操作

jQuery 参考手册 - 属性操作

jQuery 参考手册 - CSS 操作

12.jQuery - 添加元素

我们将学习用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

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

<div class="se-preview-section-delimiter"></div>

13.jQuery - 删除元素

如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
$("#div1").remove();
$("#div1").empty();
$("p").remove(".italic");//过滤被删除的元素:删除 class="italic" 的所有 <p> 元素

<div class="se-preview-section-delimiter"></div>

14.jQuery - 获取并设置 CSS 类

//jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
//1. addClass() - 向被选元素添加一个或多个类
//2. removeClass() - 从被选元素删除一个或多个类
//3. toggleClass() - 对被选元素进行添加/删除类的切换操作
//4. css() - 设置或返回样式属性
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
$("button").click(function(){
$("#div1").addClass("important blue");
});
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});

<div class="se-preview-section-delimiter"></div>

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

//获取方法  css("propertyname");
$("p").css("background-color");//获取背景色  如rgb(255, 0, 0)
//设置方法 css("propertyname","value");
//设置多个css({"propertyname":"value","propertyname":"value",...});
$("p").css("background-color");//设置

<div class="se-preview-section-delimiter"></div>

###16.jQuery - 尺寸

<div class="se-preview-section-delimiter"></div>

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

width()//方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height()//方法设置或返回元素的高度（不包括内边距、边框或外边距）。

innerWidth()//方法返回元素的宽度（包括内边距）。

innerHeight()//方法返回元素的高度（包括内边距）。

outerWidth()//方法返回元素的宽度（包括内边距和边框）。

outerHeight()//方法返回元素的高度（包括内边距和边框）。

获取宽高

(“#div1”).innerWidth()(document).height()//返回文档（HTML 文档）

(window).width()//窗口（浏览器视口）的宽度和高度设置宽高(“button”).click(function(){

$(“#div1”).width(500).height(500);

});

<div class="se-preview-section-delimiter"></div>

###16.[jQuery 参考手册 - 遍历](http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp)

<div class="se-preview-section-delimiter"></div>

####16.1jQuery 遍历 - 祖先-向上遍历 DOM 树

<div class="se-preview-section-delimiter"></div>

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

parent()//方法返回被选元素的直接父元素

parents()//方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。

parentsUntil()//方法返回介于两个给定元素之间的所有祖先元素。

应用:

(document).ready(function()$(“span”).parent().css(“color”:”red”,”border”:”2pxsolidred”););(document).ready(function(){

(“span”).parents();(“span”).parents(“ul”);//使用可选参数来过滤对祖先元素的搜索

});

(document).ready(function(){(“span”).parentsUntil(“div”);//返回介于与
元素之间的所有祖先元素

});

<div class="se-preview-section-delimiter"></div>

####16.2jQuery 遍历 - 后代-向下遍历 DOM 树

<div class="se-preview-section-delimiter"></div>

下面是两个用于向下遍历 DOM 树的 jQuery 方法：

children()//方法返回被选元素的所有直接子元素

find()//方法返回被选元素的后代元素，一路向下直到最后一个后代

实例

(document).ready(function(){(“div”).children();

$(“div”).children(“p.1”);//可选参数来过滤对子元素的搜索类名为 “1” 的所有
元素，并且它们是
的直接子元素

});

(document).ready(function(){(“div”).find(“span”);//返回属于后代的所有元素

$(“div”).find(“*”);//返回的所有后代

});

<div class="se-preview-section-delimiter"></div>

####16.3jQuery 遍历 - 同胞 - 水平遍历

<div class="se-preview-section-delimiter"></div>

siblings()//方法返回被选元素的所有同胞元素

next()//方法返回被选元素的下一个同胞元素

nextAll()//方法返回被选元素的所有跟随的同胞元素

nextUntil()//方法返回介于两个给定参数之间的所有跟随的同胞元素。

prev()//相反方向

prevAll()//相反方向

prevUntil()//相反方向

实例

(document).ready(function(){(“h2”).siblings();

(“h2”).siblings(“p”);//可选参数来过滤对同胞元素的搜索(“h2”).next();

(“h2”).nextAll();(“h2”).nextUntil(“h6”);//返回介于

与

元素之间的所有同胞元素

});

<div class="se-preview-section-delimiter"></div>

####16.4jQuery 遍历 - 过滤

<div class="se-preview-section-delimiter"></div>

first()//首个元素

last()//最后一个元素

eq()//带有指定索引号的元素,首个元素的索引号是 0 而不是 1

filter()//允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回

not()//方法返回不匹配标准的所有元素

实例

(document).ready(function(){(“div p”).first();//选取首个
元素内部的第一个元素

$(“div p”).last();//选择最后一个
元素中的最后一个元素

$(“p”).eq(1);//选取第二个
元素（索引号 1）

$(“p”).filter(“.intro”);//返回带有类名 “intro” 的所有
元素

$(“p”).not(“.intro”);//返回不带有类名 “intro” 的所有
元素

});

<div class="se-preview-section-delimiter"></div>

###17.jQuery - AJAX

<div class="se-preview-section-delimiter"></div>

####17.1jQuery - AJAX load() 方法

<div class="se-preview-section-delimiter"></div>

语法

$(selector).load(URL,data,callback);//load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

//1. 必需的 URL 参数规定您希望加载的 URL。

//2. 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

//3. 可选的 callback 参数是 load() 方法完成后所执行的函数名称。

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

responseTxt - 包含调用成功时的结果内容

statusTXT - 包含调用的状态

xhr - 包含 XMLHttpRequest 对象

实例

“demo_test.txt”的内容:

jQuery and AJAX is FUN!!!

This is some text in a paragraph.

$(“#div1”).load(“demo_test.txt”);//到指定的
元素中

$(“#div1”).load(“demo_test.txt #p1”);//把 “demo_test.txt” 文件中 id=”p1” 的元素的内容，加载到指定的元素中

(“button”).click(function(){(“#div1”).load(“demo_test.txt”,function(responseTxt,statusTxt,xhr){

if(statusTxt==”success”)

alert(“外部内容加载成功！”);

if(statusTxt==”error”)

alert(“Error: “+xhr.status+”: “+xhr.statusText);

});

});

<div class="se-preview-section-delimiter"></div>

####17.2jQuery - AJAX get() 和 post() 方法

<div class="se-preview-section-delimiter"></div>

GET - 从指定的资源请求数据

.get(URL,callback);POST−向指定的资源提交要处理的数据.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

实例

(“button”).click(function()$.get(“demotest.asp”,function(data,status)alert(“Data:”+data+“\nStatus:”+status);););(“button”).click(function(){

$.post(“demo_test_post.asp”,

{

name:”Donald Duck”,

city:”Duckburg”

},

function(data,status){

alert(“Data: ” + data + “\nStatus: ” + status);

});

});

“`

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航