jquery属性禁用以及dom操作

最新推荐文章于 2021-07-05 17:46:53 发布

临海听风_518

最新推荐文章于 2021-07-05 17:46:53 发布

阅读量258

点赞数

分类专栏： jquery使用心得与体会文章标签： javascript java ViewUI

本文链接：https://blog.csdn.net/qixiaowei_888/article/details/84509559

版权

jquery使用心得与体会专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<%@ page contentType="text/html;charset=GBK" language="java" %>
<html>
<head><title>Simple jsp page</title>
<script type="text/javascript" src="jquery/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function() {
$("#btn").attr("disabled",true); //使用attr设置属性
});

</script>
</head>
<body>
<textarea rows="3" cols="3" >aaaaaaaaaaa</textarea>
<input type="button" value="禁用" id="btn">
</body>
</html>

[align=center]jquery的Dom操作[/align]

<%@ page contentType="text/html;charset=GBK" language="java" %>
<html>
<head><title>jquery的Dom操作</title>
<style type="text/css">
.test{background: #3333ff };
</style>
<script type="text/javascript" src="jquery/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function() {
$("#div1").click(function(){
var a = $("<div>b</div>");
$("#div1").append(a);
});
});
$(function() {
$("#btn").click(function(){
$("li.test").remove();
});
});

</script>
</head>
<body>
<h3>Jquery的Dom操作</h3>
1.使用html()方法读取或者设置元素的innerHTML:alert($("a:first").html());$("a:first").html("hello") <br>
2.使用text()方法读取或这是元素的innerText:alert($("a:first").text()) ,$("a:first").text("hello") <br>
3.使用attr()方法读取或者设置元素的属性,对于jquery没有封装的属性用attr进行操作
$("a:first").attr("href");$("a:first").attr("href","http://www.sina.com") <br>
4.使用removeAttr删除属性<p></p>
<h3>动态创建Dom节点</h3>
1.使用$(html字符串)来创建Dom节点,并且返回一个jquery对象,然后调用append等方法将
新创建的节点添加到Dom中:
var link=$("<a href='http://www.sina.com'>新浪</a>");<br>
$("div:first").append(link); <br>
$()创建的就是一个jquery对象，可以完全进行操作
var link= $("<a href='http://www.sina.com'>新浪</a>")
link.text("新浪");
$("div:first").append(link)<br>
append方法用来在元素的末尾追加元素<br>
prepend,在元素的开始添加元素<br>
after,在元素之后添加元素(添加兄弟)<br>
before,在元素之前添加元素(添加兄弟) <br>
删除节点：<br>
1.remove()删除选择的节点<br>
remove方法的返回值是被删除的节点对象,还可以继续使用被
删除的节点,比如重新添加到其他节点下
var lie=$("#ulsite li").remove();
$("#ulsite2").appeng(lis);<br>
empty()是将节点清空 <p></p><p></p>
<div id="div1">点我添加div</div><p/> </p>
<ul>
<li class="test">abc</li>
<li>abc</li>
<li class="test">abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<input type="button" value="点我删除li" id="btn"/>
</body>
</html>

[align=center]jquery表单选择器[/align]
<%@ page contentType="text/html;charset=GBK" language="java" %>
<html>
<head><title>jquery选择器</title>
<script type="text/javascript" src="jquery/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function() {
$("#btn").click(function(){
alert($("input:checked").length);
})
});

</script>
</head>
<body>
jquery属性过滤选择器:<br>
1.$("div[id]")选取有id属性的div标签<br>
2.$("div[title=test]")选取属性为"test"的div标签，jquery中没有对get
ElementsByName进行封装,用$("input[name="abc"]")表示name为abc的input标签<br>
3.$("div[title=test]")选取title属性不为test的div标签<br>
表单对象选择器:<br>
1.$("#form1:eneabled")选取id为from1的表单元素内所有启用的元素<br>
2.$("#form1:disabled")选取id为form1的表单内所有禁用的元素<br>
3.$("input:checked")选取所有选中的元素(Radio,CheckBox)<br>
4.$("select:selected")选取所有选中的选项元素(下拉列表)<p/>
5.$(":input")选取所有的input，textarea，select 和button元素,和$("input")不一样,$("input")只获得input<br>
6.$(":text")选取所有的单行文本框<br>
7.$(":password")选取所有的密码框.同理还有:radio,:checkbox,:submit,:image,:reset,:button ,
:file,:hidden
<form action="#" method="post">
足球:<input type="checkbox" name="aihao" value="足球"><br>
篮球:<input type="checkbox" name="aihao" value="篮球"><br>
排球:<input type="checkbox" name="aihao" value="排球"><br>
棒球:<input type="checkbox" name="aihao" value="棒球"><br>
<input type="button" id="btn" value="提交">
</form>
</body>
</html>

临海听风_518

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery属性禁用以及dom操作

Simple jsp page $(function() { $("#btn").attr("disabled",true); //使用attr设置属性 }); aaaaaaaaaaa[align=center]jquery的Dom操作[/align] ...
复制链接

扫一扫