JQ 操作属性内容篇

JQ操作DOM

获取元素

• js写法：getElementxxxx等方法, querySelector等方法
• jq写法: $(“选择器”)

操作元素内容

• js写法: innerHTML, innerText, textContent, value

• jq写法: html(), text(), val()

  jq对象.html() 相当于innerHTML

  jq对象.text() 相当于innerText

  jq对象.val() 相当于value

  注：

  1. html()在设置时, 如果jq对象里有多个dom元素, 都设置上值; 如果内容里有htmlstring, 直接被解析成标签; 在获取时, 如果jq对象里有多个dom元素, 只获取第一个dom元素的内容;
  2. text()在设置时, 如果jq对象里有多个dom元素, 都设置上值; 如果内容里有htmlstring, 原样输出, 不会解析成标签; 在获取时, 如果jq对象里有多个dom元素, 获取所有dom元素里的文本内容;
  3. val()在设置时, 如果jq对象里有多个dom元素, 都设置上值; 在获取时, 如果jq对象里有多个dom元素, 只获取第一个dom元素的值;

  $("#p1").html("这是段落1标签");
  $("ul li").html("这是li元素");
  $("#p2").html("<a href='###'>超链接</a>");
  
  $("input:eq(0)").val("默认值1");
  $("input:eq(1)").val("默认值2");
  

操作元素样式

• js写法: 通过style属性设置和获取; 通过getComputedStyle获取
• jq写法: 通过css()方法设置/获取jq对象的样式

操作元素的属性

• js写法: 直接通过点语法设置或者获取; 通过getAttribute或者setAttribute获取或者设置

• jq写法: attr()和prop()

  attr() attribute–属性

  prop() property–属性,财产

  以上两个方法都可以操作jq对象的属性, 即可设置, 也可获取

  // attr()方法
   设置属性:
   1.设置单个属性
   语法:
   	jq对象.attr("属性名", "属性值");
   
   2. 一次设置多个属性
   	语法:
   	 jq对象.attr({
   		属性名1:"属性值1",
        属性名2:"属性值2",
   		...
   	 })
   3. 获取属性值
   	语法:
  	 jq对象.attr("属性名");
   	 返回值: 对应的属性值
   
  //注意: 如果jq对象里有多个dom元素, 在设置属性时, 都设置上; 如果获取时, jq对象里有多个元素, 只获取第一个dom元素的属性值
       
  //例
    $("img:eq(0)").attr("src", "img/1.png");
      $("img:eq(1)").attr({
          src:"img/2.jpeg",
          alt:"图片2",
          class:"cimg",
          id:"img2"
      });
      
  
  // prop()方法
    1. 设置单个属性
    	语法:
    	 jq对象.prop("属性名", "属性值");
    
    2. 设置多个属性
    	语法:
    	 jq对象.prop({
    		属性名1:"属性值1",
    		属性名2:"属性值2",
    		...
    	 })
    
    3. 获取属性值
    	 语法:
    	  jq对象.prop("属性名")
    	  返回值: 对应属性值
    
   //注意: 如果jq对象里有多个dom元素, 在设置属性时, 都设置上; 如果获取时, jq对象里有多个元素, 只获取第一个dom元素的属性值
  //例
  $("img:eq(0)").prop("src", "img/1.png");
  $("img:eq(1)").prop({
      src:"img/2.jpeg",
      alt:"图片666"
  });
  

• attr()和prop()的区别:

  1. attr()的原生内部js实现可能是getAttribute()和setAttribute(); prop()的原生内部实现是点语法

  2. attr()建议操作自定义属性; prop()建议操作系统属性

  3. 如果遇到属性名和属性值相同的属性, 建议操作时用prop

动态操作元素（创建，插入，删除）

• js写法:

  创建:createElement(), 插入:appendChild()/insertBefore(), 删除: removeChild()

JQ对象绑定事件

• $("#btn4").click(function(){
      //alert("按钮被点击了!");
      /*
  	 * this代指的是html元素或者方法所属的对象
  	 * jq绑定的事件, 触发后里的this, 代指的还是dom元素, 而不是jq对象
       */
      console.log(this);
      //this.style.backgroundColor = "red";
      $(this).css("background-color", "red");
  });