程序博客网 > 复杂网络 动态画图

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

来源：互联网 发布：复杂网络 动态画图 编辑：程序博客网 时间：2024/05/17 09:40

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);
});
});
“`

0 0
复杂网络 动态画图 复杂网络 动态画图
原创粉丝点击
热门IT博客
淘宝搜索引擎工作流程淘宝搜索引擎工作流程
淘宝收藏量有什么用淘宝收藏量有什么用
java直播系统源码
为了抵御网络黑客攻击
java打印
5轴加工中心软件编程
好的淘宝店铺推荐
淘宝禁止出售保护动物
域名免费注册
视易服务器 mysql
java大量线程wait状态
杭州做数据分析的公司
多功能工具箱软件
java定义枚举型变量
美工和前端的区别
java测试题
误删数据库怎么恢复
工商网络监管论文
js bind有什么用
互联网软件市场推广
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 作业搜题 图片搜题 拍照搜题下载 网上搜题 好用的搜题软件 搜题的软件 搜题的软件有哪些 搜题网页版 搜题软件大学 搜题软件排行榜 数学搜题 查题 拍图搜题 英语搜题软件 英语搜题神器 搜题答案 怎么搜题 如何搜题 搜数学题 会计搜题软件 电大搜题 大学生用的搜题软件 拍照搜题软件下载 搜题网址 搜题大学 作业拍照搜题 搜题解答 能搜题的 快速搜题 xiaoyuansouti 搜索题目答案 查答案 解题吧 答案神器 什么软件可以搜大学题 小袁在线拍照搜题 免费使用拍照搜题 不用下载马上拍照搜题 搜魂 了不起的修仙模拟器搜魂大法 搜鸽网

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里