jQuery——简洁的javaScript库

jQuery库引入

<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>

语法

$(selector).action()

$(document).ready(function(){console.log("标签加载完毕");}

遍历

$("p").each(function(){this.style.color="red";});
console.log($("p".length));

jQuery选择器

基本选择器

#id： 根据指定的id匹配元素.class ：根据类匹配元素Element： 根据元素名匹配元素* ：匹配所有元素

符号选择器

$("E1,E2,E3")： 选择所有E1,E2,E3的元素$("E1 E2")：选择E1下所有E2$("E1>E2")：选择E1下的E2,不包含E2下的元素$("E1+E2")：选择E1后紧邻的E2$("E1~E2")：选择E1之后的所有E2

属性选择器

[attribute]：选择拥有此属性的元素[atribute=value]：选择属性值为value的元素[attribute!=value]：选择属性值不为value的元素[attribute^=value]：选择属性值以value开始的元素[attribute$=value]：选择属性以value值结束的元素[attribute*=value]：选择属性值中含有value的元素[attribute~=value]：选择多个属性中国含有value元素

子元素过滤选择器

:first-child：选择每个父元素的第一个子元素:last-chilid：选择每个父元素的最后一个子元素:nth-child(index)：选择每个父元素下的第index个子元素或奇偶元素(index从1开始):nth-last-child(index)：选择每个元素下的倒数第index个子元素或奇偶元素:only-child：如果某个元素是它父元素中唯一的子元素，那么将会被匹配只考虑当前种类
:first-of-type
:last-of-type
:nth-of-type
:nth-last-of-type
:only-of-type

基本过滤选择器

:first：选择第一个元素:last：选择最后一个元素:eq(index)：选择索引为index的元素，(index从0开始):gt(index)：选择索引值大于index的元素:lt(index)：选择索引值小于index的元素:even：选择索引是偶数的所有元素:odd：选择索引是奇数的所有元素

jQuery筛选器

按顺序找

$("p").first().text("123")： 获取第一个元素$("p").last() ：获取匹配的最后一个元素$("p").eq(n) ：获取匹配索引的元素

过滤与剔除

$("p").filter("#id4") ：筛选出与指定表达式匹配的元素集合$("p").not("id4") ：从匹配元素的集合中删除与指定表达式匹配的元素

父子级别查找

$("#container").children().css({"color":red, "border":"1px solid red"}); ：选择所有的子标签$("#container").find("#id4") ：子级查找$("#id4").parent()：父级查找$("#id4").parents()：祖宗查找$("#id").parentUntil("#container")：父级直到..，不包含$("#id4").next()：下一个$("#id4").nextAll()：下面多个$(#id4").nextUntil("#id7")：下面多个直到..，包含$("#id4").prev()：上面$("#id4").prevAll()：上面多个$("#id4").prevUntil("#id1")：上面多个直到..$("#id4").siblings()：同辈

文档处理

内容属性处理

// 获得内容
$("p").text();
$("p").html();
$("p").val(); //处理form表单//设置内容
$("p").text("hello world");
$("p").html("hello world");
$("p").val("hello world");// 获取属性
$("p").attr("color");
$("p").prop("color");// 设置属性
$("p").attr("checked","checked");
$("p").prop("checked",true); //处理checkbox，可以自动更新web控件元素状态

类名属性处理

// 判断类名
$("p").hasClass("selected")；// 添加类名
$("p").addClass("selected");// 移除类名
$("p").removeClass("selected");// 有类名就移除，没有就添加
$("p").toggleClass("selected");// 移除属性
$("img").removeAttr("src");

文档元素操作

// 在参考位置末尾追加元素
$("p").append("hello");// 将元素追加到参考位置末尾
$("hello").appendTo("p");// 在参考位置前面插入元素
$("p").prepend("hello");// 将元素插入到参考位置前方
$("hello").prependTo("p");// 在参考位置后面插入元素
$("p").after("hello");//将元素插入到参考元素后面
$("hello").insertAfter("p");// 在参考元素前面插入元素
$("p").before("hello");// 将元素插入到参考元素之前
$("hello").insertBefore("p");// 将参考元素替换成新元素
$("p").replacewith("hello");// 用新元素来替换参考元素
$("hello").replaceAll("p");// 将参考元素中的所有元素清空,参考元素还在
$("p").empty(); // 将参考元素移除，参考元素删除
$("p").remove();

jQuery事件

文档事件

ready()：规定当DOM完全加载时要执行的函数resize()：添加/触发resize事件scroll()：添加/触发scroll事件on()方法在被选元素及子元素上添加一个或多个事件处理程序
$("p").on("click",function(){alert("段落点击了");});   off() 方法移除通过on()方法添加的事件处理程序
$("p").off("click");one()方法向被选元素添加一个或多个事件处理程序，该处理程序只能被每个元素触发一次
$("p").one("click",function(){alert("段落被点击");});

鼠标事件

click、dbclick、mouseenter、mouseleave、mouseover、mousemove

键盘事件

keypress、keydown、keyup

event参数

event.currentTarget ：当前DOM元素event.target：哪个DOM元素触发事件event.stopPropagation()：阻止继续向父级执行

jQuery效果

隐藏、显示

$("p").hide();$("p").show();$("p").toggle();

淡出、淡入

$("p").fadeOut();$("p").fadeIn();$("p").fadeToggle();

收起、放下

$("p").slideUp();$("p").slideDown();$("p").slideToggle();

自定义动画

$("p").animate({"left":"+=20px","height":10, 1000, function(){console.log("播放完毕"); }});

停止动画

$("p").stop(true,false);

延迟动画

$("p").delay("slow").fadeIn();

jQueryUI

引入jQuery-ui样式

<link rel="stylesheet" href="css/jquery-ui.css">

引入jQuery.js

<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>

引入jQueryUI.js

<script src="js/jquery-ui.js" type="text/javascript" charset="utf-8"></script>

jQuery——简洁的javaScript库相关推荐

JQuery——一个快速、简洁的JavaScript库
JQuery jQuery是一个快速.简洁的JavaScript库,极大地简化了 JavaScript 编程.jQuery设计的宗旨是"write Less,Do More",即倡 ...
最新的jQuery插件和JavaScript库
每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...
jQuery插件和JavaScript库
每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...
jQuery是一个JavaScript库极大的简化JavaScript编程
jQuery是一个JavaScript库极大的简化JavaScript编程 1.jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScr ...
jQuery 是一个 JavaScript 库。
JQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库可以通过一行简单的标记被添加到网页中. jQuery是一个JavaScrip ...
jQuery ：一个 JavaScript 库
1.jQuery 其中整个框架库只有一个对象叫做jquery,别名叫做$这个符号 jQuery 是一个 JavaScript 库 jQuery 极大地简化了 JavaScript 编程,基于java ...
流行的JavaScript库 ——jQuery
1.为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的 Web2.0 特性的富客 ...
三十五、jQuery（JavaScript 库）
文章目录 jQuery 概述 jQuery 的使用入口函数了解 jQuery 的 $ 符号 jQuery对象与DOM对象之间的转换(难点) jQuery选择器(重点) jQuery基本选择器层级 ...
JavaScript库和API
by Adam Recvlohe 通过亚当·雷夫洛厄(Adam Recvlohe) API就像一盒巧克力 (APIs are like a box of chocolates) If you have ...