参考网站:http://www.runoob.com/jquery/jquery-tutorial.html
1、jQuery基础
- 什么是jQuery
jQuery是一个javascript库,jQuery极大的简化了JavaScript编程,并且jQuery很容易学习。
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
$(document)是一个选择器,选中的是整个html所有元素的集合。
jQuery的功能
1.HTML 元素选取
2.HTML 元素操作
3.CSS 操作
4.HTML 事件函数
5.JavaScript 特效和动画
6.HTML DOM 遍历和修改
7.AJAX
8.UtilitiesjQuery的语法
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法:$(selector).action()
1.$美元符号表示jQuery
2.选择符(selector)"查询"和"查找" HTML 元素
3.action() 执行对元素的操作(比如action可以是hide)$(document).ready(function(){ // 开始写 jQuery 代码... });
我们的实例中的所有 jQuery 函数位于一个 document ready 函数中,这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。2、jQuery选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
- 元素选择器
元素选择器基于HTML DOM元素进行选取元素,元素种类参考http://www.runoob.com/html/html-elements.html.
例如,如下代码选取的就是button元素和P元素:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
- id选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。$("#test").hide();
- class选择器
jQuery 类选择器可以通过指定的 class 查找元素,。
<p class="test">这是一个段落。</p>
$(".test").hide();
3、jQuery 事件
jQuery 是为事件处理特别设计的。
什么是事件:页面对不同访问者的响应叫做事件。
常见事件有:
- 鼠标事件
- 键盘事件
- 表单事件
- 文档/窗口事件
如下是一个鼠标点击事件:
$(this).hide();
});
3、jQuery 效果
- 隐藏显示:
$("p").hide();
$("p").show();
$("p").toggle();//切换 hide() 和 show()
- 淡入淡出:
$("#div1").fadeIn();//淡入
$("#div1").fadeOut();//淡出
$("#div1").fadeToggle();淡入淡出切换
$("#div1").fadeTo("slow",0.15); //淡出到一定程度,不完全消失
- 滑动效果:
$("#panel").slideDown();//滑出
$("#panel").slideUp();//滑入
$("#panel").slideToggle();//划入划出切换
- 动画效果:
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
停止动画: $("#panel").stop();
具体用法参考:http://www.runoob.com/jquery/jquery-animate.html
- 回调函数:
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
hide中的function就是回调函数,会在段落完全隐藏之后,弹出alert警告框。
jQuery - 链(Chaining)
通过 jQuery,可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)。
例如:$("#p1").css("color","red").slideUp(2000).slideDown(2000);
3、jQuery HTML
jQuery 拥有可操作 HTML 元素和属性的强大方法。
jQuery获取内容、值、属性
$("#test").text();//获取文本
$("#test").html();//获取HTML
$("#test").val();//获取元素中的值
$("#runoob").attr("href")//获取元素中的属性
jQuery设置内容、值、属性
$("#test1").text("Hello world!");//设置文本
$("#test2").html("<b>Hello world!</b>");//设置HTML
$("#test3").val("RUNOOB");//设置元素中的值
$("#runoob").attr("href","http://www.runoob.com/jquery");//设置元素中的属性
说明:有需要的话,都可添加回调函数。jQuery添加元素
$("p").append(" <b>追加文本</b>。");//往段落后追加文本
$("p").prepend("<b>在开头追加文本</b>。 ");//往段落前追加文本
$("body").append(txt1,txt2,txt3);//一次性追加多个文本
$("img").before("<b>之前</b>");//元素之前插入内容(可插入多个内容)
$("img").after("<i>之后</i>");//元素之后插入内容
jQuery删除元素
$("#div1").remove();//jQuery remove() 方法删除被选元素及其子元素。
$("#div1").empty();//jQuery empty() 方法删除被选元素的子元素。
$("p").remove(".italic");//移除所有 class="italic" 的 p 元素
jQuery操作class属性
$("h1,h2,p").addClass("blue");//添加class属性
$("h1,h2,p").removeClass("blue");//删除class属性
$("h1,h2,p").toggleClass("blue");//增加/删除class属性
- jQuery css()方法
$("p").css("background-color");//获取元素的css属性background
$("p").css("background-color","yellow");//设置css属性
$("p").css({"background-color":"yellow","font-size":"200%"});//设置多个css属性
jQuery尺寸处理
$("#div1").width()//元素的宽度性
$("#div1").innerWidth();//宽度,包含内边距
$("#div1").outerWidth();//宽度,包含内边距和边框
3、jQuery遍历
什么是遍历,遍历就是根据某一个元素,来查找和它相关的其他元素。以某项选择开始,并沿着这个选择移动,直到抵达你期望的元素为止。
遍历祖先
$("span").parent();//选择直接父元素
$("span").parents("ul");//向上遍历,选择所有祖先
$("span").parentsUntil("div");//返回给定元素之间的所有祖先
遍历后代
$("div").children();//返回每个 <div> 元素的所有直接子元素
$("div").children("p.1");//类名为 "1" 的所有 <p> 元素
$("div").find("span");//返回属于 <div> 后代的所有 <span> 元素
$("div").find("*");//返回 <div> 的所有后代
水平遍历
$("h2").siblings();//返回 <h2> 的所有同胞元素
$("h2").siblings("p");//返回属于 <h2> 的同胞元素的所有 <p> 元素
$("h2").next();//返回 <h2> 的下一个同胞元素
$("h2").nextAll();//返回 <h2> 的所有跟随的同胞元素
$("h2").nextUntil("h6");//返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
遍历过滤
$("div p").first();//选取首个 <div> 元素内部的第一个 <p> 元素
$("div p").last();选择最后一个 <div> 元素中的最后一个 <p> 元素
$("p").eq(1);//下面的例子选取第二个 <p> 元素,索引从0开始
$("p").filter(".url");//返回带有类名 "url" 的所有 <p> 元素
$("h2").nextUntil("h6");//返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
$("p").not(".url");//返回不带有类名 "url" 的所有 <p> 元素
4、jQuery Ajax
什么是AJAX, AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
jQuery与AJAX的关系:通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
load方法
语法:$(selector).load(URL,data,callback);
callback参数:
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象实例:
$("#div1").load("demo_test.txt");//把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素
$("#div1").load("demo_test.txt #p1");//把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("外部内容加载成功!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); });
- get方法
语法:$.get(URL,callback);
实例:
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
- 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);
});