Idle Works, Idle Thoughts

jQuery 学习笔记

修改class:

$("#id").attr("class", "newc");

添加class:

$("#id").addClass("newc");
$("#id").addClass("newc disabled");

删除class:

$(".submit").removeClass("newc");    
$(".submit").removeClass("newc disabled");    

判断元素是否有一个class:

$(".type").hasClass("selected");

获取标签属性,如获取链接(<a href="http://">):

$(this).attr("href");

获取id:

$(this).attr("id");

判断元素是否存在:

if($("#id").length) {}

获取cookie的值:

$.cookie("name");

判断是否设置cookie:

if($.cookie("name") === null)

在元素后添加元素:

$("#id").append(content);

检查元素是否隐藏状态:

$(element).is(":visible") 

获取或设置一个元素的内容:

$(elem).text(cont)

$(elem).html(cont)

var cont = $(elem).text()

var cont = $(elem).html()

获取或设置input/textarea的内容:

$(elem).val(cont)

var cont = $elem.val()

当textarea的内容变化时…

$("textarea").change(function(){ })

注意,change()是当修改完毕,焦点移动到其他位置时触发的事件,如果要达到“边输入,边…”的效果,应该这样做:

$(".text").on("input", function(){});

on()可以绑定多个事件,以空格分隔事件即可,如:

$(".text").on("input change", function(){});    

获取或设置checkbox:

$(".lock").is(":checked");   

$(".lock").attr("checked", false);   
$(".lock").attr("checked", true);   

在提交表单时执行:

$("form").submit(function(e) {});
$(selector).submit(function(e) {});

遍历DOM元素

parents() - 向上回溯到HTML页面的根节点,找到所有父元素中的目标对象。

closest() - 向上回溯,直到找到第一个满足条件的父元素为止。

children() - 向下搜索一级DOM元素。注意只会搜索直接子元素。

find() - 向下搜索所有子元素。

例如:找到最近的一个.remark父元素下的.msg元素:

$(this).closest(".remark").find(".msg");

页面内跳转:回到顶部

如果无需任何动作直接跳页首,可以用JavaScript原生的scroll()函数:

scroll(0,0);

jQuery使用scrollTop(0)跳转到页首:

$('html,body').scrollTop(0);

可以通过animate()添加跳转动作:

$('html,body').animate({ scrollTop: 0 }, 'fast');

页面加载时自动跳转到anchor,用scrollTop()和offset()函数:

$(document).scrollTop($("#elem").offset().top);

重新加载一个页面,可以修改location变量,然后运行location.reload();

location = location.href.replace(/#.*/, "") + "#title";
location.reload();

动态创建元素并绑定事件

以前有段代码:

$(selector).click(function(e){});

但这个selector后来修改为动态创建的了,如:

$(function(){ /* create selector*/ })

这样就无法享用到前面绑定的.click()事件了。有2个方法解决这个问题:

/* live() 方法已不推荐,用on()替代 */

$(selector).live( eventName, function(){} );  

$(document).on( eventName, selector, function(){} );

例如:

$("body").on("click", ".save_refund", function(e){ /**/ });

练习:建立一个层级关系

从数据库获取一个层级关系,类似如下:

var ret = '{ "layout" : [' +
    '{ "id" : 0, "parent_id" : 0, "name" : "总部" }, ' +
    '{ "id" : 1, "parent_id" : 0, "name" : "后勤" }, ' +
    '{ "id" : 2, "parent_id" : 0, "name" : "产品" }, ' +
    '{ "id" : 3, "parent_id" : 0, "name" : "研发" }, ' +
    '{ "id" : 4, "parent_id" : 0, "name" : "测试" }, ' +
    '{ "id" : 5, "parent_id" : 2, "name" : "调研" }, ' +
    '{ "id" : 6, "parent_id" : 3, "name" : "云计算" }, ' +
    '{ "id" : 7, "parent_id" : 3, "name" : "大数据" }, ' +
    '{ "id" : 8, "parent_id" : 3, "name" : "推荐系统" }, ' +
    '{ "id" : 9, "parent_id" : 4, "name" : "自动化测试" }, ' +
    '{ "id" : 10, "parent_id" : 4, "name" : "Windows测试" }, ' +
    '{ "id" : 11, "parent_id" : 7, "name" : "Hadoop" }, ' +
    '{ "id" : 12, "parent_id" : 10, "name" : "Win10测试" } ]}';

逻辑关系如下:

jQuery levels

这里parent_id记录了父节点。通过这个逻辑关系,创建层级关系:

var layout = JSON.parse(ret);

jQuery.each(layout.layout, function (index, node) {
    var n = "<li id='node" + node.id + "'><span class='node'>" + node.name + "</span></li>";
    if (node.id !== 0) {
        $("#node" + node.parent_id).append(n);
    } else {
        $("#layout").append(n);
    }
});

新建立的层级,将填充于layout中:

<div id="layout">
</div>

为了凸显出层级关系,使用CSS控制样式:

li { margin:1em; }
li > li { margin-left:1.5em; }
功能:点击父节点,隐藏或展开子节点。
$("#node0").children("li").toggle();

$(".node").click(function(e){
  e.stopPropagation();
  $(this).parent("li").children("li").toggle();
});

这里的关键在于stopPropagation(),阻止事件向上(父节点)传播。否则,所有层级链上的所有.node节点,都会收到click事件。

功能:如果有子节点,就显示+,如果本身是叶子节点,就显示-

修改CSS的li显示:

li { margin:1em; list-style:none; }

判断是否有子节点,通过find().length判断:

$(".node").each(function(e) {
    if($(this).parent("li").find("li").length) {
        $(this).html("+ " + $(this).html());
    } else {
        $(this).html("- " + $(this).html());
    }
});