jQuery 基础DOM和CSS操作

跟風遠走 提交于 2020-03-18 01:15:23

一、设置元素及内容

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)   设置水平滚动条的值

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!