结合W3school详解jquery常用语法以及面试常见问题

来源：互联网发布：怎么看淘宝销售排行编辑：程序博客网时间：2024/06/07 01:09

基础篇

jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。
要把一个值转换为一个字符串，最常用的就是，toString()方法，这个方法唯一要做的就是返回相应值的字符串表现，但null和undefined值没有这个方法。因此在对一个变量进行了toString()后，如果变量为null或者undefined的时候就会报错。

不知道要转换的值是不是null或undefined的情况下，可以使用转型函数String()
通用方法

文档就绪函数

$(document).ready(function(){--- jQuery functions go here ----});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

jQuery hide() 和 show()

控制元素显示与隐藏避开css操作

$(selector).hide(speed,callback);$(selector).show(speed,callback);

2.使用 toggle() 方法来切换 hide() 和 show() 方法。

元素的淡入淡出效果

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

控制元素透明度切记禁用css
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$("button").click(function(){  $("#div1").fadeTo("slow",0.15);  $("#div2").fadeTo("slow",0.4);  $("#div3").fadeTo("slow",0.7);});

滑动方法可使元素上下滑动

slideDown()

slideUp()

slideToggle()

jQuery animate() 方法允许您创建自定义的动画

$("button").click(function(){  $("div").animate({    left:'250px',    opacity:'0.5',    height:'150px',    width:'150px'  });});

使用队列功能

$("button").click(function(){  var div=$("div");  div.animate({height:'300px',opacity:'0.4'},"slow");  div.animate({width:'300px',opacity:'0.8'},"slow");  div.animate({height:'100px',opacity:'0.4'},"slow");  div.animate({width:'100px',opacity:'0.8'},"slow");});

使用预定义的值

属性的动画值设置为 “show”、”hide” 或 “toggle”

$("button").click(function(){  $("div").animate({    height:'toggle'  });});

停止动画

<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script> $(document).ready(function(){  $("#start").click(function(){    $("div").animate({left:'100px'},5000);    $("div").animate({fontSize:'3em'},5000);  });  $("#stop").click(function(){    $("div").stop();  });  $("#stop2").click(function(){    $("div").stop(true);  });  $("#stop3").click(function(){    $("div").stop(true,true);  });});</script> </head><body><button id="start">开始</button><button id="stop">停止</button><button id="stop2">停止所有</button><button id="stop3">停止但要完成</button><p><b>"开始"</b> 按钮会启动动画。</p><p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p><p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p><p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p> <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div></body></html>

“开始” 按钮会启动动画。

“停止” 按钮会停止当前活动的动画，但允许已排队的动画向前执行。

“停止所有” 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。

“停止但要完成” 会立即完成当前活动的动画，然后停下来。

Callback 函数

$("p").hide(1000,function(){alert("The paragraph is now hidden");});

jQuery 方法链接

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

获得内容和属性

jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
提示：DOM = Document Object Model（文档对象模型）

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

jQuery attr() 方法用于获取属性值。

<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){  $("button").click(function(){    alert($("#w3s").attr("href"));  });});</script></head><body><p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p><button>显示 href 值</button></body></html>

修改属性和值

$("#btn1").click(function(){  $("#test1").text("Hello world!");});$("#btn2").click(function(){  $("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){  $("#test3").val("Dolly Duck");});

attr修改单个属性

$("button").click(function(){  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");});

attr修改多个属性

$("button").click(function(){  $("#w3s").attr({    "href" : "http://www.w3school.com.cn/jquery",    "title" : "W3School jQuery Tutorial"  });});

添加元素

jQuery append() 方法在被选元素的结尾插入内容。

jQuery prepend() 方法在被选元素的开头插入内容。

jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。

<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){  $("#btn1").click(function(){    $("img").before("<b>Before</b>");  });  $("#btn2").click(function(){    $("img").after("<i>After</i>");  });});</script></head><body><img src="/i/eg_w3school.gif" alt="W3School Logo" /><br><br><button id="btn1">在图片前面添加文本</button><button id="btn2">在图片后面添加文本</button></body></html>

删除

删除 class=”italic” 的所有 p 元素
在原有基础上追加

<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){  $("button").click(function(){    $("p").remove(".italic");  });});</script></head><body><p>This is a paragraph in the div.</p><p class="italic"><i>This is another paragraph in the div.</i></p><p class="italic"><i>This is another paragraph in the div.</i></p><button>删除 class="italic" 的所有 p 元素</button></body></html>

获取并设置 CSS 类

jQuery toggleClass() 方法

$("button").click(function(){  $("h1,h2,p").toggleClass("blue");});

总结：切换同一个class 是否展示

jQuery 遍历 - 后代

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

$(document).ready(function(){  $("div").find("span");});

map

遍历表单神器

.map() 方法对于获得或设置元素集的值特别有用。请思考下面这个带有一系列复选框的表单：

<form method="post" action="">  <fieldset>    <div>      <label for="two">2</label>      <input type="checkbox" value="2" id="two" name="number[]">    </div>    <div>      <label for="four">4</label>      <input type="checkbox" value="4" id="four" name="number[]">    </div>    <div>      <label for="six">6</label>      <input type="checkbox" value="6" id="six" name="number[]">    </div>    <div>      <label for="eight">8</label>      <input type="checkbox" value="8" id="eight" name="number[]">    </div>  </fieldset></form>

$(':checkbox').map(function() {  return this.id;}).get().join(',');

本次调用的结果是字符串：”two,four,six,eight”。

<!DOCTYPE html><html><head>  <style>p { color:red; }</style>  <script type="text/javascript" src="/jquery/jquery.js"></script></head><body>  <p><b>Values: </b></p>  <form>    <input type="text" name="name" value="John"/>    <input type="text" name="password" value="password"/>    <input type="text" name="url" value="http://w3school.com.cn/"/>  </form><script>    $("p").append( $("input").map(function(){      return $(this).val();    }).get().join(", ") );</script></body></html>

Values: John, password, http://w3school.com.cn/

jQuery DOM 元素方法 - index() 方法

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("li").click(function(){    alert($(this).index());  });});</script></head><body><p>点击列表项可获得其相对于同胞元素的 index 位置：</p><ul><li>Coffee</li><li>Milk</li><li>Soda</li></ul></body></html>

jQuery DOM 元素方法 - size() 方法

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").click(function(){    alert($("li").size());  });});</script></head><body><button>输出 li 元素的数目</button><ul><li>Coffee</li><li>Milk</li><li>Soda</li></ul></body></html>

结果：3

阅读全文

0 0