jQuery中Dom的基本操作小结


Posted in Javascript onJanuary 23, 2014

jquery中各个节点的基本操作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head>
    <title>jquery中的Dom操作</title>
    <script src="../jquery/jquery-1.4.2.min.js" type="text/javascript"></script></head>
<body>
  <p title="选择你最喜欢的水果">你最喜欢的水果是?</p>
  <ul>
    <li title="苹果">苹果</li>
    <li title="香蕉">香蕉</li>
    <li title="西瓜">西瓜</li>
  </ul>
  <strong>你最喜欢的水果是?</strong> 
  <strong>你最喜欢的水果是?</strong><br />
  <input type="button" value="查找节点" id="btnFind" />
  <input type="button" value="创建节点" id="btnCreate" />
  <input type="button" value="删除节点" id="btnDelete" />
  <input type="button" value="复制节点" id="btnCopy" />
  <input type="button" value="替换节点" id="btnReplace" />
  <input type="button" value="包裹节点" id="btnWrap" />
   <script type="text/javascript">
   $(function(){
      $("#btnFind").click(function(){
           //查找元素节点
          var getValue= $("ul li:eq(1)").text();//获取第二个元素的值
          alert(getValue);
          //查找属性节点 attr()方法的参数可以是一个,也可以是两个,当参数是一个时,则是要查询的属性的名字,两个时,则是赋值
          var para=$("p");
          var p_text=para.attr("title");//获取<p>元素节点属性的title
          alert(p_text);
          alert(para.attr("title","改变你最喜欢吃的水果").attr("title"));//首先改变title的值,然后在取title的值
      });
      //创建节点 append(),prepend()加载元素的内部,为父子关系,after(),before()加在元素的前后,为兄弟光系
      $("#btnCreate").click(function(){
          var html=$("<li title= '桃子'>桃子</li><li title= '菠萝'> 菠萝</li>");
         // $("ul").append(html);//默认会加在ul最后面
         // var li2=$("ul li:eq(1)").after(html);//加在第二个li后面
          var li2=$("ul li:eq(1)").before(html);//加在第二个li前面
      });
      $("#btnDelete").click(function(){
        // var li2=$("ul li:eq(1)").remove();//删除第二个li元素
         //$("ul").append(li2);//把刚才删除的节点又重新添加到ul元素里
          var li2=$("ul li:eq(1)").empty();//清空第二个节点
      });
      $("#btnCopy").click(function(){
         $("p").clone().appendTo("ul");
      });
      $("#btnReplace").click(function(){
         $("p").replaceWith("<strong>你最不喜欢的水果是?哈哈</strong>");
      });
      $("#btnWrap").click(function(){
       // $("strong").wrap("<b></b>");//用<b>标签把<strong>元素包裹起来,是将所有的元素进行单独包裹
       // $("strong").wrapAll("<b></b>");//wrapAll()是将所有的元素进行一起包裹,可以通过firebug查看
         $("strong").wrapInner("<b></b>");//是将strong的内容(包括文本节点)用<b>进行包裹
      });
   })
      
    </script>
</body>
</html>

jquery中属性和样式的基本操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head>
    <title>属性操作</title>
    <script src="../jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
    <style type="text/css">
     .height{ font-weight:bold;color:red;}
     .another{ font-style:italic;color:blue;}
    </style>
</head>
<body>
<p title="选择你最喜欢的水果">你最喜欢的水果是?</p>
  <ul>
    <li title="苹果" class="height">苹果</li>
    <li title="香蕉">香蕉</li>
    <li title="西瓜">西瓜</li>
  </ul>  <input type="button" value="获取或设置属性" id="btnSetOrGetAttr" />
  <input type="button" value="删除属性" id="btnDeleteAttr" />
  <input type="button" value="获取或设置样式" id="btnSetOrGetStyle" />
  <input type="button" value="移除样式" id="btnRemoveStyle" />
  <script type="text/javascript" language="javascript">
    $(function(){
      $("#btnSetOrGetAttr").click(function(){
        var p =  $("p").attr("title");//获取属性
        alert(p);
        var pSet=$("p").attr("title","这是我重新设置的title属性哈");
        alert(pSet.attr("title"));//获取重新设置后的title
      });
      $("#btnDeleteAttr").click(function(){
         var p=$("p").removeAttr("title");
         alert(p.attr("title"));
      });
      $("#btnSetOrGetStyle").click(function(){
         var p=$("p").attr("class");//获取p元素的class
         alert(p);
         var pSet=$("p").attr("class","height");//设置class为height;
         alert(pSet.attr("class"));//获取设置后的class
      });
      $("ul li").click(function(){
         $(this).addClass("another");//给li追击another类,此时第一个li会有两个class的值,则会合并样式,并且对于同一个样式属性,后者覆盖前者
      });
      $("#btnRemoveStyle").click(function(){
        // $("ul li").removeClass("height");//表示移除一个样式
       //  $("ul li").removeClass("height another");//代表移除两个样式
           $("ul li").removeClass();//代表移除li所有的class
           //判断是否含有某个样式,如果有,则返回true,否则false
          var flag = $("p").hasClass("another");//等价于 $("p").is(".another");
          alert(flag);
      });
    })
  </script>
</body>
</html>
Javascript 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
js setattribute批量设置css样式
Nov 26 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
javascript表单事件处理方法详解
May 15 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 #Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 #Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 #Javascript
Jquery遍历节点的方法小集
Jan 22 #Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 #Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 #Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 #Javascript
You might like
浅谈PHP语法(1)
2006/10/09 PHP
php md5下16位和32位的实现代码
2008/04/09 PHP
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
文本框回车提交与禁止提交示例
2013/09/27 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
原生js实现分页效果
2020/09/23 Javascript
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
小学生美德少年事迹
2014/02/02 职场文书
助残日活动总结
2014/08/27 职场文书
创先争优宣传标语
2014/10/08 职场文书
搞笑老公保证书
2015/02/26 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
用Python将库打包发布到pypi
2021/04/13 Python