jQuery的学习(中)

动画队列与停止动画

在同一个元素上执行多个动画,那么对于这个动画来说后面的动画会放到动画队列当中,等待前面的动画执行完毕后执行。

stop( 参数1,参数2)

参数都为false和true两个值的选项。

参数1:是否清除队列。

参数2:是否跳转到最终效果。

不写参数默认2个都为false。

动态创建节点

html( )设置或获取内容。

如果不写参数则获取到元素的所有内容。

设置内容,会把原来的内容给覆盖掉。

.html("666");

参数里也可以写HTML代码不过所有参数内容都要写在双引号里面。

$( )和html( )写法一样,同样也是创建元素,不过它是保存在内存中的,如果要在页面上显示,就要追加。再用append( )追加节点,添加到页面当中。

$( )不会覆盖之前内容只会追加。

<script>

      $("a").click(function(){

        var a=$("<h1>ddd</h1>");

        $(".kk").append(a);

      })

  </script>

for( var i in kyg){}遍历对象

kk.push("11")——添加数组值

kk.join("")——用字符串连接起来

添加节点的方式

append( )

父元素.append(子元素);//作为最后一个子元素添加

把已有的HTML元素作为子元素添加给父元素当中,会发生剪切的作用,剪切作为最后一个元素添加。--剪切/添加

prepend( )

父元素.prepend(子元素);//作为第一个子元素添加

把已有的HTML元素作为子元素添加给父元素当中,会发生剪切的作用,剪切作为第一个元素添加。--剪切/添加

before( )

元素a.before( 元素b);//把元素b插入到元素a的前面,作为兄弟元素添加。

添加已有--剪切/添加

after( )

元素a.before( 元素b);//把元素b插入到元素a的后面,作为兄弟元素添加。

添加已有--剪切/添加

appendTo( )

子元素.appendTo(父元素);//把子元素作为父元素的最后一个子元素添加。

添加已有--剪切/添加

表单选择器option:selected选中被选中的option

清除节点

清空Ul里

$(".kk").html("");——不推荐使用,有可能会造成内存泄露,不安全。

清空元素:empty( );

$(".kk").empty( );——推荐使用。

移除某一个元素.

$(".li3").remove( );——"自杀"

杀死"父亲".

$(".li3").parent( ).remove( );——即可

克隆节点

克隆节点:clone( );

只存在内存之中,如果要添加到页面,需要追加。

var a=$(".kk").clone();

$("body").append(a);

clone( )方法参数不管是true还是false,都是会克隆到后代节点的。

clone( )方法参数是true表示会把事件一起克隆到。参数如果是false就不会克隆事件。默认为false。

val( )与设置表单

val( )方法 不给参数就是获取input内容

val( )方法,给参数就是设置(改写input内容)

案例动态数据添加与删除

find(".kk");——查找元素为.kk的

attr( )方法设置或返回被选元素的属性值。

attr("id","kk");——改ID名

attr("calss","kk")——改class名

jQuery的属性操作

attr( );

共有2个参数,一个是属性名,另一个是属性值。

attr("src","kk.jpg");//以前有的属性,现在会更改。如果原来没有这个属性,那就是添加属性。

设置多属性可以在里面添加一个对象,把要改的或者是添加的写进这个对象里面。

attr({

src:"kk.jpg",

id:"kk"

})——添加多属性

获取属性直接给这个属性名写进去就可以了。attr("src");

移除属性removeAttr( );

直接就用removeAttr("src");就可以了。

移除多个属性用空格间断。

removeAttr("src  id  class");——移除多属性

prop操作布尔类型的属性

有一类值给她设置true/false取值也是true/false,有些熟悉写在元素身上就表示选中,没有写在元素身上就表示没有选择。在jQuery1.6之后,对于checked,selected来说这种Boolean类型的属性来说,不能用attr( )方法,只能用prop方法。

获取是否选中的Boolean值:prop("checked")

设置它的值:prop("checked","false");

选择所以input下面有被点击的length:

$("ul li input:checked").length;

编程思维很重要!

宽与高

用width( )跟height( )拿到的参数是数值类型

用它们设置或获取宽度,高度,不包括内边距,边框,外边距。

设置她们的数值可以直接在里面添写想要变成的数值大小即可。

用innerWidth( ),innerHeight( )拿宽高,会包含内边距。(元素宽高+内边距)。

用outerWidth( ),outerHeight( )拿宽高,会包含内边距跟边框。(元素宽高+内边距+边框)

用outerWidth(true),outerHeight(true)拿宽高,会包含内边距跟边框跟外边距。(元素宽高+内边距+边框+外边距)。

获取页面可视区域宽高

$(window).width( );

$(window).height( );

offset和position

offset( )会获取到一个对象,这个对象是元素距离document的位置。!!

position( )会获取到一个对象,这个对象是获取元素距离有定位的父元素的位置。

scrollTop与scrollLeft

scrollTop( )表示元素内容被卷曲出去的宽度

scrollLeft( )表示元素内容被卷曲出去的高度

设置:设置元素内容被卷曲出去的高度或者宽度。

scrollLeft(217);

scrollTop(217);

获取页面被卷曲的高度:$(window).scrollTop();

获取页面被卷曲的宽度:$(window).scrollLeft();

案例固定导航栏:

scroll()方法会触发scroll事件。scroll事件适用于所有可滚动的元素和window对象。当用户滚动指定元素时,会发生scroll事件。

$(".kk").scroll(function(){

});

当一个元素设置了定位想要恢复正常,可以使用static,给position设置这个值会把之前的定位恢复正常。position:static;


事件的发展历程

用原生js给div注册单击事件,原生JS注册相同的事件,后面的会把前面的给覆盖掉。而jQuery不会。

jQuery事件发展历程:

简单的事件绑定--bind事件绑定--delegate事件绑定--on事件绑定(推荐)。

1.简单事件绑定click( )

不支持同时注册,也不支持动态注册。(也就是动态添加的HTML标签不支持被设置绑定事件)。

2.bind方式注册事件

支持同时注册,不支持动态注册。

第一个参数:事件类型

第二个参数:事件处理程序

$("div").bind({

click:function(){

console.log("dd");

},

mouseenter:function(){

console.log("dddd");

}

});

3.delegate注册委托事件--原理是事件冒泡

支持同时注册,也支持动态注册

$(".father").delegate("div",{

click:function(){

console.log("dd");

},

mouseenter:function(){

console.log("dddd");

}

});

至jQuery1.7之后,jQuery用on统一了所有事件的处理方法。

on注册事件!!

on注册简单事件:(但不支持动态注册)

$("div").on("click",function(){

console.log("dddd");

});

on注册事件委托:(支持动态注册)

$(".father").on("click","div","function(){

console.log("dddd");

});

$(".father").on("click","div,span","function(){

console.log("dddd");

});

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,657评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,889评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,057评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,509评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,562评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,443评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,251评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,129评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,561评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,779评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,902评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,621评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,220评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,838评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,971评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,025评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,843评论 2 354

推荐阅读更多精彩内容

  • 1. 向页面添加库<script>标签放在<head>标签内 2. 语法 2.1. $(selector).act...
    Joanne_Tang阅读 184评论 0 0
  • 前言 暑假的时候虽然说学习过一遍jQuery了,但只是眼过一遍,熟悉了基本的使用并没有做记录,趁着学校这两天学校运...
    LongTean阅读 1,519评论 3 51
  • 学习资料 w3cschool 1.获取、设置元素的内容 1.1获取或设置目标元素的文本内容 语法 $(select...
    小人物的秘密花园阅读 378评论 0 1
  • jQuery版本 1.x:兼容IE678,使用最为广泛,官网只做BUG维护,功能不再新增。因此一般项目来说,使用1...
    我不信这样也重名阅读 534评论 0 0
  • 学习资料 jQuery教程 获取 1.获取、设置元素的内容 1.1获取或设置目标元素的文本内容 语法 参数说明 1...
    编程狮W3Cschool阅读 380评论 0 2