jq 杂

1.获取属性的方法

  attr();

$("img").attr("src");//获得img标签的src的属性值
$("img").attr("src","test.jpg");//给img标签的src属性赋值。
$("img").attr({ src: "test.jpg", alt: "Test Image" });//给img标签的多个属性赋值
$("img").attr("title", function() { return this.src });//可以写函数

  removeAttr();

$("img").removeAttr("src"); //移除img的src属性

2.对css的class的操作方法

  addClass();

$("p").addClass("selected");//给p标签添加selected添加class值
$("p").addClass("selected1 selected2");//给p标签添加多个class值得方法

  removeClass():

$("p").removeClass("selected");//删除selected的class值
$("p").removeClass();//删除所有的class值
$('li:last').removeClass(function() {//删除这个元素跟上一个元素的class共有的值
    return $(this).prev().attr('class');
});

  toggleClass();如果有这个class就去删除,如果没有就去添加

$("p").toggleClass("selected");//为匹配的元素切换 'selected' 类
$('div.foo').toggleClass(function() {//根据父元素来设置class属性
  if ($(this).parent().is('.bar') {
    return 'happy';
  } else {
    return 'sad';
  }
});

3.跟文本和HTML节点有关的

  html();

$('p').html();//获取p标签下的所有内容,包括文本和元素节点
$("p").html("Hello <b>world</b>!");//设置所有 p 元素的内容
$("p").html(function(n){
    return "这个 p 元素的 index 是:" + n;
});

  text();

$('p').text();//返回p元素的文本内容。
$("p").text("Hello world!");//设置所有 p 元素的文本内容

  val();

$("input").val();//获取文本框中的值
$("input").val("hello world!");//设定文本框的值

4.css

  css();

$("p").css("color");//获取p标签的color属性值
$("p").css("color","red");//将所有段落字体设为红色
$("p").css({ color: "#ff0011", background: "blue" });//将所有段落的字体颜色设为红色并且背景为蓝色。

5.位置

  offset():获取匹配元素在页面最左端的相对偏移。返回的对象包含两个整型属性:top 和 left。此方法只对可见元素有效。

console.log($("#test").offset());//{left:100,top:100}

  position(): 获取元素相对父元素(相对定位的元素)的偏移;此方法只对可见元素有效。

console.log($("#posi").position());//获取跟最近的父级(定位为relative)的偏移量

  scrollTop();获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。

var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );//获取第一段相对滚动条顶部的偏移
$("div.demo").scrollTop(300);//设置相对滚动条顶部的偏移

   scrollLeft();

var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );//获取第一段相对滚动条左侧的偏移
$("div.demo").scrollLeft(300);//设置相对滚动条左侧的偏移

6.尺寸

  height();

$("p").height();//获取p元素的高
$("p").height(20);//把所有段落的高设为 20:

  width();

$("p").width();//p元素的宽
$("p").width(20);//设置p元素的宽

  innerHeight();获取第一个匹配元素内部区域高度(包括padding、不包括border,margin)。此方法对可见和隐藏元素均有效。

var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );//获取第一个p元素的内部区域高度。

  innerWidth():获取第一个匹配元素内部区域宽度(包括padding、不包括border,margin)。此方法对可见和隐藏元素均有效。

var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );//获取第一个p元素的宽度

  outerHeight(): 获取匹配元素的外部高度(包括padding,border  但是不包括margin)此方法对可见和隐藏元素均有效。如果 里面参数是 true的话,最终值是包括margin的

var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );//第一个就是没有margin的值,第二个表示有margin的值

  outerWidth(): 获取匹配元素的外部高度(包括padding,border  但是不包括margin)此方法对可见和隐藏元素均有效。如果 里面参数是 true的话,最终值是包括margin的

var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );//第一个就是没有margin的值,第二个表示有margin的值

 

  

猜你喜欢

转载自www.cnblogs.com/web-chuan/p/9112795.html
JQ2