jQuery学习整理



 
  
  
  
  
  
  jQuery test
  
  
  
  
  
 

 
 
     

First Step

First Content

Second Step

Second Content
test test2 test3
啦啦啦
点击跳转 jQuery元素选择器 jQuery使用CSS选择器来选取HTML元素 1.$("p")选取所有

元素 2.$(".intro")选取所有class="intro"的元素 3.$("#demo")选取所有id="demo"的元素 4.$("p.intro")选取所有class="intro"的

元素 5.$("p#demo")选取所有id="demo"的

元素 jQuery属性选择器 jQuery使用XPath表达式来选择带有给定属性的元素 1.$("[href]")选取所有带有href属性的元素 2.$("[href='#']")选取所有带有href且值等于"#"的元素 3.$("[href!='#']")选取所有带有href且值不等于"#"的元素 4.$("href$='.jpg'")选取所有带有href且值以".jpg"结尾的元素 jQuery CSS选择器 jQuery CSS选择器可用于改变HTML元素的CSS属性 $("p").css("background-color","red") 把所有p元素的背景颜色改成红色 更多选择器实例 $(this) 当前HTML元素 $("ul li:first")每个ul的第一个li元素 $("div#intro .head")选取id="intro"的div元素中所有class="head"的元素 jQuery选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lanstName") id="lastName"的元素(id选择器) .class $(".intro") class="intro"的元素(类选择器) element $("p") 所有

元素(元素选择器) .class.class $(".intro.demo") 所有class="intro"且class="demo"的元素 :first $("p:first") 第一个p元素 :last $("p:last") 最后一个p元素 :even $("tr:even") 所有偶数tr元素 :odd $("tr:odd") 所有奇数tr元素 :eq(index) $("ul li:eq(3)") 列表中的第四个元素(index从0开始) :qt(index) $("ul li:gt(3)") 列出index大于3的元素 :lt(index) $("ul li:lt(3)") 列出index小于3的元素 :not(selector) $("input:not(:empty)") 所有不为空的input元素 :header $(":header") 所有标题元素

-

:animated 所有动画元素 :contains(text) $(":contains('text')") 包含指定字符串的所有元素 :empty $(":empty") 无子(元素)节点的所有元素 :hidden $("p:hidden") 所有隐藏的p元素 :visible $("table:visible") 所有可见的表格 s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素 [attribute] $("[href]") 所有带有href属性的元素 [attribute=value]$("[href='#']") 所有href属性的值等于"#"的元素 [attribute!=value]$("[href!='#']") 所有href属性的值不等于"#"的元素 [attribute$=value]$("[href$='.jpg']") 所有href属性的值包含以".jpg"结尾的元素 :input $(":input") 所有input元素 :text $(":text") 所有type="text"的元素 :password $(":password") 所有type="password"的元素 :radio $(":radio") 所有type="radio"的元素 :checkbox $(":checkbox") 所有type="checkbox"的元素 :summit $(":submit") 所有type="submit"的元素 :reset $(":reset") 所有type="reset"的元素 :button $(":button") 所有type="button"的元素 :image $(":image") 所有type="image"的元素 :file $(":file") 所有type="file"的元素 :enabled $(":enabled") 所有激活input元素 :disabled $(":disabled") 所有禁用input元素 :selected $(":selected") 所有被选取的input元素 :checked $(":checked") 所有被选中的input元素 jQuery 事件 jQuery 名称冲突 jQuery 使用 $ 符号作为 jQuery 的简介方式。 某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。 jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号 jQuery效果 1.显示和隐藏 $("#test").hide(speed,callback); $("#test").show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。 可选的 callback 参数是隐藏或显示完成后所执行的函数名称 通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。 $(selector).toggle(speed,callback); 2.淡入淡出效果 fadeIn()用于淡入已隐藏的元素 $(selector).fadeIn(speed,callback); fadeOut()用于淡出可见元素 $(selector).fadeOut(speed,callback); fadeToggle()方法可以在fadeIn()和fadeOut()方法之间进行切换 $(selector).fadeToggle(speed,callback); fadeTo() 允许渐变为给定的不透明度(值介于0-1之间) $(selector).fadeTo(speed,opacity,callback); 3.滑动效果 slideDown()用于向下滑动元素 $(selector).slideDown(speed,callback); slideUp()用于向上滑动元素 $(selector).slideUp(speed,callback); slideToggle()方法可以在slideDown()和slideUp()方法之间进行切换 $(selector).slideToggle(speed,callback); 4.动画 animate() $(selector).animate({param},speed,callback); 必须的params参数定义形成动画的CSS属性 jQuery获得内容和属性 jQuery DOM 操作 jQuery提供一系列与DOM相关的方法,这使访问和操作元素和属性变得很容易 获得内容 text() 设置或返回所选元素的文本内容 html() 设置或返回所选元素的内容(包括HTML标记) val() 设置或返回表单字段的值 获得属性 attr() jQuery attr() 方法用于获取属性值。 $("#aid").attr("href"); attr()方法允许同时设置多个属性 $("#aid").attr({ "href" : "http://www.w3school.com.cn/jquery", "title" : "W3School jQuery Tutorial" }); attr() 的回调函数 $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; }); jQuery 添加元素 添加内容的四个jQuery方法 append() 在被选元素的结尾插入内容 prepend() 在被选元素的开头插入内容 after() 在被选元素之后插入内容 before() 在被选元素之前插入内容 jQuery 删除元素 删除元素和内容的2个方法 remove() 删除被选元素(及其子元素) empty() 从被选元素中删除子元素 jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。 $("p").remove(".italic"); 删除 class="italic" 的所有

元素 jQuery获取并设置CSS类 jQuery操作CSS addClass() 向被选元素添加一个或多个类 removeClass() 从被选元素删除一个或多个类 toggleClass() 对被选元素进行添加/删除类的切换操作 css() 设置或返回样式属性 css()方法 css()方法设置或返回被选元素的一个或多个样式属性 返回CSS属性 $("p").css("background-color"); 返回首个匹配元素的 background-color 值 设置CSS属性 $("p").css("background-color","yellow");为所有匹配元素设置 background-color 值 设置多个CSS属性 $("p").css({"background-color":"yellow","font-size":"200%"});为所有匹配元素设置 background-color 和 font-size jQuery 尺寸 通过 jQuery,很容易处理元素和浏览器窗口的尺寸。 jQuery提供多个处理尺寸的重要方法: width() 设置或返回元素的宽度(不包括内边距、边框或外边距) height() 设置或返回元素的高度(不包括内边距、边框或外边距) innerWidth() 返回元素的宽度(包括内边距) innerHeight() 返回元素的高度(包括内边距) outerWidth() 返回元素的宽度(包括内边距和边框) outerHeight() 返回元素的高度(包括内边距和边框) jQuery遍历 1.向上遍历DOM树 parent() 返回被选元素的直接父元素,该方法只会向上一级对 DOM 树进行遍历。 parents() 返回被选元素的所有祖先元素,一直向上直到文档的根元素() 您也可以使用可选参数来过滤对祖先元素的搜索 $("span").parents("ul");返回所有 元素的所有祖先,并且它是

    元素 parentsUntil()返回介于两个给定元素之间的所有祖先元素 $("span").parentsUntil("div");返回介于
    元素之间的所有祖先元素 2.向下遍历DOM树 children() 返回被选元素的所有直接子元素,该方法只会向下一级对 DOM 树进行遍历 find() 返回被选元素的后代元素,一直向下知道最后一个后代 $("div").find("span");返回属于
    后代的所有 元素 $("div").find("*"); 返回
    的所有后代 3.在DOM树中水平遍历 siblings() 返回被选元素的所有同胞元素(即同级元素) $("h2").siblings(); next() 返回被选元素的下一个同胞元素,该方法只返回一个元素。 $("h2").next(); nextAll() 返回被选元素的所有跟随的同胞元素 $("h2").nextAll();返回

    的所有跟随的同胞元素 nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素 $("h2").nextUntil("h6");返回介于

    元素之间的所有同胞元素(不包括h6) prev() 返回被选元素的上一个同胞元素,该方法只返回一个元素。 prevAll() 返回被选元素的上面的同胞元素 prevUntil() 返回介于两个给定参数之间的所有跟随的同胞元素(向上) jQuery 过滤 三个基本的过滤方法是:first()、last()和eq();允许基于其在一组元素中的位置来选择一个特定的元素 其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素 first()返回被选元素的首个元素 $("div p").first();选取首个
    元素内部的第一个

    元素 last() 返回被选元素的最后一个元素 $("div p").last();选取最后一个

    元素中的最后一个

    元素 eq()返回被选元素中带有指定索引号的元素,索引号从 0 开始,因此首个元素的索引号是 0 而不是 1 $("p").eq(1);选取第二个

    元素(索引号 1) filter()允许规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回 $("p").filter(".intro");返回带有类名 "intro" 的所有

    元素 not()返回不匹配标准的所有元素 $("p").not(".intro");返回不带有类名 "intro" 的所有

    元素 jQuery ajax load()方法 load()方法从服务器加载数据,并把返回的数据放入被选元素中 $(selector).load(URL,data,callback) 必须的URL参数规定加载的URL 可选的data参数规定与请求一同发送的查询字符串键值对集合 可选的callback参数是load方法完成后执行的函数名称 $("#div1").load("demo_test.txt");把文件 "demo_test.txt" 的内容加载到指定的

    元素中 $("#div1").load("demo_test.txt #p1");把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的
    元素中 $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ #responseTxt - 包含调用成功时的结果内容 #statusTXT - 包含调用的状态 #xhr - 包含 XMLHttpRequest 对象 if(statusTxt=="success") alert("外部内容加载成功!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); jQuery ajax get()和post()方法 get()和post()方法用于通过HTTP get或post请求从服务器请求数据 get:从指定的资源请求数据 post:向指定的资源提交要处理的数据 jQuery $.get()方法 $.get()方法通过HTTP GET请求从服务器上请求数据 语法:$.get(URL,callback) 实例:$.get("test.jsp",function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); jQuery $.post()方法 $.post()方法通过HTTP POST请求从服务器上请求数据 语法:$.post(URL,data,callback);可选的 data 参数规定连同请求发送的数据 实例:$.post("test.jsp", {name:"tom",age:18}, function(data,status){ alert("Data: " + data + "\nStatus: " + status); });

你可能感兴趣的:(js)