JQuery基本学习

JQuery

一、选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

基本：

1. 元素选择器

   在页面中选取所有

   元素，得到的是JS的Object对象:

   $("p");
   

2. id选择器

   获取页面中id为text的元素，得到的是JS的Object对象：

   $("#text");
   

3. 类选择器

   获取页面中class为myClass的元素，得到的是JS的Object对象：

   $(".myClass");
   

层级：

1. 获取父标签下的所有后代元素

   获取表单中所有的后代input元素：

   $("form input");
   

2. 获取父标签下匹配所有的子元素

   获取表单中所有input子元素：

   $("form>input");
   

3. 获取所有紧接在 prev 元素后的 next 元素

   获取所有跟在label后面的input标签：

   $("label+input");
   

顺序：

1. :first，:last

   // 选取第一个 
    元素的第一个 
    元素
   $("ul>li:first");
   // 选取第一个 
    元素的最后一个 
    元素
   $("ul>li:last");
   

2. :even，:odd

   // 选取偶数位置的li元素
   $("ul>li:even");
   // 选取奇数位置的li元素
   $("ul>li:odd");
   

表单：

1. input

   获取所有的input标签：

   $(":input");
   

2. text

   获取所有的text文本框：

   $(":text");
   

3. submit

   获取所有的submit按钮

   $(":submit");
   

4. disabled

   获取所有不可用的input元素

   $("input:disabled");
   

5. checked

   获取所有选中的复选框元素

   $("input:checked")
   

6. selected

   获取所有选中的选项元素

   $("select option:selected");
   

7. not

   获取所有未被选中的input元素

   $("input:not(:checked)");
   

二、对象访问

1. length

   jQuery 对象中元素的个数。

   获取所有图片的数量

   $("img").length;
   

2. each()

   对于每个匹配的元素所要执行的函数，第一个参数为元素的下标，第二个参数为元素对象本身

   $("img").each(function(index,element){
      this.src = "test" + i + ".jpg";
    });
   

3. get(index)

   取得其中一个匹配的元素。 index表示取得第几个匹配的元素。

   $("img").get(0);
   

4. html()

   设置或返回所有匹配元素的html内容。

   无参时表示获取元素的html内容：

   var html = $("p").html();
   

   有参时表示设置元素的文本内容：

    $("p").html("hello world");
   

5. text()

   设置或返回所有匹配元素的文本内容。

   无参时表示获取元素的文本内容：

   var text = $("p").text();
   

   有参时表示设置元素的文本内容：

   $("p").text("hello world");
   

6. val()

   设置或返回匹配元素的当前value值。

   无参时表示获取元素的value值：

   var text = $("input").val();
   

   有参时表示设置元素的value值：

   $("input").val("hello world");
   

7. attr()

   设置或返回被选元素的属性值。

   返回文档中所有图像的src属性值：

   $("img").attr("src");
   

   为所有图像设置src属性：

   $("img").attr("src","test.jpg");
   

   为所有图像设置src和alt属性：

   $("img").attr({ src: "test.jpg", alt: "Test Image" });
   

8. css()

   设置或返回被选元素的样式属性。

   获取p标签的样式属性值：

   var color = $("p").css("color");
   

   将所有段落字体设为红色：

   $("p").css("color","red");
   

   将所有段落的字体颜色设为红色并且背景为蓝色：

   $("p").css({ color: "#ff0011", background: "blue" });
   

三、事件

鼠标事件

事件名	描述
click()	鼠标单击事件
dblclick()	鼠标双击事件
mouseover()	当鼠标指针位于元素上方时
mouseout()	当鼠标指针从元素上移开时

为第一个button按钮添加单击事件

$(":button:first").click(function(){});

键盘事件

事件名	描述
keydown()	当按钮被按下时，发生 keydown 事件。
keyup()	完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。
keyup()	当按钮被松开时，发生 keyup 事件。

页面载入

$(document).ready(function(){
    // 执行代码
});

js原生load方法与Jquery的ready的区别：

	window.οnlοad=function(){};	$(document).ready(function(){});
执行时机	必须等待网页全部加载完毕（包括图片等），然后再执行包裹代码	只需要等待网页中的DOM结构加载完毕，就能执行包裹的代码
执行次数	只能执行一次，如果第二次，那么第一次的执行会被覆盖	可以执行多次，不会被上一次覆盖
简写	无	$(function(){});

其他事件

1. submit()

   表单的提交事件。可以通过返回false来取消提交。

   提交本页中的第一个表单：

   $("form:first").submit();
   

   也可以传入方法参数：

   $("form:first").submit(function(){
       // 执行代码
   });
   

2. live()

   给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。

   给所有button按钮添加单击事件，即使是页面中新增的标签。

   $(':button').bind('click', function() {
     // 执行代码
   });
   

四、文档处理

1. append()

   向每个匹配的元素内部追加内容。

   向所有段落中追加一些HTML标记：

   $("p").append("Hello");
   

2. after()

   在每个匹配的元素之后插入内容。

   在所有段落之后插入一些HTML标记代码:

   $("p").after("Hello");
   

五、Ajax

GET/POST请求

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

参数：url,[data],[callback],[type]

• url：必需的 URL 参数规定您希望请求的 URL。

• data：待发送 Key/value 参数。

• callback：请求成功后所执行的函数名。

• type：返回内容格式：xml, html, script, json, text, _default。

获得 test.php 页面返回的 json 格式的内容：

$.post("test.php", { "func": "getNameAndTime" },
   function(data){
     alert(data.name); // John
     console.log(data.time); //  2pm
   }, "json");

六、动画效果

animate()

用于创建自定义动画的函数。

params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

fn:回调函数，在动画完成时执行的函数。

$("div").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000,function(){
      alert("running over");
  } );
});