常用的jquery获取表单对象的属性与值

蔚落 2021-06-26 16:06 472阅读 0赞

## 1、`JQuery`的概念 ##

`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(("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").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>
                            
                 <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)")`′去除所有与给定选择器匹配的元素,如：`("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)")`‘是否包含某个元素，如：`("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("Element[attribute= youlika ]"` '获得所有某个属性为不是youlika的结尾的元素  
`$("Element[attribute *= youlika ]"` '获得所有某个属性包含youlika的开头的元素  
`("Element[selector1][selector2][....]")`′符合属性选择器，比如`("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)`′取得第一个匹配的属性值，比如`("Element").attr(name)`′取得第一个匹配的属性值，比如`("img").attr("src")`  
`$("Element".attr(key,value)")` '某一个元素设置属性  
`$("Element".attr({key:value,key1:value,....}))` ‘为某个元素一次性设置多个属性  
`$("Element").attr(key,function)` '为所有匹配的元素设置一个计算的属性值。  
`$("Element").removeAttr(name)`//移除某一个属性