jQuery技术

一起来学jquery!(2)

字号+ 作者:H5之家 来源:H5之家 2017-05-15 14:07 我要评论( )

示例:fadeTo(500,0.5) //第二个参数是透明度的设置(0~1) fadeToggle()切换 注意: 在使用jquery时,动画和事件会出现排队现象(即:如果一次执行了很多动画,后面的动画不会替换前面的,而是排队等待执行) 这时我们可以

        示例:fadeTo(500,0.5)    //第二个参数是透明度的设置(0~1)
         fadeToggle()切换
    注意:
在使用jquery时,动画和事件会出现排队现象(即:如果一次执行了很多动画,后面的动画不会替换前面的,而是排队等待执行)

    这时我们可以使用插队方法进行解决:
        示例:$(this).children().stop().slideUp(); 加一个 .stop() 即可解决
    4)
setInterval():  //可按照指定的周期(以毫秒计)来调用函数或计算表达式
          示例:$(function(){
              setInterval("f1()",2000);
          })

 

(三)jquery修改css属性

 

1,jquery可以获取行内、内部、外部的样式
2,js dom方式只能获得行内样式
3,包含多种属性样式的需要拆分为具体样式进行获取

 

1)css属性获取及修改:

  ①css单属性获取:alert($('div').css('height'))

  ②css单属性修改:$('div').css('属性名','属性值')

  ③css多属性修改:$('div').css({'属性名':'属性值','属性名':'属性值',...})

  注意!在书写css复合属性时,要采用驼峰式命名!

     示例:background-color应写为backgroundColor

  .animate({属性名:'属性值'},500)  

  //动态的css方法,允许创建自定义的动画,可以用来操作多个css属性,使用队列功能,方法将逐一被调用,后续会加入示例。。

2)css类:

 

 

(四)jquery修改html属性

1,获取html内容(包括格式):

     $('div').html()   [innerHtml]

     $('div').html('代码')代码可以识别文本、标签
2,获取html文本内容:

     $('div').text()   [innerText]

     $('div').text(代码)设置文本内容  //注意:  如果内容中有标签,会将这些标签当作文本处理

      注意:没括号的话是获取信息,有括号是修改信息的值

3,DOM文档处理:

  1)内部插入(父子级关系):

    ①$(a).append($(b)) 把b插入a中
    ②$(b).appendTo($(a)) 把b插入到a中

      //注意:这两个都是插入到a里面的后面

      与prepend区分,是插入到a里面的前面

      //注意:若是已有节点追加,则发生位置移动,即旧节点被移除

  2)外部插入(兄弟级关系):

      //注意:与before区分,是插入到a外面的前面

      //注意:若是已有节点追加,则发生位置移动,即旧节点被移除

  3)包裹:wrap 

    ①$(a).wrap($(b))  把a用b包裹起来(每个元素都会包裹)  unwrap不包裹
            ②wrapAll:  包裹所有(所有元素包裹在一起)
            ③wrapInner:  内部包裹(会包裹指定元素的下一级)

  4)替换:replaceWith 

    ①$(a).replaceWith($(b))  用b替换a
            ②replaceAll    $(a).replaceAll($(b))   用a替换b
                //旧节点替换也是位置移动

  5)删除:empty 

    ①empty  删除父节点下的子节点(不包括父节点)
    ②remove  删除指定的节点

  6)克隆:clone(复制)  将内容复制一份
    ①var a = $('b').clone(false);    //只复制节点,不包括事件;
    ②var a = $('b').clone(true);        //复制节点和其事件;

  7)attr()的使用:

    ①元素.attr();获取属性

    ②元素.attr(attr,value);设置属性

      示例  $("input").attr("value");    //获取
          $("input").attr("value","abcd");  //设置

    ③元素.attr({value:"zhi",type:"zhi"});设置多个属性的方法

      注意:jquery中不允许在attr中修改或删除type属性

  8)val()的使用:

    val()在复选框(checkbox)中的使用demo:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
f