Jquery学习记录

jquery在线引用地址：http://code.jquery.com/jquery-latest.js

1.基础语法是：$(selector).action()；

　　选择器：$("p") 选取 <p> 元素。$("p.intro") 选取所有 class="intro" 的 <p> 元素。$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。jquery中有元素选择器，属性选择器。选择器可以多个选项一起组合用。

通过 var jq = $.noConflict() 来解决命名冲突。

2.方法链接：允许在一个元素上运行多条jquery语句，如：$("#p1").show(100).hide(100).css("color","red");

3.DOM（文本对象模型）操作：

　　获得内容：.text():设置或者返回所选元素的文本内容。.html():设置或返回所选元素的html元素(包括html标签)，.val():设置或者返回表单字段的值。

　　获取属性值：.attr()，用于获取元素的属性值。如：$("#a1").attr("href")。

4.遍历:.parent() 方法返回被选元素的直接父元素。parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

$(document).ready(function(){
  $("span").parentsUntil("div");
});
可以简写为：$(function(){})

上面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素。

children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

　　水平遍历：

siblings()遍历所有的同胞元素
next()：返回被选元素的下一个同胞元素，该方法只返回一个元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。如 $("h2").nextUntil("h6");
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

5.过滤：

first() 方法返回被选元素的首个元素。 $("div p").first(); 选取首个 <div> 元素内部的第一个 <p> 元素：
last() 方法返回被选元素的最后一个元素。 $("div p").last(); 选择最后一个 <div> 元素中的最后一个 <p> 元素：
eq() 方法返回被选元素中带有指定索引号的元素。 $("p").eq(1); 索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。 $("p").filter(".intro"); 返回带有类名 "intro" 的所有 <p> 元素：
not() 方法返回不匹配标准的所有元素。 $("p").not(".intro"); 返回不带有类名 "intro" 的所有 <p> 元素。提示：not() 方法与 filter() 相反。

6.AJAX

load()：从服务器加载数据，并把返回的数据放入被选元素中。 $(selector).load(URL,data,callback); ，也可以把 jQuery 选择器添加到 URL 参数。 $("#div1").load("demo_test.txt #p1");

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

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

$.get(URL,callback);

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

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

$.post(URL,data,callback);

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

7.扩展$.fn和$.fx详解

$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。如扩展$.fn.abc() 。那么你可以：$("#div").abc();

$.fx是指jquery的特效。如果使用显示、滑动、淡入淡出、动画等。$.fx.off可以关闭动画，其实是直接显示结果。

jQuery为开发插件提拱了两个方法，分别是：

jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。为jQuery类添加添加类方法，可以理解为添加静态方法。比如：$.add(3,4);
jQuery.fn.extend(object);给jQuery对象添加方法。就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。要具体到实例：$("#p1").getadd();

8.jquery(function(){})与(function(){}(jQuery)的区别

$(function(){}) 的全写为： $(document).ready(function(){}) 。：当DOM加载完毕后执行ready方法。
（function(){}）(Jquery) ：实际执行的是()（para）匿名函数，只不过传递给了Jquery对象。

总结： $(function(){}) 用于存放DOM代码，在代码执行前DOM已经加载完毕。不可用于存放扩展开发插件代码，

　　　　（function(){}）用于存放开发插件的代码，执行其中代码DOM不一定存在。直接自动执行DOM操作代码请小心使用

posted @ 2017-07-07 17:19 jackche 阅读(167) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

jackche

Jquery学习记录

公告