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 相关文章推荐
javascript 判断整数方法分享
Dec 16 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 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获取表单textarea数据中的换行问题
2010/09/10 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
Python常见文件操作的函数示例代码
2011/11/15 Python
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
详解python中requirements.txt的一切
2017/03/03 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
大学社团活动总结
2014/04/26 职场文书
村干部培训方案
2014/05/02 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
党员创先争优心得体会
2014/09/11 职场文书
2014年招生工作总结
2014/11/26 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技