javascript之jquery DOM操作-数据库如何使用boolean-程序博客网

[javascript] view plaincopy

var $para = $("p"); // 获取节点
var $li = $("ul li:eq(1)"); // 获取第二个<li>元素节点
var p_txt = $para.attr("title"); // 输出元素节点属性title
var ul_txt = $li.attr("title"); // 获取<ul>里的第二个<li>元素节点的属性title
var li_txt = $li.text(); // 输出第二个<li>元素节点的text
alert(ul_txt);
alert(li_txt);
alert(p_txt);

[javascript] view plaincopy

var $li_1 = $("<li></li>"); // 创建第一个<li>元素
var $li_2 = $("<li></li>"); // 创建第二个<li>元素
var $parent = $("ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);
var $li_1 = $("<li>香蕉</li>"); // 创建一个<li>元素，包括元素节点和文本节点
//“香蕉”就是创建的文本节点。
var $li_2 = $("<li>雪梨</li>"); // 创建一个<li>元素，包括元素节点和文本节点
//“雪梨”就是创建的文本节点。
var $parent = $("ul"); // 获取<ul>节点。<li>的父节点
$("ul").append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$("ul").append($li_2); // 添加到<ul>节点中，使之能在网页中显示
var $li_1 = $("<li title='香蕉'>香蕉</li>"); //创建一个<li>元素
//包括元素节点,文本节点和属性节点
//其中title='香蕉' 就是创建的属性节点
var $li_2 = $("<li title='雪梨'>雪梨</li>"); //创建一个<li>元素
//包括元素节点,文本节点和属性节点
//其中title='雪梨' 就是创建的属性节点
var $parent = $("ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2); // 等价于：$parent.append($li_1).append($li_2);

[javascript] view plaincopy

var $li_1 = $("<li title='香蕉'>香蕉</li>"); // 创建第一个<li>元素
var $li_2 = $("<li title='雪梨'>雪梨</li>"); // 创建第二个<li>元素
var $li_3 = $("<li title='其它'>其它</li>"); // 创建第三个<li>元素
var $parent = $("ul"); // 获取<ul>节点，即<li>的父节点
var $two_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点
$parent.append($li_1); // append方法将创建的第一个<li>元素添加到父元素的最后面
$parent.prepend($li_2); // prepend方法将创建的第二个<li>元素添加到父元素里的最前面
$li_3.insertAfter($two_li); // insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后

[javascript] view plaincopy

var $one_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点
var $two_li = $("ul li:eq(2)"); // 获取<ul>节点中第三个<li>元素节点
$two_li.insertBefore($one_li); //移动节点

[javascript] view plaincopy

$("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。
var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。
$li.appendTo("ul"); // 把刚才删除的又重新添加到<ul>元素里
//所以，删除只是从网页中删除，在jQuery对象中，这个元素还是存在的，我们可以重新获取它
$("ul li").remove("li[title!=菠萝]"); //把<li>元素中属性title不等于"菠萝"的<li>元素删除
$("ul li").click(function(){
alert( $(this).html() );
})
var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。
$li.appendTo("ul");
$("ul li").click(function(){
alert( $(this).html() );
})
var $li = $("ul li:eq(1)").detach(); // 获取第二个<li>元素节点后，将它从网页中删除。
$li.appendTo("ul");
$("ul li:eq(1)").empty(); // 找到第二个<li>元素节点后，清空此元素里的内容

[javascript] view plaincopy

$("ul li").click(function(){
$(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素
})
$("ul li").click(function(){
$(this).clone(true).appendTo("ul"); // 注意参数true
//可以复制自己，并且他的副本也有同样功能。
})

[javascript] view plaincopy

$("p").replaceWith("你最不喜欢的水果是?");
// 同样的实现： $("你最不喜欢的水果是?").replaceAll("p");

[javascript] view plaincopy

$("strong").wrap("");//用元素把元素包裹起来
$("strong").wrap("");
$("strong").wrapAll("");
$("strong").wrapAll("");
$("strong").wrapInner("");

[javascript] view plaincopy

//设置元素的属性'title'
$("input:eq(0)").click(function(){
$("p").attr("title","选择你最喜欢的水果.");
});
//获取元素的属性'title'
$("input:eq(1)").click(function(){
alert( $("p").attr("title") );
});
//删除元素的属性'title'
$("input:eq(2)").click(function(){
$("p").removeAttr("title");
});

[javascript] view plaincopy

//获取样式
$("input:eq(0)").click(function(){
alert( $("p").attr("class") );
});
//设置样式
$("input:eq(1)").click(function(){
$("p").attr("class","high");
});
//追加样式
$("input:eq(2)").click(function(){
$("p").addClass("another");
});
//删除全部样式
$("input:eq(3)").click(function(){
$("p").removeClass();
});
//删除指定样式
$("input:eq(4)").click(function(){
$("p").removeClass("high");
});
//重复切换样式
$("input:eq(5)").click(function(){
$("p").toggleClass("another");
});
//判断元素是否含有某样式
$("input:eq(6)").click(function(){
alert( $("p").hasClass("another") )
alert( $("p").is(".another") )
});

[javascript] view plaincopy

//获取元素的HTML代码
$("input:eq(0)").click(function(){
alert( $("p").html() );
});
//获取元素的文本
$("input:eq(1)").click(function(){
alert( $("p").text() );
});
//设置元素的HTML代码
$("input:eq(2)").click(function(){
$("p").html("你最喜欢的水果是?");
});
//设置元素的文本
$("input:eq(3)").click(function(){
$("p").text("你最喜欢的水果是?");
});
//设置元素的文本
$("input:eq(4)").click(function(){
$("p").text("你最喜欢的水果是?");
});
//获取按钮的value值
$("input:eq(5)").click(function(){
alert( $(this).val() );
});
//设置按钮的value值
$("input:eq(6)").click(function(){
$(this).val("我被点击了!");
});
$("#address").focus(function(){ // 地址框获得鼠标焦点
var txt_value = $(this).val(); // 得到当前文本框的值
if(txt_value=="请输入邮箱地址"){
$(this).val(""); // 如果符合条件，则清空文本框内容
}
});
$("#address").blur(function(){ // 地址框失去鼠标焦点
var txt_value = $(this).val(); // 得到当前文本框的值
if(txt_value==""){
$(this).val("请输入邮箱地址");// 如果符合条件，则设置内容
}
})
$("#password").focus(function(){
var txt_value = $(this).val();
if(txt_value=="请输入邮箱密码"){
$(this).val("");
}
});
$("#password").blur(function(){
var txt_value = $(this).val();
if(txt_value==""){
$(this).val("请输入邮箱密码");
}
})
$("#address").focus(function(){ // 地址框获得鼠标焦点
var txt_value = $(this).val(); // 得到当前文本框的值
if(txt_value==this.defaultValue){
$(this).val(""); // 如果符合条件，则清空文本框内容
}
});
$("#address").blur(function(){ // 地址框失去鼠标焦点
var txt_value = $(this).val(); // 得到当前文本框的值
if(txt_value==""){
$(this).val(this.defaultValue);// 如果符合条件，则设置内容
}
})
$("#password").focus(function(){
var txt_value = $(this).val();
if(txt_value==this.defaultValue){
$(this).val("");
}
});
$("#password").blur(function(){
var txt_value = $(this).val();
if(txt_value==""){
$(this).val(this.defaultValue);
}
})
//设置单选下拉框选中
$("input:eq(0)").click(function(){
$("#single").val("选择2号");
});
//设置多选下拉框选中
$("input:eq(1)").click(function(){
$("#multiple").val(["选择2号", "选择3号"]);
});
//设置单选框和多选框选中
$("input:eq(2)").click(function(){
$(":checkbox").val(["check2","check3"]);
$(":radio").val(["radio2"]);
});
//设置单选下拉框选中
$("input:eq(0)").click(function(){
$("#single option").removeAttr("selected"); //移除属性selected
$("#single option:eq(1)").attr("selected",true); //设置属性selected
});
//设置多选下拉框选中
$("input:eq(1)").click(function(){
$("#multiple option").removeAttr("selected"); //移除属性selected
$("#multiple option:eq(2)").attr("selected",true);//设置属性selected
$("#multiple option:eq(3)").attr("selected",true);//设置属性selected
});
//设置单选框和多选框选中
$("input:eq(2)").click(function(){
$(":checkbox").removeAttr("checked"); //移除属性checked
$(":radio").removeAttr("checked"); //移除属性checked
$("[value=check2]:checkbox").attr("checked",true);//设置属性checked
$("[value=check3]:checkbox").attr("checked",true);//设置属性checked
$("[value=radio2]:radio").attr("checked",true);//设置属性checked
});

[javascript] view plaincopy

var $body = $("body").children();
var $p = $("p").children();
var $ul = $("ul").children();
alert( $body.length ); // <body>元素下有2个子元素
alert( $p.length ); // 元素下有0个子元素
alert( $ul.length ); // 元素下有3个子元素
for(var i=0;i< $ul.length;i++){
alert( $ul[i].innerHTML );
}
var $p1 = $("p").next();
alert( $p1.html() ); // 紧邻元素后的同辈元素
var $ul = $("ul").prev();
alert( $ul.html() ); // 紧邻<ul>元素前的同辈元素
var $p2 = $("p").siblings();
alert( $p2.html() ); // 紧邻元素的唯一同辈元素
$(document).bind("click", function (e) {
$(e.target).closest("li").css("color","red");
})
//parent
$("input:eq(0)").click(function(){
resetStyle();
$('.item-1').parent().css('background-color', 'red');
});
//parents
$("input:eq(1)").click(function(){
resetStyle();
$('.item-1').parents('ul').css('background-color', 'red');
});
//closest
$("input:eq(2)").click(function(){
resetStyle();
$('.item-1').closest('ul').css('background-color', 'red');
});
function resetStyle(){
$("*").removeAttr("style");
}

[javascript] view plaincopy

//获取元素的color
$("input:eq(0)").click(function(){
alert( $("p").css("color") );
});
//设置元素的color
$("input:eq(1)").click(function(){
$("p").css("color","red")
});
//设置元素的fontSize和backgroundColor
$("input:eq(2)").click(function(){
$("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"})
});
//获取元素的高度
$("input:eq(3)").click(function(){
alert( $("p").height() );
});
//获取元素的宽度
$("input:eq(4)").click(function(){
alert( $("p").width() );
});
//获取元素的高度
$("input:eq(5)").click(function(){
$("p").height("100px");
});
//获取元素的宽度
$("input:eq(6)").click(function(){
$("p").width("400px");
});
//获取元素的的左边距和上边距
$("input:eq(7)").click(function(){
var offset = $("p").offset();
var left = offset.left;
var top = offset.top;
alert("left:"+left+";top:"+top);
});

javascript之jquery DOM操作

查找节点

创建节点

插入节点

移动节点

删除节点

复制节点

替换节点

包裹节点

属性操作

样式操作

设置和获取HTML,文本和值

遍历节点树

CSS-DOM