JavaScript学习笔记[2]

JavaScript学习笔记[2]

jQuery

  • 选择器

    • id查找,没有找到返回空数组,使用#
    // 查找<div id="abc">:
    var div = $('#abc');
    
    • tag查找
    var ps = $('p'); // 返回所有<p>节点
    ps.length; // 数一数页面有多少个<p>节点
    
    • class查找,使用.
    var a = $('.red.green'); // 注意没有空格!
    // 符合条件的节点:
    // <div class="red green">...</div>
    // <div class="blue green red">...</div>
    
    • 属性查找
    var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM
    // 例如: name="icon-1", name="icon-2"
    var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM
    // 例如: name="startswith", name="endswith"
    
    • 组合查找
    var tr = $('tr.red'); // 找出<tr class="red ...">...</tr>
    
    • 多项选择器,用,组合起来一块选
    $('p,div'); // 把<p>和<div>都选出来
    $('p.red,p.green'); // 把<p class="red">和<p class="green">都选出来
    
  • 层级选择器

    • 样本
    <!-- HTML结构 -->
    <div class="testing">
        <ul class="lang">
            <li class="lang-javascript">JavaScript</li>
            <li class="lang-python">Python</li>
            <li class="lang-lua">Lua</li>
        </ul>
    </div>
    
    • $('ancestor descendant') 层级之间用空格隔开
    $('ul.lang li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]
    $('div.testing li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]
    
    • $('parent>child') 子选择器。child必须是parent的直属子节点
    $('ul.lang>li.lang-javascript'); // 可以选出[<li class="lang-javascript">JavaScript</li>]
    $('div.testing>li.lang-javascript'); // [], 无法选出,因为<div>和<li>不构成父子关系
    
    • filter 过滤器
    $('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点
    
    $('ul.lang li:first-child'); // 仅选出JavaScript
    $('ul.lang li:last-child'); // 仅选出Lua
    $('ul.lang li:nth-child(2)'); // 选出第N个元素,N从1开始
    $('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
    $('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素
    
    • 表单相关
      • :input:可以选择input,textarea,select和button;

      • :file:可以选择input type="file",和input[type=file]一样;

      • :checkbox:可以选择复选框,和input[type=checkbox]一样;

      • :radio:可以选择单选框,和input[type=radio]一样;

      • :focus:可以选择当前输入焦点的元素,例如把光标放到一个input上,用$('input:focus')就可以选出;

      • :checked:选择当前勾上的单选框和复选框,用这个选择器可以立刻获得用户选择的项目,如$('input[type=radio]:checked');

      • :enabled:可以选择可以正常输入的input、select
        等,也就是没有灰掉的输入;

      • :disabled:和:enabled正好相反,选择那些不能输入的。

  • 查找和过滤

    • find(),parent(),next(),prev()
    • 用jQuery获得JSON字符串
    <form id="test-form" action="#0" onsubmit="return false;">
    <p><label>Name: <input name="name"></label></p>
    <p><label>Email: <input name="email"></label></p>
    <p><label>Password: <input name="password" type="password"></label></p>
    <p>Gender: <label><input name="gender" type="radio" value="m" checked> Male</label> <label><input name="gender" type="radio" value="f"> Female</label></p>
    <p><label>City: <select name="city">
        <option value="BJ" selected>Beijing</option>
        <option value="SH">Shanghai</option>
        <option value="CD">Chengdu</option>
        <option value="XM">Xiamen</option>
    </select></label></p>
    <p><button type="submit">Submit</button></p>
    </form>
    
    var json = null;
    var obj = {};
    $('#test-form :input:not(button)')
        .map(function() {
            if(this.name==='gender' && !this.checked) {
                return;
            }
            obj[this.name] = this.value;
        });
    json = JSON.stringify(obj);
    
    // 显示结果:
    if (typeof(json) === 'string') {
        alert(json);
    }
    else {
        alert('json变量不是string!');
    }
    
  • 操作DOM

    • 修改Text和HTML,text(),html()

    • 修改CSS,css(),addClass(),hasClass(),removeClass()

    • 显示和隐藏DOM,hide(),show()

    • 获取DOM,prop(),attr(),is() 对checked值的处理

    // <div id="test-div" name="Test" start="1">...</div>
    var div = $('#test-div');
    div.attr('data'); // undefined, 属性不存在
    div.attr('name'); // 'Test'
    div.attr('name', 'Hello'); // div的name属性变为'Hello'
    div.removeAttr('name'); // 删除name属性
    div.attr('name'); // undefined
    
  • 操作表单,val()

  • 添加DOM,append(),prepend(),同级节点可以用after(),before()

  • 删除节点,remove()

  • 事件

    • 鼠标事件

      • click: 鼠标单击时触发;
      • dblclick:鼠标双击时触发;
      • mouseenter:鼠标进入时触发;
      • mouseleave:鼠标移出时触发;
      • mousemove:鼠标在DOM内部移动时触发;
      • hover:鼠标进入和退出时触发两个函数,相当于mouseenter加上mouseleave。
    • 键盘事件

      • 键盘事件仅作用在当前焦点的DOM上,通常是input和textarea。
      • keydown:键盘按下时触发;
      • keyup:键盘松开时触发;
      • keypress:按一次键后触发。
    • 其他事件

      • focus:当DOM获得焦点时触发;
      • blur:当DOM失去焦点时触发;
      • change:当input、select或textarea的内容改变时触发;
      • submit:当
        提交时触发;
      • ready:当页面被载入并且DOM树完成初始化后触发。
  • 事件参数

  • 取消绑定

function hello() {
    alert('hello!');
}

a.click(hello); // 绑定事件

// 10秒钟后解除绑定:
setTimeout(function () {
    a.off('click', hello);
}, 10000);
  • 事件触发条件 change()

  • 全选反选

<!-- HTML结构 -->
<form id="test-form" action="test">
    <legend>请选择想要学习的编程语言:</legend>
    <fieldset>
        <p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全选</span><span class="deselectAll">全不选</span></label> <a href="#0" class="invertSelect">反选</a></p>
        <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
        <p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
        <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
        <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
        <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
        <p><button type="submit">Submit</button></p>
    </fieldset>
</form>


var
    form = $('#test-form'),
    langs = form.find('[name=lang]'),
    selectAll = form.find('label.selectAll :checkbox'),
    selectAllLabel = form.find('label.selectAll span.selectAll'),
    deselectAllLabel = form.find('label.selectAll span.deselectAll'),
    invertSelect = form.find('a.invertSelect');

// 重置初始化状态:
form.find('*').show().off();
form.find(':checkbox').prop('checked', false).off();
deselectAllLabel.hide();
// 拦截form提交事件:
form.off().submit(function (e) {
    e.preventDefault();
    alert(form.serialize());
});

function refresh() {
  let full = (langs.filter(':checked').length == langs.length);
  if (full) {
    selectAllLabel.hide();
    deselectAllLabel.show();
    selectAll.prop('checked', true);
  } else {
    selectAllLabel.show();
    deselectAllLabel.hide();
    selectAll.prop('checked', false);
  }
}
selectAll.on('click', function () {
  langs.prop('checked', selectAll.prop('checked'));
  refresh();
});
invertSelect.on('click', function () {
  let c1 = langs.filter(':checked');
  langs.prop('checked', true);
  c1.prop('checked', false);
  refresh();
});
  • 动画

    • show(),hide(),toggle()
    • slideUp(),slideDown(),slideToggle()
    • fadeIn(),fadeOut(),fadeToggle()
    • animate()
    • 串行动画,delay()
  • AJAX

  • jQuery, $.fn, $.extend(target,obj1,obj2,...),它把多个object对象的属性合并到第一个target对象中,遇到同名属性,总是使用靠后的对象的值,也就是越往后优先级越高:

$.fn.highlight1 = function () {
    // this已绑定为当前jQuery对象:
    this.css('backgroundColor', '#fffceb').css('color', '#d85030');
    return this;
}

$.fn.highlight2 = function (options) {
    // 要考虑到各种情况:
    // options为undefined
    // options只有部分key
    var bgcolor = options && options.backgroundColor || '#fffceb';
    var color = options && options.color || '#d85030';
    this.css('backgroundColor', bgcolor).css('color', color);
    return this;
}

$.fn.highlight = function (options) {
    // 合并默认值和用户设定值:
    var opts = $.extend({}, $.fn.highlight.defaults, options);
    this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
    return this;
}

// 设定默认值:
$.fn.highlight.defaults = {
    color: '#d85030',
    backgroundColor: '#fff8de'
}
  • 特定元素的扩展,external扩展
$.fn.external = function () {
    // return返回的each()返回结果,支持链式调用:
    return this.filter('a').each(function () {
        // 注意: each()内部的回调函数的this绑定为DOM本身!
        var a = $(this);
        var url = a.attr('href');
        if (url && (url.indexOf('http://')===0 || url.indexOf('https://')===0)) {
            a.attr('href', '#0')
             .removeAttr('target')
             .append(' <i class="uk-icon-external-link"></i>')
             .click(function () {
                if(confirm('你确定要前往' + url + '?')) {
                    window.open(url);
                }
            });
        }
    });
}

posted on 2017-08-28 11:10  炮二平五  阅读(201)  评论(0编辑  收藏  举报

导航