1 获取与设置属性
- <span style="font-size:24px;">$(function()
- {
- var $v = $("p");
- var $li = $("ul li:eq(1)");
- //获取属性及获取页面值
- var pTitle = $v.attr("title");
- alert("before:"+pTitle);
- var title2 = $li.attr("title");
- var text = $li.text();
- //设置属性
- var $vA= $("p");
- $vA.attr("title","445");
- alert("after:"+$vA.attr("title"));
- alert(title2);
- alert(text);
- });</span>
2 利用JS新建结点
- $("#button").click(
- function(){
- var num= document.getElementById("text").value;
- alert(num);
- for(var i=0;i<num;i++ )
- {
- var input=document.createElement("input");
- input.setAttribute("type", "text");
- document.getElementById("div").appendChild(input);
- }
- }
- );
3 利用jquery操作DOM
(1)附加在后面
- //在后面添加
- var div=$("#div");
- div.html="";
- //添加第一种方式
- div.append("<input type='text' value='123'>")
- .append("<input type='text' value='123'>");
- //添加第二种方式
- $("<input type='text' value='123'>").appendTo(div)
- alert('22');
- //在前面添加
- div.prepend("<input type='text' value='before'>");
(3) 结点的移动
- //插入在XX的后面 让0在3的后面
- $("ul li:eq(0)").insertAfter($("ul li:eq(3)"));
- //让3在0后面的后面
- $("ul li:eq(0)").after($("ul li:eq(3)"));
(4) 结点的移除
- //移除
- //(1)第一种方式
- //删除 并返回被删除的结点对象 (可以间接实现移除)
- var removed=$("ul li:eq(2)").remove();
- $("ul li:eq(0)").append(removed);
- //(2)第二种方式 按照属性删除
- $("ul li").remove("li[title=1]");
- // 清空元素内容
- $("ul li:eq(0)").empty();
示例 动态添加文件上传窗口,动态删除
- <script type="text/javascript">
- $(function()
- {
- var div = $("#div")
- $("#button").click(function()
- {
- var br = $("<br>");
- var file = $("<input type='file' />");
- var btn = $("<input type='button' value='remove'/>");
- $("#div").append(br).append(file).append(btn);
- btn.click(
- function()
- {
- br.remove();
- file.remove();
- btn.remove();
- }
- )
- }
- )
- })
- </script>
- </head>
- <body>
- <input type="file" id="file" />
- <input type="button" value="more" id="button">
- <div id="div"></div>
- </body>
(5) 结点的复制
- <script type="text/javascript">
- $(function()
- {
- $("ul li").click(function()
- {
- //参数true表示克隆出来的对象与原对象拥有相同的属性 方法
- $(this).clone(true).appendTo($("ul"));
- });
- });
- </script>
- </head>
- <body>
- <p title="123">option</p>
- <ul>
- <li>0</li>
- <li title="1">1</li>
- <li>2</li>
- <li>3</li>
- </ul>
- </body>
(6) 替换结点
- $(function()
- {
- //后面替换前面的
- //$("p").replaceWith("<a href='http://www.google.com'>Google.com</a>");
- //前面替换后面的
- $("<a href='http://www.google.com'>Google.com</a>").replaceAll("p");
- });
(7)元素的包裹
- $(function()
- {//会面包裹前面的
- //$("p").wrap("<a href='http://www.google.com'><b></b></a>");
- //前面包裹后面的
- $("p").wrapInner("<a href='http://www.google.com'><b></b></a>");
- });
(8) 操作CSS
- <style type="text/css">
- .high{
- font-weight: bold;
- color:red
- }
- .another{
- font-style:italic;
- color:green
- }
- </style>
- <script type="text/javascript" src="jquery-1.4.4.js"></script>
- <script type="text/javascript">
- $(function()
- {
- $("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("high");
- });
- $("input:eq(3)").click(function()
- {
- $("p").removeClass("high");
- });
- $("input:eq(4)").click(function()
- {
- $("p").removeClass();
- });
- $("input:eq(5)").click(function()
- {
- //两种状态切换 添加与删除
- $("p").toggleClass("another");
- });
- $("input:eq(6)").click(function()
- {
- //判断元素是否具有制定样式
- //alert($('p').hasClass('another'));
- alert($('p').is('.another'));
- });
- });
(10) 对按钮内容的修饰
- $(function()
- {
- $("input:eq(0)").click(function()
- {
- alert($("p").html());
- });
- $("input:eq(1)").click(function()
- {
- alert($("p").text());
- });
- $("input:eq(2)").click(function()
- {
- $("p").html('<a href="http://www.google.com">hello world</a>');
- });
- $("input:eq(3)").click(function()
- {
- $("p").text('<a href="http://www.google.com">hello world</a>');
- });
- $("input:eq(4)").click(function()
- {
- alert($(this).val());
- });
- $("input:eq(5)").click(function()
- {
- $(this).val('hello world');
- });
- });
利用 focus和blur事件实现输入框默认值显隐
- $("#username").focus(function()
- {
- if($(this).val()=="username")
- {
- $(this).val("");
- }
- }).blur(function()
- {
- if($(this).val()=="")
- {
- $(this).val("username");
- }
11 对子元素进行遍历
- $(function()
- {
- var v1 = $("body").children();
- var v2 = $("p").children();
- var v3 = $("ul").children();
- alert(v1.length);
- alert(v2.length);
- alert(v3.length);
- for(var i = 0; i < v3.length; i++)
- {
- alert(v3[i].innerHTML);
- }
- }