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 相关文章推荐
JS打开图片另存为对话框实现代码
Dec 26 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 Javascript
vue项目接口域名动态获取操作
Aug 13 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编写PDF文档生成器
2006/10/09 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
深入理解PHP内核(一)
2015/11/10 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
一些常用的Javascript函数
2006/12/22 Javascript
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
Python闭包思想与用法浅析
2018/12/27 Python
波兰补充商店:Muscle Power
2018/10/29 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
教师实习的自我鉴定
2013/10/26 职场文书
秋季红领巾广播稿
2014/01/27 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
政府信息公开实施方案
2014/05/09 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
2014年库房工作总结
2014/11/26 职场文书
晚会开幕词
2015/01/28 职场文书
社区元宵节活动总结
2015/02/06 职场文书
Python 绘制多因子柱状图
2022/05/11 Python