一.jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性:1.HTML 元素选取2.HTML 元素操作3.CSS 操作4.HTML 事件函数5.JavaScript 特效和动画6.HTML DOM 遍历和修改7.AJAX(**Asynchronous JavaScript and XML** 译为(异步的[JavaScript](https://zh.wikipedia.org/wiki/JavaScript)与[XML](https://zh.wikipedia.org/wiki/XML)技术))8.Utilities(实用工具,设备)Copy after login
11.jpg
$(document).ready(function(){--- jQuery functions go here ----});
$(function(){})
- jQuery选择器
- 元素选择器(css)1.$("p") 选取 < p > 元素。2.$("p.intro") 选取所有 class="intro" 的 < p > 元素。3.$("p#demo") 选取所有 id="demo" 的 < p > 元素。
- 属性选择器(XPath)1.$("[href]") 选取所有带有 href 属性的元素。2.$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。3.$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。4.$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。jQuery 使用名为 noConflict() 的方法来解决该问题。var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。
二.jQ效果三.jQuery HTML
- 隐藏/显示语法hide(),show().toggle()语法
实例$(selector).hide(speed,callback);$(selector).show(speed,callback);$(selector).toggle(speed,callback);Copy after login可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。toggle是显示/隐藏转换$("button").click(function(){ $("p").toggle();});Copy after login- 淡入淡出 fadeIn(),fadeOut(),fadeToggle() , fadeTo() fadeTo() 语法
其余三个同显示/隐藏$(selector).fadeTo(speed,opacity,callback);Copy after login- 滑动slideDown(),slideUp(),slideToggle()语法同显示/隐藏
- 效果 - 动画(允许创建自定义动画)animate()语法$(selector).animate({params},speed,callback);params 参数定义形成动画的 CSS 属性定义多个属性动画实例
注意:用驼峰写法,颜色动画要下 Color Animations 插件$("button").click(function(){$("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px'});});Copy after login- 停止动画 (方法用于在动画或效果完成前对它们进行停止)stop()语法$(selector).stop(stopAll,goToEnd);可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。因此,默认地,stop() 会清除在被选元素上指定的当前动画。
- chaining链锁语法$("#p1").css("color","red").slideUp(2000).slideDown(2000);实例
$("#p1").css("color","red").slideUp(2000).slideDown(2000);Copy after login
四.遍历
- 获得内容和属性text()、html() 以及 val()
实例text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML 标记)val() - 设置或返回表单字段的值Copy after loginCopy after login$("#btn1").click(function(){alert("Text: " + $("#test").text());});$("#btn2").click(function(){alert("HTML: " + $("#test").html());});$("#btn1").click(function(){alert("Value: " + $("#test").val());});Copy after login- 设置内容和属性
实例text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML 标记)val() - 设置或返回表单字段的值Copy after loginCopy after login$("#btn1").click(function(){$("#test1").text("哈哈!");});$("#btn2").click(function(){$("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){$("#test3").val("你好");});Copy after login- 添加元素
实例$("p").append("Some appended text.");append() - 在被选元素的结尾插入内容prepend() - 在被选元素的开头插入内容after() - 在被选元素之后插入内容before() - 在被选元素之前插入内容Copy after login- 删除元素remove() - 删除被选元素(及其子元素)empty() - 从被选元素中删除子元素语法同上
- 获取并设置 CSS 类addClass() - 向被选元素添加一个或多个类removeClass() - 从被选元素删除一个或多个类toggleClass() - 对被选元素进行添加/删除类的切换操作css() - 设置或返回样式属性
- css() 方法实例$("p").css("background-color","yellow");
- 尺寸
实例通过 jQuery,很容易处理元素和浏览器窗口的尺寸。jQuery 尺寸 方法width()设置或返回元素的宽度(不包括内边距、边框或外边距)。height()方法设置或返回元素的高度(不包括内边距、边框或外边距)。innerWidth()方法返回元素的宽度(包括内边距)。innerHeight()方法返回元素的高度(包括内边距)。outerWidth()方法返回元素的宽度(包括内边距和边框)。outerHeight()方法返回元素的高度(包括内边距和边框)。Copy after login$("button").click(function(){ var txt=""; txt+="Outer width: " + $("#div1").outerWidth() + "</br>"; txt+="Outer height: " + $("#div1").outerHeight(); $("#div1").html(txt);});Copy after login
- 遍历
遍历图解
- 祖先parent(),parents(),parentsUntil()
实例之一parent() 方法返回被选元素的直接父元素。parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。Copy after login$(document).ready(function(){ $("span").parents("ul");});Copy after login- 后代children(),find()
实例children() 方法返回被选元素的所有直接子元素。find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。Copy after login$(document).ready(function(){$("div").children("p.1");});Copy after login- 同胞siblings(),next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil()
实例siblings() 方法返回被选元素的所有同胞元素。next() 方法返回被选元素的下一个同胞元素。nextAll() 方法返回被选元素的所有跟随的同胞元素。nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。Copy after login$(document).ready(function(){ $("h2").siblings("p");});Copy after login- 过滤first(), last() , eq(),filter() 和 not()first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。实例
filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。实例$(document).ready(function(){$("div p").first();});Copy after login$(document).ready(function(){ $("p").not(".intro");});Copy after login