jquery 使用jquery操作Dom

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery操作css</title>
<style type="text/css">

</style>
</head>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#searchtxt").focus(function(){//搜索框获取鼠标焦点
//把value值赋值给变量:
var textvalue=$(this).val();//得到当前文本框的值
if(textvalue=="电风扇"){//判断如果文本框值是电风扇就清空文本框值
$(this).val("");//设置成空 //val用于设定HTML内容的值//可以获取或设置元素的value属性值

}

});
//当我们失去焦点的时候,重新设置成电风扇
$("#searchtxt").blur(function(){
var textvalue=$(this).val();//获取文本框当前值
if(textvalue==""){
$(this).val("电风扇");//失去焦点还原值
}
});
});
</script>
<body>
<input name=""calss="search_txt" value="电风扇"id="searchtxt"></input>
<input type="button" class="search_bin"value="搜索"></input>
<body>
</html>

节点操作与属性操作!(一)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>节点操作</title>
<style type="text/css">
</style>
</head>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".contain :header").css({"background":"blue","color":"pink"});
var newnode="<li>你喜欢谁</li>"//将newnode追加的ul里面
$("ul").append(newnode);//在原来节点上新追加一个节点
var newnode2="<li>贝克汉姆</li>";
$("ul").prepend(newnode2);//在原来节点上新追加一个节点,前置操作
var newnode3="<li>张杰</li>";
$("ul").after(newnode3);//张杰在后面
$(newnode2).insertAfter("ul");//将贝克汉姆插入到ul之后(倒数第二个)
var newnode4="<li>谢娜</li>";
$("ul").before(newnode4);//插入到ul前面
$(".gamelist li:lt(3)").remove();//将节点小于3的删除
$(".gamelist li:lt(3)").empty();//将节点小于3的删除 */
var $newnode="<li>你喜欢哪些项目</li>"//新创建节点
// $(".gamelist li:eq(2)").replaceWith($newnode);//替换ul当中的第3个
//$($newnode).replaceAll(.gamelist li:eq(2));//替换ul当中的第3个
$(".gamelist li:eq(2)").click(function(){
$(this).clone(true).appendTo(".gamelist");//点击的时候复制第三个节点
//不复制事件处理
$(".gamelist li:eq(2)").click(function(){
$(this).clone(false).appendTo(".gamelist");//点击的时候复制第三个节点
*///替换ul当中的第3个
$(".contain img").click(function(){
console.log($(this).attr("alt"));//获取属性值

});
});

在元素内部插入节点:

append()

概述  :append是向每个匹配的元素内部追加内容。$("ul").append("li");li追加到ul中  

这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。

appendTo()是将ul追加到li中  $("ul").appendTo("li");ul追加到li中

原文地址:https://www.cnblogs.com/hualishu/p/8820389.html