简介：jQuery，一个javascript库，到底有多牛逼，影响有多大这里我们的不探讨了。我们所关注的是怎样快速入门，把牛逼的知识变成我们装逼的武器。jQuery 库包含以下特性：HTML 元素选取；HTML 元素操作；CSS 操作；HTML 事 ...
| jQuery，一个javascript库，到底有多牛逼，影响有多大这里我们的不探讨了。我们所关注的是怎样快速入门，把牛逼的知识变成我们装逼的武器。
jQ语法是XPath(XML路径语言,在XML文档中查找信息的语言)与css选择器语法的组合;jQuery基础语法$(selector).action()实例;$(this).hide()- 隐藏当前元素;文档就绪函数： $(document).ready(function(){ //jQuery functions go here});也可写成： $(function(){ //jQuery functions go here})jQuery选择器一、元素选择器(css)：
$(selector).hide(speed,callback);$(selector).show(speed,callback);$(selector).toggle(speed,callback);实例： $("button").click(function(){ $("p").toggle();});可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。toggle是显示/隐藏转换2）淡入淡出 fadeIn()，fadeOut()，fadeToggle()，fadeTo()；fadeTo() 语法： $(selector).fadeTo(speed,opacity,callback);其余三个同显示/隐藏。3）滑动slideDown(),slideUp(),slideToggle()；语法同显示/隐藏。4）效果 – 动画(允许创建自定义动画)animate()；语法： $(selector).animate({params},speed,callback);params 参数定义形成动画的 CSS 属性。定义多个属性动画实例： $("button").click(function(){$("div").animate({ left:"250px", opacity:"0.5", height:"150px", width:"150px"});});注意:用驼峰写法,颜色动画要下 Color Animations 插件。5）停止动画 (方法用于在动画或效果完成前对它们进行停止)stop()；语法： $(selector).stop(stopAll,goToEnd);可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。因此，默认地，stop() 会清除在被选元素上指定的当前动画。6）chaining链锁；语法： $("#p1").css("color","red").slideUp(2000).slideDown(2000);实例： $("#p1").css("color","red").slideUp(2000).slideDown(2000);
text() – 设置或返回所选元素的文本内容；html() – 设置或返回所选元素的内容（包括 HTML 标记）；val() – 设置或返回表单字段的值；实例： $("#btn1").click(function(){ alert("Text: " + $("#test").text());});$("#btn2").click(function(){ alert("HTML: " + $("#test").html());});$("#btn1").click(function(){ alert("Value: " + $("#test").val());});2）设置内容和属性； text() – 设置或返回所选元素的文本内容；html() – 设置或返回所选元素的内容（包括 HTML 标记）；val() – 设置或返回表单字段的值；实例： $("#btn1").click(function(){ $("#test1").text("你好，世界!");});$("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){ $("#test3").val("你好，欧频优艺！");});3）添加元素； append() – 在被选元素的结尾插入内容；prepend() – 在被选元素的开头插入内容；after() – 在被选元素之后插入内容；before() – 在被选元素之前插入内容；实例： $("p").append("Some appended text.");4）删除元素； remove() – 删除被选元素（及其子元素）；empty() – 从被选元素中删除子元素；语法同上5）获取并设置 CSS 类； addClass() – 向被选元素添加一个或多个类；removeClass() – 从被选元素删除一个或多个类；toggleClass() – 对被选元素进行添加/删除类的切换操作；css() – 设置或返回样式属性；6）css() 方法；实例： $("p").css("background-color","yellow");7）尺寸； 通过 jQuery，很容易处理元素和浏览器窗口的尺寸。jQuery 尺寸 方法width()设置或返回元素的宽度（不包括内边距、边框或外边距）。height()方法设置或返回元素的高度（不包括内边距、边框或外边距）。innerWidth()方法返回元素的宽度（包括内边距）。innerHeight()方法返回元素的高度（包括内边距）。outerWidth()方法返回元素的宽度（包括内边距和边框）。outerHeight()方法返回元素的高度（包括内边距和边框）。实例： $("button").click(function(){ var txt=""; txt+="Outer width: " + $("#div1").outerWidth() + "</br>"; txt+="Outer height: " + $("#div1").outerHeight(); $("#div1").html(txt);});
parent() 方法返回被选元素的直接父元素。parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (< html>)。parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。实例： $(document).ready(function(){ $("span").parents("ul");});3）后代children(),find()； children() 方法返回被选元素的所有直接子元素。find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。实例： $(document).ready(function(){$("div").children("p.1");});4）同胞siblings(),next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil()； siblings() 方法返回被选元素的所有同胞元素。next() 方法返回被选元素的下一个同胞元素。nextAll() 方法返回被选元素的所有跟随的同胞元素。nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。实例： $(document).ready(function(){ $("h2").siblings("p");});5）过滤first(), last() , eq(),filter() 和 not()； first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。实例： $(document).ready(function(){ $("div p").first();});filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。实例： $(document).ready(function(){ $("p").not(".intro");});本文仅代表作者个人观点，不代表巅云官方发声，对观点有疑义请先联系作者本人进行修改，若内容非法请联系平台管理员，邮箱2522407257@qq.com。更多相关资讯，请到巅云www.yinxi.net学习互联网营销技术请到巅云建站www.yx10011.com。 |
