首页 > 代码库 > 步步为营-56-JQuery基础

步步为营-56-JQuery基础

jQuery本质还是封装好的js,只不过代码更简洁,而做的更好

使用JQuery选择器会返回一个jQuery对象,其本质是dom数组,jQuery对象可以调用JQuery方法.

1 基本选择器

  1.1 id选择器

    jquery   ==>    $(‘#btnShow‘);

    js      ==>    document.getElementById(‘btnShow‘);

  1.2 标签选择器

          jquery   ==>   $(‘img‘);
          js      ==>    document.getElementsByTagName(‘img‘);

  1.3 类选择器

     js      ==>    document.getElementsByClassName(‘test‘);

2 属性

  2.1 prop 表示HTML原有的属性

  2.2 attr 表示扩展属性(较常用)

  2.3 属性

    2.3.1 设置属性
         $(‘a‘).attr(‘href‘,‘http://www.baidu.com‘);

    2.3.2 移除属性

     $(‘a‘).removeAttr(‘href‘, ‘http://www.baidu.com‘);

    2.3.3 获取value属性的值比较特殊

    $(‘#btnShow‘).val();

    2.3.4 设置value属性的值比较特殊

    $(‘#btnShow‘).val(‘张三‘);

    

3 事件

  3.1 方式一 bind(事件类型,处理函数);

  3.2 方式二 事件类型(处理函数);  事件类型和DOM中的相同,去掉on前缀.

  3.3 绑定点击事件,去掉on,用括号

    $(‘#btnShow‘).click(function() {
            alert(‘匿名函数做参数‘);

    alert(this.value);//this是dom对象,不能调用jQuery方法
        });

  3.4 卸载事件

  unbind();//移除所有事件处理程序 

  unbind(‘clicke‘);//移除所有事件处理程序 

步步为营-56-JQuery基础