jQuery回顾（二）

window.onload = function () {
    //getElementById返回单独一个Dom对象，如果id为btn1的元素不存在，则点击按钮报错
    document.getElementById('btn1').onclick = function () {
    	alert('hello');
    };
};

$(function () {
    alert($('#btn1').length);//0
    //即便选择器没有选择到任何元素，那么返回的也不是null或者是undefined，而是一个长度为0的集合对象，因此不会报错
    $('#btn1').click(function () {
        alert('hello');
    });
    
    if($('#btn1').length > 0) {
        alert('页面上存在该元素！');
    } else {
        alert('页面上不存在该元素！');
    }
});

$('#btn')[0];//访问第0个dom对象
$('#btn').get(1);//如果jQuery对象选择了多个dom，如p标签，则可以通过索引访问第n个dom对象

$('body').addClass('night');//追加应用一个新的样式，不会覆盖之前的样式

$('body').removeClass('night');//移除样式

//判断一个元素是否应用了某个样式
if ($('body').hasClass('night')) {
    //移除样式
    $('body').removeClass('night');
} else {
    //增加样式
    $('body').addClass('night');
}

$('body').toggleClass('night');//等价于上述元素是否应用样式的代码

$('#btn').click(function () {
    $('p:first').css('backgroundColor', 'red');//设置第一个p元素的背景色为红色
    
    $('p:last').css('backgroundColor', 'red');//设置最后一个p元素的背景色为红色
    
    $('p:eq(1)').css('backgroundColor', 'red');//设置第二个p元素的背景色为红色，eq表示索引，下标从0开始
    
    $('p:even').css('backgroundColor', 'blue');//设置索引为偶数的p元素，背景颜色为蓝色
    
    $('p:odd').css('backgroundColor', 'yellow');//设置索引为奇数的p元素，背景色为黄色
    
    $('p:gt(2)').css('backgroundColor', 'green');//索引大于2的p元素，设置背景色为绿色
    
    $('p:lt(3)').css('backgroundColor', 'blue');//索引小于3的p元素，设置背景色为蓝色
    
    $('p:not(.cls)').css('backgroundColor', 'pink');//选取页面上的p元素，除了应用了cls类的，设置背景色为粉色
    
    $(':header').css('backgroundColor', 'red');//设置所有标题都变成红色
});

$('#t1 tr').click(function () {
    $('td:even', this).css('backgroundColor', 'blue');//当前对象中，索引序号为偶数的td
    $('td:odd', this).css('backgroundColor', 'red');
});

//1.选取所有input元素中具有name属性的，并且name属性的值等于txt1
$('input[name=txt1]');

//2.选取所有input元素，具有name属性（无论name属性值为什么）
$('input[name]');

//3.选取所有body下面具有name属性的元素
$('body *[name]');
$('body [name]');

//4.选取页面上具有name属性，同时name属性的值为以a开头的
$('body *[name^=a]');
//选取name为""的元素
$('body *[name=]');

//5.选取以a结尾的
$('body *[name$=a]');

//6.name属性中包含a的
$('body *[name*=a]');

//7.name属性不等于abc的
$('body *[name!=abc]');

//8.同时具有多个属性的
$('body *[name][id][value]');

//选取页面上所有被禁用的元素
$(':disabled');
//选取页面上所有没有被禁用的元素
$(':enabled');

//选取form1下的所有被禁用的元素
$('#form1 :disabled');
//选取form1下的所有没有被禁用的元素
$('#form1 :enabled');

//选取页面上所有的input元素，同时必须是被禁用的元素
$('input:disabled');
//选取页面上所有的input元素，同时必须是没有被禁用的元素
$('input:enabled');

//获取所有被选中的Checkbox和radio（只有Checkbox和radio有checked属性）
$(':checked');
//所有没有被选中的元素
$('div :not(:checked)');

$(function () {
    //为每个checkbox注册单击事件
    $('input[type=checkbox]').click(function () {
        //1.获取当前所有被选中的checkbox
        var chks = $('input[type=checkbox]:checked');
        
        //2.获取个数
        var n = chks.length;
        
        //3.获取每个checkbox的value（只能手动遍历）
        //遍历把每一个checkbox的value放到一个数组中
        var names = [];
        $.each(chks, function (k, chkObj) {
            names[names.length] = $(chkObj).val();
        });
        
        //4.把个数和值显示到p中
        $('#pmsg').text('共选中了' + n + '项，分别是' + names.toString());
    });
});

//选取页面上所有的checkbox
$('input[type=checkbox]');//属性过滤选择器
$(':checkbox');//简写，选取页面上所有的checkbox

//选取页面上所有的radio
$(':radio');
//选取页面上所有的单行文本框
$(':text');
//选取页面上所有密码框
$(':password');
//选取页面上所有的hidden
$(':hidden');
//选取页面上选中的复选框
$(':checkbox:checked');

$('input');//表示所有<input>、<textarea>、<select>和<button>元素
$(':input')//只获得<input>

//1.动态创建一个超链接
var aLinkObj = $('<a href="http://www.baidu.com">百度</a>');
//2.div把将超链接添加到div后面
$('#dv1').append(aLinkObj);
//$('#dv1').prepend(aLinkObj);//div添加超链接到div前面

//超链接追加到div后面
$('<a href="http://www.baidu.com">百度</a>').appendTo('#dv1');
//$('<a href="http://www.baidu.com">百度</a>').prrpendTo('#dv1');//主动追加到div前面

var websites = {
    '百度': 'http://www.baidu.com',
    '新浪': 'http://www.sina.com.cn',
    '搜狐': 'http://www.sohu.com',
    '网易': 'http://www.163.com'
};

$(function () {
    //点击按钮，动态创建表格
    $('#btn').click(function () {
        //动态创建表格
        var tblObj = $('<table border="1"></table>').appendTo('body');
        //动态创建表格的行
        for (var key in websites) {
            $('<tr><td>' + key + '</td><td><a href="' + websites[key] + '">' + key + '</a></td></tr>').appendTo(tblObj);
        }
    });
});

//清空元素
$('#btnEmpty').click(function () {
    var dvObj = $('#dv1');
    dvObj.empty();//删除div内部的所有内容
});

//删除元素
$('#btnRemove').click(function () {
    $('#dv1').remove();//直接把元素删除
});

var sec = 4;
$(function () {
    var intervalId = setInterval(function () {
        if (sec > 0) {
            $('#btn').val('请仔细阅读协议（' + sec + '）');
            sec--;
        } else {
            $('#btn').val('同意').prop('disabled', false);
            //停止计时器
            clearInterval(intervalId);
        }
    }, 1000);
});

$(function () {
    $('#btn').click(function () {
        //先使用选择器选到对应的元素，然后使用指定的元素对象来替换选择到的元素
        $('hr').replaceWith('<a href="#">百度</a>');//把水平线替换成超链接
    });
});

$(function () {
    $('#btn').click(function () {
        //首先动态创建一个元素，用该元素替换所有指定的选择器选择到的元素
        $('<font color="red">==========</font>').replaceAll('hr');//动态创建一个font元素，替换所有的水平线
    });
});

//包裹到元素外部
$('p').wrap('<font color="blue"></font>');//在p元素外部用font标签包裹

//包裹到元素内部
$('p').wrapInner('<font color="red"></font>');//在p元素内部包裹font标签

//包裹所有的
$('p').wrapAll('<font color="red"></font>');//所有的p标签使用一个标签来包裹