jQuery进阶

Posted 2020-08-17

复习： 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( ) //获取内容