还剩12页未读,继续阅读
本资源只提供10页预览,全部文档请下载后查看!喜欢就下载吧,查找使用更方便
文本内容:
jQuery基础学问点总结DOM操作下面就为大家带来一篇jQuery基础学问点总结DOM操作觉得挺不错的,现在就共享给大家,也给大家做个参考运用jQuery的方式来操作DOM更加的简洁、便利,统一的调用方式便利学习并且可降低学习成本
1、样式属性操作1设置样式属性操作
①设置单个样式//个参数表示样式属性名称//其次个参数表示样式属性值$selector.css color,“red”;
②设置多个样式也可以设置单个//参数为{}对象$selector.css{“color:red,font-size”:“30px”};2获得样式属性操作//参数表示要获得的样式属性名称$selector.cssfont-size;
2、类操作1添加类样式addClassclassName为指定元素添加类//获得html内容$selector.html;
7.4清空元素//清空指定元素的全部子元素光杆司令//没有参数$selector.empty;$selector.html“;//“自杀”把自己包括全部内部元素从文档中删除掉$selector.remove;
7.5复制元素//作用复制匹配的元素//复制$selector所匹配到的元素//返回值为复制的新元素$selector.clone;【总结】举荐运用html方法来创建元素或者html清空元素
8、操作form表单重点
8.1属性操作
①设置属性//个参数表示要设置的属性名称//其次个参数表示改属性名称对应的值$selector.attrtitle,小花啊”;
②获得属性//参数为要获得的属性的名称,改操作会返回指定属性对应的值$selector.attrtitle;//此时,返回指定属性的值
③移除属性//参数为要移除的属性的名称$selector.removeAttr title;【留意】checked、selected、disabled要运用.prop方法prop方法通常用来影响DOM元素的动态状态,而不是变更的HTML属性例如input和button的disabled特性,以及checkbox的checked特性
8.2值和内容
①val方法//作用设置或返回表单元素的值,例如input,select,textarea的值//获得匹配元素的值,只匹配个元素$selector.val;//设置全部匹配到的元素的值$selector.val“具体值;
②text方法〃作用设置或获得匹配元素的文本内容〃获得操作不带参数留意这时候会把全部匹配到的元素内容拼接为一个字符串,不同于其他获得操作!$selector.text;//设置操作带参数,参数表示要设置的文本内容$selector.text“我是内容”;
9、尺寸位置操作
9.1高度和宽度操作
①高度操作height//作用设置或获得匹配元素的高度值//带参数表示设置高度$selector.height200;〃不带参数获得高度$selector.height;
②宽度操作width〃作用设置或获得匹配元素的宽度值〃带参数表示设置宽度//不带参数获得宽度$selector.width200;css获得高度和height获得高度的区分?A方式一,返回值number类型,例如30方式二,返回值string类型,例如30px”区分方式一常用在参与数学计算的状况
9.2坐标值操作
①offset〃作用获得或设置元素相对于文档左上角的位置//无参数表示获得,返回值为{left:num,top:num,值是相对于document的位置$selector.offset;//有参数表示设置,参数举荐运用数值类型$selector.offset{left:100,top:150;留意点设置ffset后,假如元素没有定位默认值static,则被修改为relative2scrollTop、、作用获得或者设置元素垂直方向滚动的位置//无参数表示获得偏移$selector.scrollTop;//有参数表示设置偏移,参数为数值类型$selector.scrollTop100;3scrollLeft//作用获得或者设置元素水平方向滚动的位置$selector.scrollLeft100;对scrollTop的理解:垂直滚动条位置是可滚动区域在可视区域上方的被隐藏区域的高度假如滚动条在最上方没有滚动或者当前元素没有出现滚动条,那么这个距离为0以上这篇jQuery基础学问点总结(DOM操作)就是共享给大家的全部内容了,希望能给大家一个参考className$selector.addClass;〃此处类型不带点,全部类操作的方法类名都不带点2移除类removeClass className为指定元素移除类className$selector.removeClass liltem;$selector.removeClass;//不指定参数,表示移除被选中元素的全部类3推断有没有类样式hasClass className推断指定元素是否包含类className$selector.hasClassliltem;//返回值为true或false4切换类样式toggleClass className为指定元素切换类className,该元素有类则移除,没有指定类则添加$selector.hasClass liltem;【留意】
1、操作类样式的时候,全部的类名都不带点.
2、操作的样式特殊少,那么可以通过.css这个方法来操作
3、操作的样式很多,那么要通过运用类的方式来操作
4、假如考虑以后维护便利把CSS从js中分别出来的话,举荐运用类的方式来操作类比CSS书写位置把CSS从htrnl中分别出来关键字简约、粗暴、干净利落、直截了当
3、jQuery动画
3.1隐藏显示动画
①show方法//用法一//参数为数值类型,表示执行动画时长/*单位为毫秒ms,参数20XX表示动画执行时长为20XX毫秒,即2秒钟*/$selector,show20XX;//用法二//参数为字符串类型,是jQuery预设的值,共有三个,分别是slow、normal、fast/*跟用法一的对应关系为*//*slow600ms normal400ms fast200ms*/$selector.show slow”;//用法三//参数一可以是数值类型或者字符串类型//参数二表示动画执行完后立刻执行的回调函数$selector.show20XX,function{};//用法四//不带参数,作用等同于css display,block/*留意此时没有动画效果*/$selector.show;【留意】jQuery预设的三组动画效果的语法几乎一样:参数可以有两个,个是动画的执行时长,其次个是动画执行完成后的回调函数个参数可以是指定字符或者毫秒数
②hide方法$selector.hide1000;$selector.hideuslow;$selector,hide1000,function{};$selector.hide;
3.2滑入滑出动画
①滑入动画效果$selector.siideDownspeed,callback;//留意省略参数或者传入不合法的字符串,那么则运用默认值400毫秒同样适用于fadeln/slideDown/slideUp$selector.slideDown;
②滑出//作用让元素以上拉动画效果隐藏起来$selector.slideUpspeed,callback;
③滑入滑出切换动画效果$selector.slideTogglespeed,callback;//参数等同与〃隐藏和显示〃
4、淡入淡出动画
①淡入动画效果//作用让元素以淡淡的进入视线的方式展示出来$selector.fadein speed,callback;
②淡出//作用让元素以渐渐消逝的方式隐藏起来$selector.fadeOut1000;
③淡入淡出切换动画效果//作用通过变更不透亮度,切换匹配元素的显示或隐藏状态$selector.fadeToggle fast,function{};//参数等同与〃隐藏和显示〃
④变更不透亮度到某个值——与淡入淡出的区分淡入淡出只能限制元素的不透亮度从完全不透亮到完全透亮;而fadeTo可以指定元素不透亮度的具体值;并且时间参数是必需的!//作用调整匹配元素的不透亮度//用法有别于其他动画效果//个参数表示时长//其次个参数表示不透亮度值,取值范围0T$selector.fadeTo1000,.5;//0全透,1全不透//个参数为0,此时作用相当于:.cssopacity,.5;$selector.fadeTo0,.5;jQuery供应的这几个动画效果限制的CSS属性包括高度、宽度、不透亮度{height:400px;width:300px;opacity:.4;}这三个css属性的共性是属性值只有一个,并且这个值是数值去掉单位后
5、自定义动画留意全部能够执行动画的属性必需只有一个数字类型的值比如要变更字体大小,要运用fontSizefont-size,不要运用font〃作用执行一组CSS属性的自定义动画//个参数表示要执行动画的CSS属性必选//其次个参数表示执行动画时长可选//第三个参数表示动画执行完后立刻执行的回调函数可选$selector.animate{params},speed,callback;
6、停止动画stop
6.1作用停止当前正在执行的动画
6.2为什么要停止动画?假如一个以上的动画方法在同一个元素上调用,那么对这个元素来说,后面的动画将被放到效果队列中这样就形成了动画队列联想排队进站动画队列里面的动画不会执行,直到个动画执行完成//个参数表示是否清空全部的后续动画//其次个参数表示是否立刻执行完当前正在执行的动画$selector.stopclearQueue,jumpToEnd;//常用方式$selector.stop;说明当调用Stop方法后,队列里面的下一个动画将会立刻起先但是,假如参数clearQueue被设置为true,那么队列面剩余的动画就被删除了,并且恒久也不会执行假如参数jumpToEnd被设置为true,那么当前动画会停止,但是参与动画的每一个CSS属性将被立刻设置为它们的目标值比如slideUp方法,那么元素会立刻隐藏掉假如存在回调函数,那么回调函数也会立刻执行留意假如元素动画还没有执行完,此时调用sotp方法,那么动画将会停止并且动画没有执行完成,那么回调函数也不会被执行
7、jQuery节点操作
7.1动态创建元素//$函数的另外一个作用动态创建元素var$spanNode=$(我是一个span元素”);
8.2添加元素(重点)
①在元素的最终一个子元素后面追加元素append(重点)
②作用在被选元素内部的最终一个子元素(或内容)后面插入内容(页面中存在或者创建出来的元素都可以)假如是页面中存在的元素,那么调用append后,会把这个元素从原先的位置移除,然后再插入到新的位置假如是给多个目标追加一个元素,那么append方法的内部会复制多份这个元素,然后追加到多个目标里面去(最好不要这么做)
③常用参数htmlString或者jQuery对象//在$(selector)中追加$node$(selector).append($node);//在$(selector)中追加div元素,参数为htmlString$(selector).append;(了解)不常用操作(用法跟append方法基本一样)//appendTo//作用:同append,区分是把$selector追加到node中去$selector.appendTo node;//prepend//作用在元素的个子元素前面追加内容或节点$selector.prepend node;//after〃作用在被选元素之后,作为兄弟元素插入内容或节占
八、、$selector.after node;//before〃作用在被选元素之前,作为兄弟元素插入内容或节占
八、、$selector.before node;
7.3html创建元素举荐,重点
①作用设置或返回所选元素的html内容包括HTML标记
②设置内容的时候,假如是html标记,会动态创建元素,此时作用跟js里面的innerHTML属性相同//动态创建元素$selector.html大方啊;。