• jQuery 基础DOM和CSS操作


    一、设置元素及内容

    html()             获取元素中的HTML内容

    html(value)   设置元素中的HTML内容

    text()     获取元素中的文本内容

    text(value)    设置元素中的文本内容

    val()      获取表单中的文本内容

    val(value)     设置表单中的文本内容

    注意:当使用html()和text()设置元素的内容时,会清空原来的数据。如果希望追加信息,需要先获取原来的数据。

    $('#box').html($('#box').html + 'extra html');

    如果想设置多个选定状态,比如下拉列表、单选复选框等,可以通过数组传递操作。

    $("input").val(["check1","check2","radio1"]);  //value值是这些的将被选定

    二、元素属性操作

    attr(key)            获取某个元素key属性的属性值

    attr(key,value)             设置某个元素key属性的属性值

    attr({key1:value1,key2:value2...})    设置某个元素多个key属性的属性值 

    atrr(key,function(index,value){})       设置某个元素key通过函数来设置

    注意:attr()方法里面的function() {}可以不传参数。可以只传一个参数index,表示当前元素的索引(从0 开始),也可以传递两个参数index、value,第二个参数表示原本属性的值。

    删除指定的属性,就不可以使用匿名函数。

    三、元素样式操作

    css(name)                 获取某个元素行内的CSS样式

    css([name1,name2,name3])      获取某个元素行内多个CSS样式

    得到多个CSS样式的数组对象数组

    js遍历元素

    for (var i in box) {

      alert(i +':' +box[i]);

    }

    jq $.each()方法遍历原生的js对象数组

    $.each(box,function(attr,value) {

      alert(attr+ ':' +value);

    });

    ,each()方法遍历jq对象数组

    $('div').each(box,function(attr,value) {  //index为索引,element为元素DOM

      alert(arrt+':'+value);

    });

    css(name,value)                  设置某个元素行内的CSS样式

    css(name,function(index,value))    设置某个元素行内的CSS样式

    css({name1:value1,name2:value2})    设置某个元素行内的多个CSS样式

    addClass(class)           给某个元素添加一个CSS类

    addClass(class1 class2 class3...)   给某个元素添加多个CSS类

    removeClass(class)         删除某个元素一个CSS类

    removeClass(class1 class2 class3...)  删除某个元素多个CSS类

    toggleClass(class)          来回切换默认样式和指定样式

    toggleClass(class1 class2 class3...)    同上

    toggleClass(class,switch)       来回切换的时候设置频率

    toggleClass(function () {})       通过匿名函数设置切换规则

    togglecClass(function () {},switch)     在匿名函数设置时也可以设置频率

    toggleClass(funtion(i,c,s) {} switch)      在匿名函数设置时传递三个参数

    .toggleClass()方法的第二个参数可以传一个布尔值,ture表示切换到class类,false表示返回默认class类,这个特性可以用来设置切换频率。

    var count = 0;

    $('div').click(function() {

      $(this.toggleClass('red',count++%3 == 0));

    });

    样式1和样式2的切换方法1:

    $('div').click(function() {

      //只是click的局部,又是toggleClass的全局

      $(this).toggleClass('red');      //切换到样式2 

      if($(this).hasClass('red')) {      //判断样式2存在后

        $(this).removeClass('blue');    //删除样式1

      } else {

        $(this).toggleClass('blue');    //添加样式1,这里也可以用addClass

      }

    });

    样式1和样式2切换方法2:

    $('div').click(function() {

      //局部

      $(this).toggleClass(function () {

        if($(this).hasClass('red')) {

          $('this').removeClass('red');

          return 'green';

        } else {

          $(this).removeClass('green');

          return red;

        }

      });

    });

    方法2比方法1更好

    四、CSS方法

    width()               获取某个元素的宽度  返回的类型是number

    width(value)           设置某个元素的宽度   直接传数值,默认加px

    width(function (index,value) {})   通过匿名函数设置某个元素的宽度 

    height()               获取某个元素的高度

    height(value)           设置某个元素的高度

    height(functiong (index, value) {})   通过匿名函数设置某个元素的高度

    innerWidth()    获取某个元素的宽度,包含内边距padding

    innerHeight()     获取某个元素的高度,包含内边距padding

    overWidth()    获取某个元素的宽度,包含边框border和内边距padding

    overHeright()    获取某个元素的高度,包含边框border和内边距padding

    overWidth(true)  获取某个元素的宽度,包含边框border、内边距padding和外边距margin

    overHeight(true)   获取某个元素的高度,包含边框border、内边距padding和外边距margin

    offset()          获取某个元素相对视口的偏移量

    position()      获取某个元素相对于父元素的偏移量

    scrollTop()    获取垂直滚动条的值

    scrollTop(value)   设置垂直滚动条的值

    scrollLeft()    获取水平滚动条的值

    scrollLeft(value)   设置水平滚动条的值

  • 相关阅读:
    【luogu P4139】 上帝与集合的正确用法
    pb_ds学习
    【luogu P3868】 [TJOI2009]猜数字
    BZOJ3040: 最短路(road)
    【luogu P1064】 金明的预算方案
    【luogu P2893】 [USACO08FEB]修路Making the Grade
    【luogu P2801】 教主的魔法
    UVA10816 Travel in Desert
    P2916 [USACO08NOV]安慰奶牛Cheering up the Cow
    【BZOJ 2054】 疯狂的馒头
  • 原文地址:https://www.cnblogs.com/IceSnova/p/7113490.html
Copyright © 2020-2023  润新知