JQuery
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
}) jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
因此,必须在文档完全加载后,才能运行JQuery代码,为保证这一点,所有的JQuery函数必须位于一个document ready 函数中:
$(document).ready(function(){
// 开始写 jQuery 代码...
}); | 基础语法: $(selector).action() | 美元符号定义 jQuery 选择符(selector)"查询"和"查找" HTML 元素 jQuery 的 action() 执行对元素的操作 |
| 实例 | $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有 <p> 元素 $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素 $("#test").hide() - 隐藏 id="test" 的元素 事件方法: $("p").click(function(){ $(this).hide(); }); $("input").focus(function(){ $(this).css("background-color","#cccccc"); }); |
一、JQuery效果
| 显示隐藏 | .hide() .show() 可以使用 toggle() 方法来切换 hide() 和 show() 方法 |
| 淡入淡出 | fadeIn() 用于淡入已隐藏的元素 fadeOut() 方法用于淡出可见元素 fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换 fadeTo() 方法允许渐变为给定的不透明度(参数必须 值介于 0 与 1 之间) |
| 滑动 | slideDown() 方法用于向下滑动元素 slideUp() 方法用于向上滑动元素 slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换 |
| 动画 | $(selector).animate({params},speed,callback); 必需的 params 参数定义形成动画的 CSS 属性。 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。 可选的 callback 参数是动画完成后所执行的函数名称。 |
| 停止动画 | $(selector).stop(stopAll,goToEnd); 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。 因此,默认地,stop() 会清除在被选元素上指定的当前动画。 |
| 链 | 通过链,可以在同一个元素上运行多条 jQuery 命令,一条接着另一条 $("#p1").css("color","red").slideUp(2000).slideDown(2000); |
二、JQuery HTML
JQuery的核心部分就是操作DOM的能力,提供了一系列与DOM相关的方法
JQuery操作DOM真的好方便啊!!怎么没人告诉过我!!可恶!!!!
| 设置/获取内容 | text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 ( )中输入参数即可设置对应内容 |
| 设置/获取属性 | attr() -用于获取属性值 ( )中输入参数即可设置对应内容 设置一个属性: $("#runoob").attr("href","http://www.xxx.com"); 设置多个属性: $("#runoob").attr({ "href" : "http://www.runoob.com/jquery", "title" : "jQuery 教程" }) |
| 添加元素 | append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 |
| 删除元素 | remove() - 删除被选元素(及其子元素) empty() - 从被选元素中删除子元素 |
| CSS类 | addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性 如:$("p").css({"background-color":"yellow","font-size":"200%"}) |
| 尺寸 | |
三、JQuery遍历
JQuery的遍历,说白了就是对DOM树进行遍历,在DOM树上进行移动
| 向上遍历 找祖先 | parent()-返回被选元素的直接父元素 parents()-返回被选元素的所有祖先元素,一路向上直到文档的根元素 (可设置可选参数,过滤祖先元素) parentsUntil()-返回介于两个给定元素之间的所有祖先元素 例:$("span").parentsUntil("div") |
| 向下遍历 找后代 | children()-返回被选元素的所有直接子元素 find()-返回被选元素的后代元素,一路向下直到最后一个后代 (可以使用可选参数来过滤对子元素的搜索) |
| 水平遍历 找兄弟 | siblings()-返回被选元素的所有同胞元素 next()-返回被选元素的下一个同胞元素,只返回一个 nextAll()-返回被选元素的所有跟随的同胞元素 nextUntil()-返回介于两个给定参数之间的所有跟随的同胞元素 prev()-返回被选元素的前一个同胞元素,只返回一个 prevAll()-返回被选元素的前面所有的同胞元素 prevUntil()-返回介于两个给定参数之间的所有跟随的同胞元素 |
| 过滤 | first() 方法返回被选元素的首个元素 $("div p").first(); last() 方法返回被选元素的最后一个元素 eq() 方法返回被选元素中带有指定索引号的元素(索引号从0开始) filter() -规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回 not()-filter()的反方法 |
四、JQuery AJAX
| load ( ) 从服务器加载数据 | $(selector).load(URL,data,callback); 必需的 URL -需要加载的 URL 可选的 data -与请求一同发送的查询字符串键/值对集合 可选的 callback - load() 方法完成后所执行的函数名称 $("#div1").load("demo_test.txt"); |
| get() 通过 HTTP GET 从服务器获得(取回)数据 | $.get(URL,callback); 必需的 URL 参数-请求的 URL。 可选的 callback -请求成功后所执行的函数名。 如: $.get("demo_test.php",function(data,status){ alert("数据: " + data + "\n状态: " + status); }) |
| post() HTTP POST 向指定的资源提交要处理的数据 也可用于从服务器获取数据。 但不会缓存数据 | $.post(URL,data,callback); 必需的 URL -请求的 URL 可选的 data -连同请求发送的数据 可选的 callback- 请求成功后所执行的函数名 如: $.post("/try/ajax/demo_test_post.php", { name:"菜鸟教程", url:"http://www.runoob.com" }, function(data,status){ alert("数据: \n" + data + "\n状态: " + status); }); |
