jquery属性禁用以及dom操作

齐晓威_518

浏览: 617806 次
性别:
来自: 郑州

最近访客更多访客>>

huangsheng2012

cr135810

ws07

gaochunhu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery使用心得与体会

<%@ 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>

jquery的Dom操作

<%@ 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>

jquery表单选择器

<%@ 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>

分享到：

Eclipse 格式化代码时不换行与自动换行的实 ... | jquery小例子:动态生成表格和无刷新评论

2013-12-04 22:59
浏览 1542
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论