首页 > 代码库 > jQuery进阶

jQuery进阶

2024-08-19 13:48:09   226人阅读

复习： 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进阶


联系
我们