zoukankan      html  css  js  c++  java
  • jquery学习1之对juery对象的细节操作1

    jquery是前台动态页面开发的一个很重要的工具。

    一:jquery对象中length属性和size()方法

        var a=$("a").length;
             var b=$("a").size();

       length--->返回匹配元素对象的个数

       size()--->返回被 jQuery 选择器匹配的元素的数量

       暂时未发现,两个有何不同。

       【1】当判断一个对象是否存在是,可以用length属性:

       存在长度>=1

       不存在长度==0

    二:jquery对象中的get()方法。返回的是Dom对象

        var firstA=$("a").get(0);--->返回所有匹配对象中的第一个对象,并转换成Dom对象。
                alert(firstA.nodeName+":"+firstA.innerHTML);

        【1】jquey对象--->js的dom对象转化

            var jsDom=$("a")[0];//将jq对象理解为数组,可以通过下标转成js对象

            var jsDom=$("a").get(0);//将jq理解为一个特殊的容器。通过get()方法获取

        【2】js对象----->jquery对象转化

            var jqueyObj=$(jsDom);//将jq理解为一个特殊的容器。通过get()方法获取

     

    三:Jquery对象中attr(),html(),text(),val()方法的区别,和应用

        attr():

          【1】 var value=$(selector).attr(attribute)//获取匹配对象中某属性的值

            【2】 $(selector).attr(attribute,value)//为匹配对象的某个属性赋值

            【3】   $(selector).attr(attribute,function(index,oldvalue))//使用函数,为某个属性设置值。

            【4】   $(selector).attr({attribute:value, attribute:value ...})//为匹配对象,一次性设置多个属性的值

        html():

          【1】$(selector).html()//返回第一个匹配元素中的填充物,包括标签。

          【2】$(selector).html(content)//为所有匹配的元素设置新内容(html代码)。所有匹配的元素,之前的全部覆盖

          【3】$(selector).html(function(index,oldcontent))//为所有匹配的元素。利用函数设置内容。html片段

                index是匹配元素的下标。类似于数组的下标。从0开始。

                oldcontent是之前该匹配元素的html内容

         text():

          【1】$(selector).text()//获取所有匹配元素间的文本内容。html标签会被删除

          【2】$(selector).text(content)//为所有匹配的元素添加新内容。html标记会被原样添加进去,当做文本。

          【3】$(selector).text(function(index,oldcontent))//利用函数,为所有匹配元素改变文本内容

       所有带函数的示例。基本都是一样的。只是方法名不一样:

     1 <html>
     2 <head>
     3 <script type="text/javascript" src="/jquery/jquery.js"></script>
     4 <script type="text/javascript">
     5 $(document).ready(function(){
     6   $(".btn1").click(function(){
     7     alert($("p").text());
     8   });
     9 });
    10 </script>
    11 </head>
    12 <body>
    13 <p>我是谁</p>
    14 <p>This is a paragraph.</p>
    15 <p>This is another paragraph.</p>
    16 <button class="btn1">获得 p 元素的文本内容</button>
    17 </body>
    18 </html>
    View Code

        val():

          【1】$(selector).val()//返回第一个匹配元素的value值  常用form表单里的input标签

            【2】$(selector).val(value)//为所有匹配的元素设置新的value值

              【3】$(selector).val(function(index,oldvalue))//使用函数为所有匹配的元素设置value值

      

      

  • 相关阅读:
    select * from a,b探讨
    使用python脚本从数据库导出数据到excel
    git入门
    登录远程服务器脚本
    Ubuntu下python开发环境搭建
    asyncio并发编程
    深入理解python协程
    单例模式的几种实现方式
    MySQL统计百分比结果
    Java查询MySQL数据库指定数据库中所有表名、字段名、字段类型、字段长度、字段描述
  • 原文地址:https://www.cnblogs.com/shangxiaofei/p/3853076.html
Copyright © 2011-2022 走看看