捕获内容和属性

1.DOM 操作

  获得内容 - text()、html() 以及 val()

    text() - 设置或返回所选元素的文本内容,如果不带值则是返回值,如果带值则是修改值,如:$('p').text('我要修改原来的文本');

    html() - 设置或返回所选元素的内容(包括 HTML 标记),如果不带值则是返回值,如果带值则是修改值,如:$('p').html("<b>Hello world!</b>");

    val() - 设置或返回表单字段的值,如果不带值则是返回值,如果带值则是修改值,如:$('input').val("修改input框的默认value值");

  获取属性 - attr() 或 prop()   

    对于 HTML 元素本身就带有的固有属性,在处理时,使用 prop 方法,如果带有属性值则是修改属性值,如果不带属性值则是返回属性值:如 $('a').attr('href' : 'www.guiqingyuang.com');

    对于 HTML 元素我们自己自定义的 DOM 属性,在处理时,使用 attr 方法。

  例:<a href="https://www.runoob.com" target="_self" class="btn">少时诵诗书</a>

    例子里 <a> 元素的 DOM 属性有: href、target 和 class,这些属性就是 <a> 元素本身就带有的属性,或者说在 IDE 里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用 prop 方法。

    1.如果有相应的属性,返回指定属性值。

    2.如果没有相应的属性,返回值是空字符串。

  例:<a href="#" id="link1" action="delete" rel="nofollow">删除</a>

    例子里 <a> 元素的 DOM 属性有: href、id 和 action,很明显,前两个是固有属性,而后面一个 action 属性是我们自己自定义上去的,<a> 元素本身是没有这个属性的。处理这些属性时,建议使用 attr 方法。

    attr 方法还支持同时修改多个属性,如:<a href="http://www.runoob.com" id="runoob">教程坎坎坷坷</a>

      $(document).ready(function(){

        $("button").click(function(){

          $("#runoob").attr({

            "href" : "http://www.runoob.com/jquery",

            "title" : "jQuery 教程"

          });

          // 通过修改的 title 值来修改链接名称

          title = $("#runoob").attr('title');

          $("#runoob").html(title);

         });

      });

    1.如果有相应的属性,返回指定属性值。

    2.如果没有相应的属性,返回值是 undefined。

 text()、html() 以及 val() 的回调函数

    回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

  例:$(document).ready(function(){

      $("#btn1").click(function(){
        $("#test1").text(function(i,origText){ //这里function传两个参数,第一个是下标,第二个参数是原来的值 
          return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
        });
      });

  例:$("#btn2").click(function(){

      $("#test2").html(function(i,origText){ //这里function传两个参数,第一个是下标,第二个参数是原来的值 
        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
      });
    });

 attr(),也提供回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

  例:$(document).ready(function(){

      $("button").click(function(){

        $("#runoob").attr("href", function(i, origValue){  //这里function传两个参数,第一个是下标,第二个参数是原来的值

          return origValue + "/jquery";
        });
      });
    });

jQuery - 添加元素

  添加新的 HTML 内容

  添加新内容的四个 jQuery 方法:

  • append() - 在被选元素的结尾插入内容  如:  $("p").append("追加文本");
  • prepend() - 在被选元素的开头插入内容 如:  $("p").prepend("在开头追加文本");
  • after() - 在被选元素之后插入内容      如:  $("img").after("在后面添加文本");
  • before() - 在被选元素之前插入内容   如:  $("img").before("在前面添加文本");

  append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML

  例:

    $('#lia').click(function(){
      var la1 = '<p>文本内容</p>'; // 使用 HTML 标签创建文本
      var la2 = $('<div></div>').text('文本内容222'); // 使用 jQuery 创建文本
      var la3 = document.createElement('h1');
       la3.innerHTML="我是通过dom创建的文本";
      $('span').prepend(la1, la2, la3);
    });

  通过 after() 和 before() 方法添加若干新元素

   例:$('#btnnn').click(function(){
      var laa1 = '<h2> 20120120 </h2>';
      var laa2 = $('<i></i>').text('我是使用jq方法添加的文本');
      var laa3 = document.createElement('button');
      laa3.innerHTML = '我是添加的按钮';
      var bsns = $('#huaaa').after(laa1, laa2, laa3);
      console.log('bsns==>', bsns);
     })

  删除元素

  如需删除元素和内容,一般可使用以下两个 jQuery 方法:

   remove() - 删除被选元素(及其子元素)  remove() 方法也可接受一个参数,允许您对被删元素进行过滤。

    例:$('#btna').click(function(){    //这里是移除所有带有listarr类的li标签和标签里面的内容

        $('#hua>li').remove('.listarr');

      })

    

    empty() - 从被选元素中删除子元素  

   例: $(function(){

      // remove 删除内容包括标签
      // $('#btna').click(function(){
        // $('.box-aa,p').remove();
      // });

      // empty(m铁) 删除内容,保留标签
      $('#btna').click(function(){
        $('.box-aa,p').empty();
       });
      })

 获取并设置 CSS 类 

  附:jquery中 first() 与  :first 的区别

    首先 jQuery 中默认有的方法是 .first(),而 :first 是 jQuery 选择器支持的语法 $('div:first')。

    实际上,.first() 方法就是 .eq(0) 的封装而已。

    比如 p:first 就是第一个P元素,p:last就是最后一个P元素(相对于整个页面)。除了这两个之外的怎么办?可以通过eq来遍历。如.eq(2)

   操作 CSS    

    addClass() - 向被选元素添加一个或多个类     

      $(function(){
        $('#btn').click(function(){
          $('.lia1,.lasta,p').addClass('on');
          $('.lia2,.listall').addClass('on1');
        });

        $('.lia1,.lasta,p').addClass('on1 on2');//添加多个类
      })

    removeClass() - 从被选元素删除一个或多个类

      例: $('.lia1,.lasta').removeClass('ass vvb df');

    toggleClass() - 对被选元素进行添加/删除类的切换操作

      例:$('.lia1,.lasta').toggleClass('ass vvb df');

    css() - 设置或返回样式属性     

       例: $('#btn').click(function(){
          // 获取css属性
          var aa = $('li').css('backgroundColor');
          console.log('aa==>', aa); //默认情况只获取第一个li的属性,要获取其他的需要使用伪类的nth-child()来获取
          var bb = $('li:nth-child(5)').css('backgroundColor');
          console.log('bb==>', bb);
          //但是nth-child()方法并不好,所以使用eq()来遍历,需要注意的是是从下标0开始算的,不是像nth-child()直接写位置的
          var cc = $('li').eq(3).css('backgroundColor');//这里eq(3)的实际位置是内容004的位置。
          console.log('cc==>', cc);

          //设置css属性
          $('li').eq(4).css({
            'backgroundColor':'#45ffff',
            'border':'solid 1px #f00'
          })
         })

  尺寸方法   

    width()  width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

    height()  height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

    innerWidth()  innerWidth() 方法返回元素的宽度(包括内边距)。

    innerHeight()  innerHeight() 方法返回元素的高度(包括内边距)。

    outerWidth()  outerWidth() 方法返回元素的宽度(包括内边距和边框)。

    outerHeight()  outerHeight() 方法返回元素的高度(包括内边距和边框)。

  需要注意的地方,设置了 box-sizing 后,width() 获取的是 css 设置的 width 减去 padding 和 border 的值。

  .test{width:100px;height:100px;padding:10px;border:10px;box-sizing:border-box;} 

  • width() 获取为: 60
  • innerWidth() 获取值为: 80
  • outWidth() 获取值为: 100

jquery快速入门(三)的更多相关文章

  1. jquery快速入门三

    事件 常用事件 click(function(){.......}) #触发或将函数绑定到指定元素的click事件 hover(function(){.....}) 当鼠标指针悬停在上面时触发.... ...

  2. day 48 jQuery快速入门

    jQuery快速入门   jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Ev ...

  3. jQuery 快速入门教程

    内容目录 jQuery 入门 什么是jQuery 如何使用jQuery jQuery的运行原理 如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心:选取元素 使用jQue ...

  4. jquery快速入门(二)

    jQuery 效果 1.隐藏,显示 1.1显示 hide() 和隐藏 show() 语法:$(selector).hide(speed,callback); $(selector).show(spee ...

  5. jQuery快速入门专题

    jQuery入门专题 本人博客特点:最高重要等级为*****(五红星),依次减少代表重要性相对较低! 一.jQuery简介 jQuery 是一个 JavaScript的一个库,也就是说jQuery是基 ...

  6. jQuery简单入门(三)

    3.事件和动画 A. 事件 Aa. DOM加载 1.为什么使用jQuery加载DOM方法? 以javascript的window.onload()方法加载DOM的先决条件是:必须等待被请求页面的资源全 ...

  7. jquery快速入门(四)

    jQuery 遍历 向上遍历 DOM 树 parent() parent() 方法返回被选元素的直接父元素.该方法只会向上一级对 DOM 树进行遍历. parents() parents() 方法返回 ...

  8. jquery快速入门(一)

    一.jquery加载文档 jquery加载文档(也叫入口函数) $(document).ready(function(){ // 这里写 jQuery 代码... }); 简写方式: $(functi ...

  9. JQuery快速入门-简介

    一.什么是JQuery? jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...

随机推荐

  1. BZOJ_1146_[CTSC2008]网络管理Network_主席树+树状数组

    BZOJ_1146_[CTSC2008]网络管理Network_主席树 Description M公司是一个非常庞大的跨国公司,在许多国家都设有它的下属分支机构或部门.为了让分布在世界各地的N个 部门 ...

  2. 虚拟机console基础环境部署——系统基础环境

    1. 概述2. 工具类安装2.1 安装vim2.2 安装tree2.3 安装expect2.4 安装lsof3. 编译环境类安装 1. 概述 本系列博客是在最小化安装CentOS6.5的基础上,通过配 ...

  3. Ceilometer + Aodh + Gnocchi 介绍

    一.  Ceilometer 1.    概述 Openstack ceilometer主要用于监控虚拟机.服务(glance.image.network等)和事件.虚拟机的监控项主要包括CPU.磁盘 ...

  4. Linux下可以ping ip地址但无法ping域名解决方法

    分析:当前系统无法解决域名至ip地址故障. 步骤阅读 2 三:解决过程: 1.分析dns故障: 2.物理机可以ping 地址,但无法ping域名: 3.检查/etc/resolv.conf: 注: ( ...

  5. Spring py登陆模块(包含 记录登陆时间,记录ip,增加积分)

    嘛基于最近的复习准备写个关于spring登陆模块的小程序 虽然小但是五脏俱全呐 话不多说让我来介绍一下今天的登陆程序. 这些是 基于Spring JDBC 的持久层实现 基于Spring 声明事物的业 ...

  6. 大白话5分钟带你走进人工智能-第十五节L1和L2正则几何解释和Ridge,Lasso,Elastic Net回归

    第十五节L1和L2正则几何解释和Ridge,Lasso,Elastic Net回归 上一节中我们讲解了L1和L2正则的概念,知道了L1和L2都会使不重要的维度权重下降得多,重要的维度权重下降得少,引入 ...

  7. 线性表概述及单链表的Java实现

    一.线性表概述 线性表是指一组数据元素之间具有线性关系的元素序列,它表现为:除第一个元素没有直接前驱元素.最后一个元素没有直接后继元素外,其余所有元素都有且仅有一个直接前驱元素和直接后继元素. 根据存 ...

  8. Actor模型-Akka

    英文原文链接,译文链接,原文作者:Arun Manivannan ,译者:有孚 写过多线程的人都不会否认,多线程应用的维护是件多么困难和痛苦的事.我说的是维护,这是因为开始的时候还很简单,一旦你看到性 ...

  9. mybatis 增加热加载xml

    由于在本地开发环境上每次修改mybatis xml文件都需要手动重启服务,调试的很麻烦,所以需要热加载xml文件来避免浪费时间,于是网上搜一下资料,看了下有一大堆,但试了下真正能跑起来没有(大都代码没 ...

  10. 数据结构与算法(九):AVL树详细讲解

    数据结构与算法(一):基础简介 数据结构与算法(二):基于数组的实现ArrayList源码彻底分析 数据结构与算法(三):基于链表的实现LinkedList源码彻底分析 数据结构与算法(四):基于哈希 ...