jQuery

最新推荐文章于 2024-09-14 17:04:32 发布

燃迟

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量163

点赞数

分类专栏： web前端文章标签： css html jquery

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

注意是一个等号不是两个

$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

显示元素和隐藏元素的jQuery函数是hide（）和show（），其中hide（“slow”）会有动画效果;

两个函数都可以传入参数，第一个参数是速度，也就是上面的slow，也可以是具体的时间单位是毫秒，第二个可以传入回调函数，也就是隐藏或显示之后执行的函数

可以使用 toggle() 方法来切换 hide() 和 show() 方法,显示被隐藏的元素，并隐藏已显示的元素,同样可以传入速度和回调函数

淡入淡出效果用fading方法实现，同样可以传入时间和回调函数，其中fadeIn() 用于淡入已隐藏的元素； fadeOut() 方法用于淡出可见元素； fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换；
fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

jQuery 拥有以下滑动方法：slideDown()slideUp()slideToggle(),同样可以设置速度和回调函数,当然是对要隐藏或要出现的元素设这个方法

自定义动画

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性，直接像是写css样式就可以不需要加引号那些，属性要用驼峰写，比如写成marginLeft而不是margin-left，后面那种写法是错的。具体参考http://www.w3school.com.cn/jquery/jquery_animate.asp

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

stop(stopAll,goToEnd)函数用来停止所有的jQuery动画

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

通过连接，可以同时设定一个对象的多个样式和事件，可以减少找到对象的时间

text()设置或返回所选元素的文本内容
html()设置或返回所选元素的内容包括HTML标记
val()设置或返回表单字段的值//只能对input起作用

拥有回调函数，回调函数有两个参数：被选元素列表中当前元素的下标以及原始的值，然后把回调函数返回的值作为元素新的值
要设置之间往函数里面传值比如$("#Rango").text("cold")
attr()用来获取属性值，要获取就直接传入双引号和属性名，比如attr("class")当然也可以一次设定好多个$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});

attr()函数也通过回调函数，有两个参数：被选元素列表中当前元素的下标，以及原始值，然后返回新值作为新的下标

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

能够接受参数来生成无限的HTML元素，参数可以是无限个，会根据参数的顺序生成，可以通过各种方法生成新元素

var txt1="<b>I </b>";                    // 以 HTML 创建新元素
var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建新元素
var txt3=document.createElement("big");  // 通过 DOM 创建新元素

remove() - 删除被选元素（及其子元素），允许传入参数作为删除的过滤，比如

$("p").remove(".italic");

就是删除class italic里面所有的p元素
empty() - 从被选元素中删除子元素（一次清空所有）

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

如果直接传入css样式名，则户返回该样式的值，比如输入"background-color"就会返回当前背景色但是如果css("background-color","blue")就会把背景色设为蓝色，设置多个的句式

css({"propertyname":"value","propertyname":"value",...});

至于width() 直接用就是获取值，width(500)就是设置

parent() 方法返回被选元素的直接父元素。parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。可以通过parents("p")这样获得所有父p标签
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

children("p.myP")就是在子元素里面找所有class为myP的p元素，children() 方法返回被选元素的所有直接子元素。

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

siblings() 方法返回被选元素的所有同胞元素。
next() 方法返回被选元素的下一个同胞元素
nextAll() 方法返回被选元素的所有跟随的同胞元素
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
，都可以传入标签名过滤

$("div p").first();是选择div中第一个p元素，last就相反咯

$("div").eq(1)就是div中序号为1的元素，元素的序号从0开始

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

not()返回所有不匹配的元素