• 不能添加多个入口函数（window.onload）,如果添加了多个，后面的会把前面的给覆盖。
• 原生 js 的 api 名字都太长太难记。
• 原生 js 有的时候代码冗余。
• 原生 js 中有些属性或者方法，有浏览器兼容问题。
• 原生 js 容错率比较低，前面的代码出了问题，后面的代码执行不了。

针对 jQuery 的优化方法

*频繁操作的 DOM，先缓存起来再操作。用 Jquery 的链式调用更好。

jquery 的优点

• 是可以写多个入口函数的。
• jQuery 的 api 名字都容易记忆。
• jQuery 代码简洁（隐式迭代）。
• jQuery 帮我们解决了浏览器兼容问题。
• 容错率较高，前面的代码出来了问题，后面的代码不受影响。

入口函数

  $(document).ready(function () {
    console.log("我又是一个入口函数");
  });

$(function () {
});

更简略的写法

属性设置

设置边框

    $('#btn0ne').click(function () {
      $('div').css('border','1px solid red');
    });

设置文本

    $('#btnTwo').click(function () {
      $('div').text('我是设置的文本');
    });

采用链式

$('div').width(100).height(100).css('backgroundColor','red').text('哈哈');

按钮点击

    $('#getBtn').click(function () {
      console.log($('div').text());
    });

单击 id=getBtn 的按钮的事件

会获取到这个标签中所有的文本,包括后代元素的文本.

包含了多个 dom 元素的 jQuery 对象,通过 text()方法获取文本,会把所有 dom 元素的文本获取到.

$('div').text('设置的文本'); //隐式迭代.

传入参数就是设置

设置 css 样式

      console.log($('div').css('width'));//'200px'
      //注意：获取样式操作只会返回第一个元素对应的样式值。

给所有标签设置样式

      $('div').css({
        width: 300,
        'height': '300px',
        'background-color': 'green',
        'border': '10px solid red',
        marginTop:10
      });
      //隐式迭代,把每一个div都设置了同样的样式.

获取元素

设置选择器

获取 id 为 father 这个 div 的所有后代 div,以及 id 为 father 这个 div 的所有后代 span.

    console.log($('#fahter div , #father span'));

设置奇数行 li 标签颜色为天蓝色.

    $('li:odd').css('backgroundColor','skyblue');

类

给 id 为 div1 的元素添加类.（多个）

 $('#div1').addClass('fontSize30 width200');

removeClass 移除

hasClass 判断

toggleClass 切换（如果元素有某个类就移除这个类, 如果元素没有这类就添加这个类.）

添加元素

追加节点

    $('#btn1').click(function () {
      var $link = $('<a href="http://news.baidu.com/">我是新闻</a>');
      $('#div1').append($link);
    });

       $('#j_tbData').html(list.join(""));

添加节点

var $liNew = $("<li>我是新创建的li标签</li>");
 $('#ul1').append($liNew);

元素 A.before(元素 B); 把元素 B 插入到元素 A 的前面,作为兄弟元素添加

      var $divNew = $('<div>我是新建的div</div>');
      $('#ul1').before($divNew);

清空元素

1.清空 ul.

$('#ul1').empty();

2.移除某一个元素.

$('#li3').remove();

3.移除 ul.但是只能获取 li3 这个标签.

$('#li3').parent().remove();

显示和隐藏

        $('#j_btnAddData').click(function () {
            $('#j_formAdd').show();
            $('#j_mask').show();
        });

        $('#j_hideFormAdd').click(function () {
            $('#j_formAdd').hide();
            $('#j_mask').hide();
        });

获取当前属性

获取当前点击的 a 标签的 href 属性的值和 title 属性的值。

var srcValue = $(this).attr('href');

选中与未选中

如果多选框是选中状态返回一个 true； 如果多选框是取消选中状态那返回就是一个 false

 console.log($('#ckb1').prop('checked'));

迭代

    $lis.each(function (index,element) {
      // console.log(index); //每一个li标签的索引
      // console.log(element);//每一个li标签,是一个dom对象.

      $(element).css('opacity',(index+1)/10);
    });