jquery对象的细节操作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>

    val():

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

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

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

  

  

jquery对象的细节操作1

时间: 2024-11-06 16:56:56

jquery对象的细节操作1的相关文章

jquery中操作jQuery对象的eq和get的区别与使用方法--操作前台显示之利器

:eq() 选择器选取带有指定 index 值的元素. index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1). get(index) 取得其中一个匹配的元素.index表示取得第几个匹配的元素. 这能够让你选择一个实际的DOM 元素并且对他直接操作,而不是通过 jQuery 函数.$(this).get(0)与$(this)[0]等价. 下面我们通过一个简单的代码来说明下: <script type="text/javascript" src="

javascript-jquery-更改jquery对象

在许多情况下,jquery代码所做的事情变成了:生成jquery对象A,操作对jquery象A:更改为jquery对象B,操作jquery对象B:更改为jqueryC,操作jquery对象C......: jquery的链式操作: 链式操作概述:生成一个jquery对象后,既要对它进行一次或多次的普通操作,同时还要对它进行更改操作.于是有必要把生成jquery对象储存在一个变量中,满足多次调用的需要. 例如: $(function(){ $("div").click(function(

认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法

(一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQuery的优势 1)可以像CSS一样访问和操作DOM 2)修改CSS控制页面外观 3)简化JS代码操作 4)事件代理更加容易 5)动画效果使用方便 6) Ajax技术更加完美 7)大量的基于Jquery的插件 8)可以自定义扩展功能插件 (三)JQuery的语法 格式:$(selector).actio

jQuery对象的链式操作用法分析

可以使用下面的原则判断一个函数返回的时候是jQuery对象,即是否可以用于链式操作. 除了获取某些数据的函数,比如获取属性值"attr(name)",获取集合大小"size()"这些函数明显是返回数据的.除了这些函数之外的jQuery函数都可以用于链式操作,比如设置属性"attr(name.value)". 链式编程.html('val').text('val').css()链式编程,隐式迭代.链式编程注意:$('div').html('设置值'

JQuery对象操作支持链式法则源码分析

JQuery链式法则 何为链式法则?先给出非链式写法的例子 //非链式写法 $("div").css("width", 45px); $("div").css("height", 45px); 再给出链式写法的例子 //链式写法 $("div").css("width", 45px).css("height", 45px); JQuery实现元素的定位与操作,如果每一

JavaScript之jQuery-4 jQuery事件(页面加载后执行、事件处理、事件冒泡、事件对象、模拟操作)

一.jQuery 页面加载后执行 代码执行的时机选择 - $(document).ready()方法和 window.onload事件具有相似的功能,但是在执行时机方面是有区别的 - window.onload 事件是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行 - $(document).ready()方法注册的事件处理程序,在DOM完全加载后就可以调用 - 一般来讲, $(document).ready()的执行要优于window.onload事件 - 需要注意的是,

jquery对象操作

     大类                                JQ方法                      备注 创建元素 var $h1 = $(“<h1></h1>”) 将内含的HTML包装为JQuery对象,并返回 创建文本 var $h1 = $("<h1>DOM模型</h1>") 可以用任何HTML代码创建文本 创建属性 var $h1 = $(“<h1 class = ‘red’>DOM模型&

jQuery中模拟用户操作

有时为了节省不想手动操作网页,但又想看到用户操作时的效果,可以用到jQuery提供的trigger方法.见下图代码 在不点击按钮时仍然想弹出this.value 我们只需要在后面加上.trigger("事件名称")就可以在不点击按钮的情形下看到用户点击按钮时看到的效果.这种方法的简写方法是用.事件名称()代替trigger("事件名称"),这种简写方法只适用于系统时间. 另外一种模拟方法是.triggerHandler(),这种方法是基于.trigger()的,只是

【简译】jQuery对象的奥秘:基础介绍

本文翻译自此文章 你有没有遇到过类似$(".cta").click(function(){})这样的JavaScript代码并且在想“$('#x')是什么”?如果这些对你想天书一样,请往下读.如果你认为这些代码不可能是真的,请浏览一些jQuery例子,他们都是这种结构. 这篇文章覆盖了像下面一样吓人的代码片段中涉及的关键概念.我们以一个长例子开始,这个长例子是基于一个让一个正方形运动的简单例子(a simple example of animating a square).你可能不需要