JQuery学习笔记

来源：互联网发布：淘宝哪家文具店好编辑：程序博客网时间：2024/06/02 03:36

一、简介：

Jquery是一个java script库，其作用主要是：

1.操作和选取html元素

2.操作呢CSS

3.Html事件函数

4.Java script 特效、动画

5.Html DOM遍历和修改

6.AJAX

7.Utilities

二、 JQuery语法

2.1语法示例

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

$(“p”).hide(); 隐藏<p>元素

$(“#test”).hide(); 隐藏id为test的元素

$(“.test”).hide(); 隐藏类名为test的元素

2.2 基础语法

$(selector).action();

美元符号 $ 定义JQuery

Selector指被‘选择’或‘查询’的html元素

Action()执行对元素的操作

提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

2.3文档就绪函数

$(document).ready(function(){

});

注意：之所以使用ready();是为了防止在文档尚未准备就绪的某些元素还没加载或为完全加载的情况下就操作元素，导致操作失败。

三、 JQuery选择器

JQuery元素选择器和属性选择器允许通过标签名、属性名和元素内容对元素进行操作，允许对元素组或单个元素进行操作，在HTML的DOM术语中允许对HTML DOM元素组或DOM的单个节点进行操作。

3.1 元素选择器

$(“p”).hide();   选取<p>元素$(“p#test”).hide(); 选取id = test的<p>元素$(“p.test”).hide(); 选取class = test的<p>元素

3.2 属性选择器

$(“[href]”)         选取带有href属性的元素$(“[href=’#’]”) 选取href值等于 # 的元素$(“[href!=’#’]”) 选取href值不等于 # 的元素$(“[href$=’.jpg’]”) 选取href值以.jpg结尾的元素

3.3 CSS选择器

用于改变html CSS的属性

$(“p”).CSS(“background-color”,” red”); 将所有<p>元素的背景颜色改为红色

四、 JQuery事件：

jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。通常会把 jQuery 代码放到<head>部分的事件处理方法中：

示例：

<script>$(“p”).on(“click”,function(){//当点击<p>元素时触发click()函数，会调用hide()方法$(this).hide();});</script>

注意：在JQuery中使用$会与其他java script库冲突，例如：prototype

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

var jq =jQuery.noConflict(); 这样就可以用jq代替$符号了。

五、 JQuery效果：

5.1 jQuery隐藏

示例：

<script>$(document).ready(function(){$(“.hide”).click(function(){//点击class = hide的button时隐藏当前button的父容器$(this).parents(“.ex”).hide(slow);});});<body><div class=”ex”><button class=”hide”><p>联系人：张先生<br/>北三环中路 100 号<br />北京</p></div><div class=”ex”><button class=”hide”><p>联系人：张先生<br/>北三环中路 100 号<br />北京</p></div></body>

5.2 jQuery 显示

示例：

<script>$(“p”).show();</script>

5.3 jQuery toggle 显示&隐藏切换

toggle()方法可以显示已隐藏的指定元素，并且将显示的元素隐藏.

示例：

<script>$(“p”).toggle();//将已隐藏的<p>元素显示，并将显示的<p>元素隐藏。</script>

5.4 jQuery 淡入浅出

Speed可以设置”slow”、”fast”以及毫秒数。

fadeIn(speed,callback);fadeOut(speed,callback);fadeToggle(speed,callback);//在fadeIn()与fadeOut()之间切换fadeTo(speed,opacity,callback);//可以设置速度和透明度

示例：

<script>$(“p”).fadeIn(“slow”);</script>

5.5 jQuery 滑动

Speed可以设置”slow”、”fast”以及毫秒数。

slideDown(speed,callback);//将隐藏的元素以下拉的形式展现

slideUp(speed,callback);//将显示的元素以上推得形式隐藏

slideToggle(speed,callback);//在slideDown()与slideUp()之间切换

5.6 jQuery 动画

animate();

示例：

<script>$(“#test”).click(function(){$(this).animate({ left:'250px',height:'+=150px',width:'+=150px'//使用相对值只用在值前面添加+=号。，也可以使用预定义值show，hide，toggle。});});</script>

提示：默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。

示例：(使用队列功能)

<script>$(“#test”).click(function(){var div = $(“#test”);//动画将会按照队列顺序逐步完成div.animate({left:”100px”});div.animate({top:”100px”});div.animate({left:”0px”});div.animate({top:”100px”});});</script>

5.7 jQuery 停止动画

stop()用于在动画或效果完成前对他们进行停止

示例：

<script>$(“#test”).stop();</script>

5.8 jQuery callback函数

Callback函数可以用于在动画效果完成后再执行的方法

示例：

//在执行隐藏操作后再执行下一个方法

<script>$(“#test”).hide(“slow” , function(){<!--要执行的操作-->});</script>

六、 JQuery DOM操作------获得内容和属性：

DOM = Document Object Model

6.1 jQuery 的.text() .html() .val()

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

.html() 设置或返回所选元素的内容，（包括html标记）

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

示例：

<script>$(“#btn01”).click(function(){alert(“test”+$(“#test”).text(););});$(“#btn02”).click(function(){alert(“test”+$(“#test”).html(););});$(“#btn03”).click(function(){alert(“test”+$(“#test”).val(););}); </script><body><p>这是元素内的<em>文本</em>内容</p><button btn=”btn01”>测试text()</button>//显示结果：这是元素内的文本内容<button id=”btn02”>测试html()</button>//显示结果：这是元素内的<em>文本</em>内容<form method=”post” action=”test.asp”><label for=”#test”>输入文本</label><input type=”text” name=”test”><button id=”btn03”>获得输入框内容</button></label></form></body>

6.2 jQuery 获取属性.attr()

.attr() 获取元素中选定属性的值

示例：

<script>$(“#btn”).click(function(){$(“#yhcloud”).attr(“href”);});</script><body><button id=”btn”>测试attr()</button><a href=”www.yihuacomputer.com” id=”yhcloud”>yihuacomputer.com</a></body>

6.3 jQuery 设置属性.text() .html() .val() .attr()

示例：.attr设置多个属性{“href” : ”....”, “id” : ”....”}

<script>$(“#btn04”).click(function(){$(“#yhcloud”).attr(“href”,”http://www.baidu.com”);//将href值设置为http://www.baidu.com});$(“#btn01”).click(function(){$(“#test”).text(“测试text()设置”);});$(“#btn02”).click(function(){$(“#test”).html(“<p>测试html()设置</p>”);});$(“#btn03”).click(function(){$(“#test”).val(“测试val()设置”);}); </script><body><p>这是元素内的<em>文本</em>内容</p><button btn=”btn01”>测试text()</button><button id=”btn02”>设置html()</button><form method=”post”action=”test.asp”><label for=”#test”>输入文本</label><input type=”text” name=”test”><button id=”btn03”>设置输入框内容</button></label></form><button id=”btn04”>测试attr()</button><a href=”www.yihuacomputer.com” id=”yhcloud”>yihuacomputer.com</a></body>

6.3 jQuery .text() .html() .val() .attr()的回调函数

.attr() 获取元素中选定属性的值回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

示例：

<script>$("#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 +")";  });}); $("button").click(function(){ $("#w3s").attr("href", function(i,origValue){    return origValue +"/jquery";  });});</script>

七、 JQuery添加：

7.1 jQuery添加新内容的四个 jQuery 方法：

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

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

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

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

示例：

<script>$("p").append("Some appended text.");</script>

八、 JQuery删除：

8.1 jQuery添加新内容的两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）jQueryremove()方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何jQuery选择器的语法。

示例：

<script>$("p").remove();//不带参$("p").remove(".italic");//带参</script>

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

示例：

<script>$("p").empty();</script>

九、 JQuery添加并设置CSS：

9.1 jQuery添加并设置CSS jQuery 方法：

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

示例：

<style>.important{font-weight : bold ; font-size : xx-large ;}.blue{color : blue ;}</style><script>$(“p,h1,h2”).addClass(“blue important”);//向选定元素中添加blue类和  important类$("p").css("background-color");//返回首个匹配的<p>元素的background-color值$("p").css("background-color","red");//设置所有<p>元素的background-color值$("p").css({background-color:"red",Font-size:"12px"});//批量设置所有<p>元素         的CSS</script>

十、 JQuery添加并设置CSS：

10.1 jQuery添加并设置CSS jQuery 方法：

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

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

示例：

//设置指定的 <div>元素的宽度和高度：

$("button").click(function(){ $("#div1").width(500).height(500);});

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

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

outerWidth() 方法返回元素的宽度（包括内边距和边框），如果括号内的值为true，则返回元素的宽度（包括内边距，边框和外边距）。

outerHeight() 方法返回元素的高度（包括内边距和边框），如果括号内的值为true，则返回元素的宽度（包括内边距，边框和外边距）。

十一、 JQuery遍历：

11.1 parent() 返回选定元素的直接父类

示例：

$(document).ready(function(){ $("span").parent();});

11.2 parents() 返回选定元素的所有父类

示例：

$(document).ready(function(){$("span").parents();$("span").parents(“ul”);//返回选定元素的所有是<ul>的父类元素});

11.3 parentsUtil()返回介于给定的两个元素之间的所有父类

示例：

$(document).ready(function(){ $("span").parentsUtil(“div”);});

11.4 child()返回给定的元素的所有直接子类

示例：

$(document).ready(function(){  $("div").child();  $("div").child(“p.1”);//返回<div>下类名为1且类型是<p>的直接子元素});

11.5 find()返回给定的元素的所有直接子类

示例：

$(document).ready(function(){$("div").find(“span”);//返回<div>下所有的<span>元素$("div").find("*");//返回<div>下所有的子元素 });

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

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

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

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

prev()

prevAll()

prevUntil()

注意：prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

十二、 JQuery遍历：

12.1 三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

示例：

$(document).ready(function(){ $("div.p").first();//选取<div>里面的第一个<p>元素 $("div.p").last();//选取<div>里面的最后一个<p>元素  $(“p”).eq(1);//选取索引从0-1的<p>元素});

十三、 JQuery AJAX：

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

语法：

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

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

statusTXT - 包含调用的状态

xhr - 包含XMLHttpRequest 对象

示例：

$("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);  });});

解析：点击button时调用load()方法向id = div1的元素中导入demo_test.txt中的文本,，导入结束或者失败后执行回调函数，如果成功，则弹出内容为“外部内容加载成功！”的对话框，如果失败则弹出内容为Error: "+xhr.status+": "+xhr.statusText的对话框

十四、 JQuery Get/Post

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

POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

14.1 $.get() 方法

语法：

$.get(URL,callback);

示例：

$("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);  });});

14.2 $.Post()方法

语法：

$.post(URL , data , callback);

示例：

$("button").click(function(){ $.post("demo_test_post.asp",  {    name:"DonaldDuck",    city:"Duckburg"  },  function(data,status){    alert("Data: " +data + "\nStatus: " + status);  });});

0 0