jQuery进阶

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery进阶相关的知识,希望对你有一定的参考价值。

复习: jq无论如何都是一个集合 jq是一个包装集
var arr=$("div").get( )会将所有的DOM对象转换成真正的数组,
get( )里边没传参数
兄弟元素: 只要是同级就是兄弟元素,不管是不是同一种元素
 
方法: next()用来获取当前元素的下一个兄弟元素,获取不到元素 ,那么久获取不到(返回的是一个空 )
 
 
1.css方法
参数少的 时候表示获取,参数多的 时候表示设置
作用:用来设置或者 获取指定的JQ对象的样式属性
①:传入2个参数,表示设置样式
②:传入1个参数,表示获取样式
获取样式,不管是行内还是CSS设置的样式都可以获取到。 ③:一次同时设置多个样式:CSS({color:"red, bgc:"pink""})
对象的 属性可以带引号,也可以不带引号
2.类样式操作(类名不带点)
.addClass 给匹配到的元素添加类 .addClass(“ ");
.removeClass( )给你匹配到的元素移除制定的类 .hasClass( )用来判断指定的元素有没有类,返回值是一个布尔值(匹配到的元素中,只要有一个元素只要有一个元素包含这个类,返回值就是true
.toggleClass( )实现 类的切换,如果有类就移除,如果没类就添加
 
3.动画
效果: 都是数值 属性值都只有一个
展示动画的效果:第一种,不带参数(没有动画效果) $("div").show(传入相应数值参数 ) 参数的单位是毫秒。让div在一秒钟内展示出来 ,改变了宽和高,以及不透明度 传入字符串参数
①:“fast”200
②:“normal”400
③:“slow”600
传入两个参数: 第一个参数是动画执行的时长
第二个参数,是动画执行完,立即执行回调函数
 
隐藏动画的效果:hide( )
淡入淡出的效果: : 参数乱写时,那么默认值还是normal 其他参数和hide一样
fadeOut( )
滑入和滑出的效果(卷帘门):slidedDown(滑入)改变的是 高度
slildeUp(滑出)
切换:$("div").toggle( );判断是展示还是隐藏 如果展示就隐藏 反之亦然
淡入淡出的切换: $("div").fadeToggle( );//原来括号里能传什么参数,这里就可以传什么
滑入滑出的切换: $("div").slideToggle( );
改变不透明度效果:.fadeTo( )第一个参数:表示动画执行的时长 第二个参数:指定一个不透明度的值
自定义的动画效果:animate({ width:"10px"} ,4000,function(){ }) 第一个参数,要执行动画的样式属性 第二个参数是执行动画的时长 第三个参数是回调函数 在二三参数之间还可以写
linear(表示匀速 ) 默认的是swing(先快后慢 )
 
 
 
3.事件 .hover( )
无论是鼠标进入还是鼠标离开,都会执行这个方法
.hover(function(){ },function(){ })
传入两个参数。第一个表示mouseenter 第二个表示mouseleave
接受一个参数时,不管是鼠标进入还是鼠标离开,都会这行这个方法 配合toggle使用
.hover(function(){$("div").slideToggle( );})
 
 
4.stop( )作用: 停止JQ动画,想让那个元素停止动画,就在那个元素的后边调用这个方法
先调用stop( )方法,在调用animate( )方法
第一个参数:表示是否清空后续的所有动画(告后边饭卖完了,后边的动画不会去执行了)
第二个参数: 表示是否立即执行完当前动画(瞬间完成动画true)false(就是不执行就停那里)
stop( false,false)默认的 匆匆从前走到后
 
5.节点操作
追加节点:append( ) 还是放到最后一个子节点的后边
会把原来的先移除掉,在追加到新的位置去
参数: 可以是JQ对象 可以是一个DOM对象 html格式的字符串
$("div").apppend("<p>nihai</p>");//会在方法的内部创建标签,然后追加到指定的元素中去
$( )函数也可以接受html格式的字符串,也会帮我们 创建出 元素
var $p2=$("<p>nihai</p>") $("div").append( $p2)
 
6.
7. .html( )用来获取或者设置html的内容
$("div").html("设置 内容")
$("div").html( ) //获取内容
 
 
 

以上是关于jQuery进阶的主要内容,如果未能解决你的问题,请参考以下文章

js菜鸟进阶-jQuery源码分析-基本架构

JQuery笔记总结------事件细节JQ进阶常用方法

Jquery-AJAX进阶

jQuery 进阶用法

Jquery进阶

Jquery13 Ajax 进阶