`
welcome66
  • 浏览: 400620 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Jquery 获取对象的几种方式(转载)

阅读更多

1、先讲讲JQuery的概念

JQuery首先是由一个 America 的叫什么 John Resig的人创建的,后来又很多的JS高手也加入了这个团队。其实 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用简单的一些代码实现一些复杂的JS效果。
2、JQuery实现了 代码的分离

不用再网页中加入如:onclick之类的事件来调用函数了,直接引入JQuery类库和自己编写的JQuery代码就可以了;
如:
$(function(){
   $("Element").click{function(){
          alert("点击我哦!");
     }
   }
});
上面的代码中 只要定义了Element 这个元素  后面的click是动作 

alert("点击我哦!");这个是要执行的代码,当然你可以有很多的操作在这个函数中;
这里面的$这个号代表JQuery的意思 ,就是引用类库了。。。我是这么理解的;
3、JQuery的核心的一些方法
each(callback) '就像循环
$("Element").length; ‘元素的个数,是个属性
$("Element").size(); ’也是元素的个数,不过带括号是个方法
$("Element").get(); ‘某个元素在页面中的集合,以数组的形式存储
$("Element").get(index); ’功能和上面的相同,index表示第几个元素,数组的下标
$("Element").get().reverse(); ‘把得到的数组方向
$("Element1").index($("Element2")); ’元素2在元素1中的索引值是。。。
4、基本对象获取(注意这里获取的都是Jquery对象而不是Dom对象哦,但是他俩是可以转换滴)
$("*")  ‘表示获取所有对象   但是我至今没这样用过
$("#XXX") ’获得 id=XXX 的元素对象(id可以是标签的id或CSS样式id) 常用

$("input[name='username']")   获得input标签中name='userName'的元素对象 常用

$(".abc") ' 获得样式class的名字是.abc的元素对象  常用
$("div") ' 标签选择器 选择所有的div元素  常用
$("#a,.b,span") '表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素
$("#a .b p") 'ID号是a的并且使用了 b样式的 所有的p元素

示例:

<html>
    <head>
        <title>jquery测试</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../js/jquery-1.4.1.js"></script>
        <style type="text/css">
        .checkCss{
            color:blue;
        }
        .redioCss{
            color:red;
        }
        </style>
        <script type="text/javascript">
            $(function(){
                // $("#XXX") 获得id=XXX的所有Jquery对象
                $("#subt").click(function(){
                    // $("XXX") 获得XXX标签名的所有Jquery对象
                    alert("input 标签的对象个数为:"+$("input").length);
                    // $("XXX[name='YYY']") 获得XXX标签名下name='YYY'的所有Jquery对象
                    // val()获得属性值
                    alert("name='userName'的输入框内容为:"+$("input[name='userName']").val());
                    // 注意获得value值的第二种方式
                    alert("name='note'的输入框内容为:"+$("input[name='note']").attr("value"));
                    alert("下拉菜单被选中项的文本为:"+$("#sex option:selected").text());
                    alert("下拉菜单被选中项的值为:"+$("#sex").val());
                    alert("复选框选中的个数为:"+$("input[name='check']:checked").length);
                    if($("input[name='check']:checked").length>0){
                        var allCheckValue="";
                        var allCheckText="";
                        $("input[name='check']:checked").each(function(){
                            allCheckValue+=$(this).val()+" ";
                            allCheckText+=$(this).parent(".checkCss").text()+" ";
                        });
                        alert("复选框选中的文本为:"+allCheckText+" 值为:"+allCheckValue);
                    }
                    if($("input[name='status']:checked").length>0){
                        alert("单选框选中的文本为:"+$("input[name='status']:checked").parent(".redioCss").text()+" 值为:"+$("input[name='status']:checked").val());
                    }
                });
            });
            </script>
    </head>

    <body>
        姓名:<input type="text" name="userName" width="250"><br>
        性别:<select id="sex" name="userSex" style="width: 155">
                <option value="1">男</option>
                <option value="2">女</option>
                <option value="3">不男不女</option>
             </select><br>
        爱好:<span class="checkCss"><input type="checkbox" name="check" value="1">旅游</span>
             <span class="checkCss"><input type="checkbox" name="check" value="2">音乐</span><br>
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             <span class="checkCss"><input type="checkbox" name="check" value="3">体育</span>
             <span class="checkCss"><input type="checkbox" name="check" value="4">文学</span><br>
        状态:<span class="redioCss"><input type="radio" name="status" value="1">在职</span>
             <span class="redioCss"><input type="radio" name="status" value="2">离职</span><br>
        简介:<input type="text" name="note" width="250"><br>
        <input type="button" value="提交" id="subt"><br>
    </body>
</html>

5、层级元素获取
$("Element1 Element2 Element3 ....")  '前面父级 后面是子集
$("div > p") '获取div下面的所有的 p元素
$("div + p") 'div元素后面的第一个 p元素
$("div ~ p") 'div后面的所有的 p元素
6、简单对象获取
$("Element:first") 'HTML页面中某类元素的第一个元素
$("Element:last") 'HTML页面中某类元素的最后一个元素
$("Element:not(selector)") '去除所有与给定选择器匹配的元素,如:$("input:not(:checked)") 表示选择所有没有选中的复选框
$("Element:even") '获得偶数行
$("Element:odd“)'获得奇数行
$("Element:eq(index)")  '取得一个给定的索引值
$("Element:gt(index)")  '取得给定索引值的元素  之后的所有元素
$("Element:lt(index)")  '取得给定索引值的元素  之前的所有元素
。。。
7、内容对象的获取和对象可见性
$("Element:contains(text)") '元素中是否包含text文本内容
$('Element:empty") '获得元素不包含子元素或文本的
$("Element:partnt") '获得元素包含子元素或文本的
$("Element:has(selector)") ‘是否包含某个元素, 如:$("p:has(span)")表示所有包含span元素的p元素
$("Element:hidden") '选择所有可见元素
$("Element:visible") '选择所有不可见元素
8、其他对象获取方法
$("Element[id]") '所有带有ID属性的元素
$("Element[attribute = youlika ]" '获得所有某个属性为youlika的元素
$("Element[attribute != youlika ]" '获得所有某个属性为不是youlika的元素
$("Element[attribute ^= youlika ]" '获得所有某个属性为不是youlika的开头的元素
$("Element[attribute $= youlika ]" '获得所有某个属性为不是youlika的结尾的元素
$("Element[attribute *= youlika ]" '获得所有某个属性包含youlika的开头的元素
$("Element[selector1][selector2][....]") ’符合属性选择器,比如$("input[id][name][value=youlika ]")表示获得带有ID、Name以及value是youlika 的input元素。
9、子元素的获取
$("Element:nth-child(index)") '选择父级下面的第n个元素
$("Element:nth-child(even)") '选择父级下面的偶数
$("Element:nth-child(odd)") '选择父级下面的奇数
$("Element:nth-child(3n+1)") '表达式
$("Element:first-child") '选择父级下面的第一个子元素
$("Element:last-child") '选择父级下面的最后一个子元素
$("Element:only-child") '匹配父级下的唯一的一个子级元素,例如dt在dl列表中唯一,那么将选择dt
10、表单对象获取
$(:input)//查找所有的Input元素,当然也包括下拉列表,文本域,单选框,复选框等。
$(:text)//匹配所有的单行文本框
$(:password)//匹配所有的密码框
$(:radio)//匹配所有的单选按钮
$(:checkbox)//匹配所有的复选框
$(:submit)//匹配所有的提交按钮
$(:image)//匹配所有的图像域,例如<input type="image" />
$(:reset)//匹配所有的重置按钮
$(:button)//匹配所有的按钮
$(:file)//匹配所有的文件上传域
$(:hidden)//匹配所有的不可见元素或者type为hidden的元素
$(:enabled)//匹配所有可用的input元素,比如radio:enabled表示匹配所有可用的单选按钮
$(:disabled)//匹配所有的不可用input元素,作用与上相反
$(:checked)//匹配所有选中的复选框元素
$(:selected)//匹配所有的下拉列表
11、元素属性的设置与移除
$("Element").attr(name) '取得第一个匹配的属性值,比如$("img").attr("src")
$("Element".attr(key,value)") '某一个元素设置属性
$("Element".attr({key:value,key1:value,....})) ‘为某个元素一次性设置多个属性
$("Element").attr(key,function) '为所有匹配的元素设置一个计算的属性值。
$("Element").removeAttr(name)//移除某一个属性


分享到:
评论

相关推荐

    jQuery获取当前点击的对象元素(实现代码)

    jQuery获取当前点击的对象元素(实现代码) [removed][removed] &lt;/head&gt; &lt;body&gt; 段落1 段落2 段落3 段落4 段落5 [removed] //获取当前点击的对象 $('p').click( function(){ //this表示当前被...

    Jquery 获取对象的几种方式介绍

    综上所述,JQuery提供了多种方式来获取页面中的DOM对象,这对于编写动态的网页应用是非常有用。掌握这些方法可以帮助开发者更高效地进行网页元素的查找、过滤和操作。无论是在实现复杂的用户交互还是在进行DOM操作时...

    jQuery获取table下某一行某一列的值实现代码

    从提供的文件内容中,我们可以提取以下关于jQuery获取表格中某一行某一列值的知识点: 1. jQuery选择器的使用:在文中,通过使用选择器 $(".div") 找到了包含多个表格的div元素。这说明了jQuery选择器用于选取页面...

    jquery获取网站域名

    jjquery获取网站域名

    jquery 获取浏览器滚动条宽度数值

    jquery 获取当前浏览器滚动条宽度数值

    页面js,jquery两种方式获取百度接口经度纬度

    本文将详细介绍如何使用JavaScript(JS)和jQuery这两种方法在页面上获取百度接口提供的经度和纬度信息。百度地图API提供了丰富的地理定位功能,开发者可以通过调用其接口获取到用户的精确位置。 首先,我们来看...

    jquery对象和dom对象

    jQuery提供了`.get()`, `.get(0)`, `[index]`等方式将jQuery对象转换为DOM对象,而通过`$(DOM对象)`则可以将DOM对象转换为jQuery对象。 例如: ```javascript var $element = $('#myElement'); var domElement = $...

    Jquery-Ajax各种获取方式

    Jquery-Ajax各种获取方式 &lt;body&gt; &lt;input id="getJsData" type="button" value="获取js值"/&gt; &lt;input id="getMessage" type="button" value="获取单个值"/&gt; &lt;input id="getUserInfo" type=...

    Jquery对象集合

    这意味着一旦获取了一个jQuery对象,可以连续调用其方法,每个方法都会返回一个jQuery对象,除非明确返回其他类型的结果。例如:`$("p").css("color", "red").hide()`,这会将所有段落的颜色设为红色,然后隐藏它们...

    jQuery学习笔记 获取jQuery对象

    但值得注意的是,这是生成jQuery对象,不是DOM对象,因此$(selector)[removed]以获取元素内部HTML代码是错误的,正确写法是$(selector).html()。同样的,判断一个DOM对象是否存在,不能够写成if($(selector)),而是...

    jQuery获取设置textarea中光标位置

    jQuery扩展函数,用于获取设置textarea中光标位置

    对象转换为JSON数据格式&使用JQuery获取数据

    特别是`$.getJSON()`,它是用来从服务器获取JSON数据的简便方式。下面是一个使用`$.getJSON()`的例子: ```javascript $.getJSON('api/data.json', function(data) { console.log(data); // 在这里,data是服务器...

    jquery对象和dom对象.doc

    反过来,当你需要使用DOM对象的方法时,可以采取以下几种方式: 1. **通过索引获取:**因为jQuery对象是一个集合,你可以通过索引访问其内部的DOM元素,如`$("#msg")[0]`。 2. **使用`.eq()`方法:**`$("#msg").eq...

    jquery获取URL中参数解决中文乱码问题的两种方法

    以上就是解决在使用jQuery获取URL参数时出现中文乱码问题的两种方法,以及相关的编码和解码处理方式。需要注意的是,乱码问题的出现主要是由于编码和解码不一致导致的,所以在前后端处理URL参数时,一定要注意正确地...

    jQuery实现获取元素索引值index的方法

    jQuery作为一个强大的JavaScript库,提供了一系列方法来简化DOM操作,其中“.index()”方法便是用于获取元素索引值的一种有效方式。 首先,我们要了解“.index()”方法的作用,它可以帮助我们获取jQuery对象集合中...

    jQuery源码分析-03构造jQuery对象

    每种类型的处理方式确保了jQuery对象能够灵活地适应不同的应用场景,并能够正确地获取或创建DOM元素。 #### 五、`jQuery.extend`与`jQuery.fn.extend` `jQuery.extend`和`jQuery.fn.extend`是用于扩展jQuery对象...

    Jquery获取URL中的参数、URL、网页地址及路径

    jQuery插件Query URL Parser用于解析URLs字符串。通过它我们可以方便地获取协议、主机、端口、查询参数、文件名、路径等等。在一些静态页面需要根据参数来调整一些内容的时候这个插件还是挺有用的。

    jQuery获取对象简单实现方法小结

    在jQuery中,有多种方式可以用来获取页面元素,常见的选择器包括: - `$("Element")`:使用元素选择器获取所有指定的HTML元素。 - `$("#XXX")`:使用ID选择器,获取ID属性为"XXX"的元素。这是最常用的选择器之一,...

    jQuery第1天:JQ基本介绍、使用步骤、jQuery对象与DOM对象(重点)、jQuery选择器

    本篇文章将深入探讨jQuery的基础知识,包括其基本介绍、使用步骤、jQuery对象与DOM对象的区别,以及jQuery的选择器。此外,我们还将讨论`mouseover`与`mouseenter`事件的区别、`index()`方法的用法以及如何区分...

Global site tag (gtag.js) - Google Analytics