JQuery基本使用_H5之家 - 中国HTML5教程资源分享第一站

说明:例子没有具体的元素，对jQuery有基本理解再看会比较好，总结还算全面。

jQuery使用前提，需要安装jQuery库

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：

1.<script src="jquery-1.10.2.min.js"></script>

2.jQuery使用的代替方案可以再别的网页服务器上去引用jQuery

基本示例：

$(document).ready(function(){

$(".div1").click(function(){(".div2").slideDown("slow");});

});

jQuery的几种选择(选择器)

$(this) 当前

$(“p”) p标签所有

$(“p.test”) p标签中class=test的所有

$(“.test”) 把所有class=test的标签都做改变，不管他是什么标签

$(“#test”) p标签中 id = test 的所有 css样式改变会是全部，但是取值什么的，只能选取第一个标签的元素

$(“p:first”) p标签的第一个元素

$(“ul li:first”) 选取ul标签中第一个li元素

$(“ul li:first-child”) 选取每个ul标签中第一个li元素

$(“[href]”) 选取带有href属性的元素

$(“a[target=’_balnk’]”) 选取所有 target 属性值等于 "_blank" 的 <a> 元素

$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素

$(":button") 选取所有 type="button" 的 <input> 元素和 <button> 元素

$("tr:even")选取偶数位置的 <tr> 元素

$("tr:odd")选取奇数位置的 <tr> 元素

Jquery中的事件:

鼠标事件

键盘事件

表单事件

文档/窗口事件

Click鼠标点击

keypress

submit

load

Dblclick鼠标双击

keydown

change

resize

Mouseenter鼠标移到元素

keyup

focus 获得焦点

scroll

Mouseleave鼠标离开元素

Blur失去焦点

unload

hover()鼠标悬停,上移/离开

文档就绪事件 $(document).ready();

****文档就绪时间后面是没有{}的

Jquery效果： $(selector).hide(speed,callback); speed 速度，callback回调

1.jQuery中的隐藏与显示

隐藏hide() 显示show() 隐藏和显示的切换toggle()

隐藏的一个实例:

$(document).ready(function(){

$(".ex .hide").click(function(){//ex是div的class hide是button的class的

$(this).parents(".ex").hide("slow");

});

2.淡入淡出

fadeIn()淡入

fadeOut()淡出

fadeToggle()淡入淡出之间的切换

fadeTo(“slow（5000）”,0.5)变换 0.5表示原来的50%

3.滑动

slideDown()向下滑动

slideUp()向上滑动

slideToggle()向上或者向下滑动切换

4.动画

animate();

语法:$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性,并且可以同时操作多个属性，

还可以使用相对值来修改属性 height:'+=150px',width:'+=150px'

Animate使用预定义的值如:hide show toggle

动画的队列功能:

$(document).ready(function(){

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

});});

5.动画的停止stop()

$(“div”).Stop() 停止的是div的东西，但是div中的其他是不包括的，就单纯的停止div

<div>hello world</div> hello world 的改变是不停止改变的

6.举例说明callback回调函数

执行完成后显示，回调:

$(document).ready(function(){

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

$("p").hide("slow",function(){

alert("段落现在被隐藏了");

});});});这里alert将会在执行完毕后弹出对话框。---

---$(document).ready(function(){

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

$("p").hide(1000,***);//这里没有进行函数的回调

alert("现在段落被隐藏了");

});

});//执行时会先弹出警告，然后在执行

7.jQuery链

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

8.jQuery中的捕获

值：

$(元素).text()/html()/value()

获取的元素.出要捕获的值就行

其中value()需要捕获的是文本的值：

$(“#test”).value 显示为hello

属性：#hello id的表示 .hello class的表示

$("#hello").attr("class")); attr(这里是属性比如id,class,href等)

9.jQuery设置同捕获相同，但是设置是把需要改变的写在

$(元素).text(设置内容)/html(设置内容)/value(设置内容)

10.添加元素

append()在所选元素结尾添加元素 prepend()在所选元素开头添加元素

after()在所选元素之后添加 before()在所选元素之前添加

11.删除或清除元素

remove()移除元素 empty()清空元素中的子元素

过滤：$("p").remove(".italic"); remove方法中添加参数，按照css选取规则

12.css类

这其中添加的是css类<style type=”text/css”>.blue{xxx} .red{}</style>

addClass(): $("h1,h2,p").addClass("blue red");多个标签同时添加类,并且可以同时添加很多类

removeClass():移除元素

toggleClass():切换时存在的去掉不存在的添加

css():方法设置或返回被选元素的一个或多个样式属性

$("p").css("background-color") 返回p标签中background-color属性的属性值

设置：

css(”propertyname”(属性),”value”(属性值));

设置多个属性:$("p").css({"background-color":"yellow","font-size":"200%"});

13.尺寸

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

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

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

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

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

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

14.遍历

14.1祖先:

parent()返回所选元素的上一层父类

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

$("span").parents().css({"color":"red","border":"2px solid red"});

$("span").parents("ul").css({"color":"red","border":"2px solid red"});//筛选

parentsUntil()返回子父辈的所有，span=>div之间的所有

$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});

14.2后代：

children() 方法返回被选元素的所有直接子元素。指的就是所选元素的下一代

$("div").children().css({"color":"red","border":"2px solid red"});

$("div").children("p.1").css({"color":"red","border":"2px solid red"});//筛选p.1

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

$("div").find("span").css({"color":"red","border":"2px solid red"});//筛选span的

$("div").find("*").css({"color":"red","border":"2px solid red"});//div下的所有

14.3同胞:(向下筛选)

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

$("h2").siblings().css({"color":"red","border":"2px solid red"});

$("h2").siblings("p").css({"color":"red","border":"2px solid red"});//筛选同名同胞

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

$("h2").next().css({"color":"red","border":"2px solid red"});

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

$("h2").nextAll().css({"color":"red","border":"2px solid red"});h2之后的全部包含

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

$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});

(向下筛选)：prev(), prevAll() & prevUntil()方法同next系列相同

14.4过滤：

.first() 方法返回被选元素的首个元素。

$("div p").first().css("background-color","yellow");

.last() 方法返回被选元素的最后一个元素

$("div p").last().css("background-color","yellow");

.eq() 方法返回被选元素中带有指定索引号的元素

$("p").eq(1).css("background-color","yellow");//需要注意的是索引号是从0开始的

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

$("p").filter(".url").css("background-color","yellow");});

$("p").filter(".url").css("background-color","yellow");//筛选class=”url”

.not() 方法返回不匹配标准的所有元素,not() 方法与 filter() 相反。

$("p").not(".url").css("background-color","yellow");//筛选class不是url的

15.jQuery AJAX=>load:

语法：$(selector).load(URL,data,callback);

$("#div1").load("/try/ajax/demo_test.txt");//加载指定文件的全部内容

$("#div1").load("/try/ajax/demo_test.txt #p1");//加载文件中的某个元素的元素内容

函数回调的使用:

$("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){

if(statusTxt=="success")

alert("外部内容加载成功!");

if(statusTxt=="error")

alert("Error: "+xhr.status+": "+xhr.statusText);//函数回调的内容

17.jQuery AJAX=>get/post

$.get() 方法通过 HTTP GET 请求从服务器上请求数据

语法:$.get(URL,callback);

$.get("/try/ajax/demo_test.php",

function(data,status){alert("数据: " + data + "\n状态: " + status);});

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法:$.post(URL,data,callback);

$.post("/try/ajax/demo_test_post.php",

{name:"菜鸟教程",url:"http://www.runoob.com"},

function(data,status){alert("数据: \n" + data + "\n状态: " + status);});

18.jQuery noConflict()方法：

解决相同页面的jQuery和其他框架的简写符号冲突问题

$.noConflict();//当添加此方法之后$就不在是jQuery所使用的的，需要在jQuery中把$替换成jQuery()

jQuery(document).ready(function(){

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

jQuery("p").text("jQuery 仍然在工作!");

});});//如果不定义$.noConflict();方法则依然可以使用$符号

爱编程-编程爱好者经验分享平台