JQuery操作

---

jQuery中的DOM操作

样式操作

    添加样式  addClass()
	$(document).addClass('bg');

	删除样式  removeClass()
	$(document).removeClass('bg');

	是否包含样式  hasClass()
	$(document).hasClass('bg');

   切换样式 toggleClass()

 $('div').mouseover(function(){
            /* 添加样式 */
            // $(this).addClass('bg')
            /* 当你没有toggleClass参数里面的class的时候，你摸上去就会帮你addClass（添加样式） */
            $(this).toggleClass('fs td bg')
        })
        $('div').mouseout(function(){
            /* 移除样式 */
            /* removeClass 没有参数表示默认删除所有样式 ，加具体的class参数，
            表示删除指定的class类名 */
            // $(this).removeClass('bg')
              /* 当你存在toggleClass参数里面的class的时候，你摸上去就会帮你removeClass（移除样式） */
            $(this).toggleClass('fs td bg')
        })

内容及Value值操作

	html()  设置/获取内容和标签

  $('#div1').html('<h1>我爱和平</h1>');
  $('#div1').html()

	text() 获取/设置元素的文本内容
	text 和 innerText只能获取内容，获取不了元素

  $('#div1').text('<p>123</p>');
  $('#div1').text();

   //区别
  //1. html() 用于获取第一个匹配元素的HTML内容或文本内容
   console.log( $('h1').html() );
  //getElementsByTagName与html()相同
   console.log(document.getElementsByTagName('h1')[0].innerHTML);
  //2.html() 设置可以匹配所有的元素（可以设置多个）
   $('h1').html('我爱江苏');
  //js不可以设置所有匹配元素
  //document.getElementsByTagName('h1').innerHTML = 'WOAI';

  //1.text()用于获取所有匹配元素的文本内容
  console.log($('h1').text());
  //原生不可以获取所有匹配元素的文本内容
  //console.log(document.getElementsByTagName('h1').innerText);  显示undefined
  //2.text()用于设置所有匹配元素的文本内容
   $('h1').text('我爱红塔山');
  //原生不可以设置所有匹配元素的文本内容
  //document.getElementsByTagName('h1').innerText = '我爱95至尊';