您的位置：首页 > Web前端 > JQuery

JQuery 节点

2016-03-16 13:55 375 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-1.9.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
//1.操作文本节点：通过jquery对象的text（）方法
alert($("#bj").text());
$("#bj").text("南京");
//2.操作属性节点：通过jquery对象的attr()方法
alert($(":text[name='username']").attr("value"));
$(":text[name='username']").attr("value","电饭锅");

//创建节点并插入节点到指定的节点中
/*
1.创建节点：使用$(html)方式即可，返回对应节点的jquery对象：
$("<li id='js'>江苏</li>")

2.添加节点：
1).appendTo 和 append：主语和宾语的位置不同：
$("<li id='js'>江苏</li>").appendTo($("#city"));
$("#city").append("<li id='js'>江苏</li>");

2).prependTo 和 prepend：主语和宾语的位置不同：
$("<li id='js'>江苏</li>").prependTo($("#city"));
$("#city").prepend("<li id='js'>江苏</li>");
*/
//$("<li id='js'>江苏</li>").appendTo($("#city"));
$("#city").append("<li id='js'>江苏</li>");
//$("<li id='js'>江苏</li>").prependTo($("#city"));
$("#city").prepend("<li id='js'>江苏</li>");
})
</script>
</head>
<body>
<p>你喜欢哪个城市？</p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li id="nb">宁波</li>
</ul>
<br><br>

<p>你喜欢什么运动?</p>
<ul id="game">
<li id="ps">爬山</li>
<li id="pb">打篮球</li>
<li id="pf">踢足球</li>
</ul>

<br><br>
gender:
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
<br><br>
name: <input type="text" name="username" value="miss">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-1.9.1/jquery.js"></script>
<script type="text/javascript">
$(function(){function showContent(li){
alert($(li).text());
}
$("li").click(function(){
showContent(this);
});//1.同JS的响应函数一样，jquery对象的响应函数若返回false，
//可以取消指定元素的默认行为，比如submit,a等
//2.val()方法，相当于attr（"value"）,获取表单元素的value属性值。
//3.jquery对象的方法的连缀：调用一个方法的返回值还是调用的对象，于是
//可以在调用方法的后面依然调用先前的那个对象的其他方法。
$(":submit").click(function(){
var $type=$(":radio[name='type']:checked");
if($type.length == 0){
alert("请选择类型");
return false;
}
var type = $type.val();
var $name = $(":text[name='name']");
var name = $name.val();//$.trim(str):可以去除str的前后空格.
name = $.trim(name);
$name.val(name);
if(name == ""){
alert("请输入内容");
return false;
}
$("<li>" + name + "</li>").appendTo($("#"+type))
.click(function(){
showContent(this);
});return false;
});})
</script>
</head>
<body>
<p>你喜欢哪个城市？</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li id="nb">宁波</li>
</ul>
<br><br><p>你喜欢什么单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>极品飞车</li>
<li>实况足球</li>
</ul><br><br>
<form action="case1.html" name="myform">
<input type="radio" name="type" value="city">城市
<input type="radio" name="type" value="game">游戏name: <input type="text" name="name">
<input type="submit" id="Submit" value="submit">
</form>
</body>
</html>
//1.为#city的每一个li添加click响应函数：点击时，li被删除
$("city li").click(function(){
$(this).remove();
});
//jquery对象的remove（）方法：将把jquery对象对应的dom对象节点删除
$("#bj").remove();//2.清空#game节点
//jquery对象的empty（）方法：清空jquery对象对应的dom对象所有的子节点
alert("马上要清空了!");
$("#game").empty();

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航