jquery学习1之对juery对象的细节操作1

简介: jquery是前台动态页面开发的一个很重要的工具。   一:jquery对象中length属性和size()方法     var a=$("a").length;         var b=$("a").size();    length--->返回匹配元素对象的个数    size()--->返回被 jQuery 选择器匹配的元素的数量    暂时未发现,两个有何不同。

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值

  

  

相关文章
|
7月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
|
7月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
63 1
|
7月前
|
JavaScript
jQuery遍历div,判断是否为空,为空时执行某个操作
jQuery遍历div,判断是否为空,为空时执行某个操作
|
7月前
|
缓存 JavaScript
|
3月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
6月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
5月前
|
JavaScript 前端开发 API
前端框架与库 - jQuery基础与DOM操作
【7月更文挑战第18天】jQuery 是一个简化JavaScript任务的库,以其“write less, do more”理念著称。核心功能包括DOM操作、事件处理和Ajax。DOM操作如选择元素(`$(&quot;p&quot;)`、`$(&quot;#myDiv&quot;)`、`$(&quot;.myClass&quot;)`)、创建及添加元素、修改属性和内容。事件处理如绑定(`click`)和触发(`trigger`)。常见问题涉及`$`符号冲突(使用`jQuery`代替)、异步加载管理和选择器性能优化。了解并规避这些问题能提升jQuery使用效率。
37 0
|
6月前
|
JavaScript 前端开发 API
jQuery对象与DOM对象简介及相互转换
jQuery对象与DOM对象简介及相互转换
|
6月前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
47 0
|
7月前
|
JavaScript 前端开发 索引
jQuery学习教程,写更少的代码,做更多的事情(二)
jQuery学习教程,写更少的代码,做更多的事情(二)