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 版
Mar 24 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
angular中如何绑定iframe中src的方法
Feb 01 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
模仿OSO的论坛(四)
2006/10/09 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
php常用数组函数实例小结
2016/12/29 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
js右键菜单效果代码
2007/07/21 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
python实现socket端口重定向示例
2014/02/10 Python
python中异常捕获方法详解
2017/03/03 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
Python reversed函数及使用方法解析
2020/03/17 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
公司财务工作总结的自我评价
2013/11/23 职场文书
财务会计实训报告
2014/11/05 职场文书
碧霞祠导游词
2015/02/09 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书