jQuery学习

参考网站：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.Utilities
jQuery的语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
1.$美元符号表示jQuery
2.选择符（selector）"查询"和"查找" HTML 元素
3.action() 执行对元素的操作(比如action可以是hide)

   // 开始写 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元素： 
```<script>
$(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);
    });

posted @ 2019-04-02 10:28 Miles_mjy 阅读(119) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部