jQuery 元素操作大杂汇

古城微笑少年丶 2021-12-12 09:47 289阅读 0赞

$('\#id').parent() 当前元素的父级节点

$('\#id').siblings() 当前元素所有的兄弟节点

$('\#id').prev() 当前元素前一个兄弟节点

$('\#id').prevaAll() 当前元素之前所有的兄弟节点

$('\#id').next() 当前元素之后第一个兄弟节点

$('\#id').nextAll() 当前元素之后所有的兄弟节点

方法都可以添加选择器，给出选择条件

如:

$('\#id').parent('.a') 找出calss为a的父级节点  
\---------------------

[Jquery 获取 radio选中值][Jquery _ radio]

Radio

![6e3170d1-a0ea-3a86-8add-a1eb66d68c23.jpg][]

1.获取选中值，三种方法都可以：

$('input:radio:checked').val()；

$("input\[type='radio'\]:checked").val();

$("input\[name='rd'\]:checked").val();

2.设置第一个Radio为选中值：

$('input:radio:first').attr('checked', 'checked');

或者

$('input:radio:first').attr('checked', 'true');

注：attr("checked",'checked')= attr("checked", 'true')= attr("checked", true)

3.设置最后一个Radio为选中值：

$('input:radio:last').attr('checked', 'checked');

或者

$('input:radio:last').attr('checked', 'true');

4.根据索引值设置任意一个radio为选中值：

$('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2....

或者

$('input:radio').slice(1,2).attr('checked', 'true');

5.根据Value值设置Radio为选中值

$("input:radio\[value=http://www.2cto.com/kf/201110/'rd2'\]").attr('checked','true');

或者

$("input\[value=http://www.2cto.com/kf/201110/'rd2'\]").attr('checked','true');

6.删除Value值为rd2的Radio

$("input:radio\[value=http://www.2cto.com/kf/201110/'rd2'\]").remove();

7.删除第几个Radio

$("input:radio").eq(索引值).remove();索引值=0,1,2....

如删除第3个Radio:$("input:radio").eq(2).remove();

8.遍历Radio

$('input:radio').each(function(index,domEle)\{

//写入代码

\});

## DropDownList ##

![0e05394d-723a-3fba-b3f3-e43eb8ffc60f.jpg][]

1.   获取选中项：

获取选中项的Value值：

$('select\#sel option:selected').val();

或者

$('select\#sel').find('option:selected').val();

获取选中项的Text值：

$('select\#seloption:selected').text();

或者

$('select\#sel').find('option:selected').text();

2.   获取当前选中项的索引值：

$('select\#sel').get(0).selectedIndex;

3.   获取当前option的最大索引值：

$('select\#sel option:last').attr("index")

4.   获取DropdownList的长度：

$('select\#sel')\[0\].options.length;

或者

$('select\#sel').get(0).options.length;

5.  设置第一个option为选中值：

$('select\#sel option:first').attr('selected','true')

或者

$('select\#sel')\[0\].selectedIndex = 0;

子串匹配属性选择器
    下面为您介绍一个更高级的选择器模块，它是 CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。按照规范的说法，应该称之为“子串匹配属性选择器”。
    
    很多现代浏览器都支持这些选择器，包括 IE7。
    
    下表是对这些选择器的简单总结：
    
    类型	描述
    [abc^="def"]	选择 abc 属性值以 "def" 开头的所有元素
    [abc$="def"]	选择 abc 属性值以 "def" 结尾的所有元素
    [abc*="def"]	选择 abc 属性值中包含子串 "def" 的所有元素

Query获取Select选择的Text和Value:   
语法解释：

1. $("#select_id").change(function(){//code...});    //为Select添加事件，当选择其中一项时触发
    2. var checkText=$("#select_id").find("option:selected").text();   //获取Select选择的Text
    3. var checkValue=$("#select_id").val();   //获取Select选择的Value
    4. var checkIndex=$("#select_id ").get(0).selectedIndex;   //获取Select选择的索引值
    
    5. var maxIndex=$("#select_id option:last").attr("index");   //获取Select最大的索引值

jQuery设置Select选择的Text和Value:   
语法解释：

1  $("#select_id ").get(0).selectedIndex=1;   //设置Select索引值为1的项选中
    2  $("#select_id ").val(4);    //设置Select的Value值为4的项选中
    3  $("#select_id option[text='jQuery']").attr("selected", true);    //设置Select的Text值为jQuery的项选中

jQuery添加/删除Select的Option项：   
语法解释：

1  $("#select_id").append("<option value='Value'>Text</option>");   //为Select追加一个Option(下拉项)
    2  $("#select_id").prepend("<option value='0'>请选择</option>");   //为Select插入一个Option(第一个位置)
    3  $("#select_id option:last").remove();   //删除Select中索引值最大Option(最后一个)
    4 $("#select_id option[index='0']").remove();   //删除Select中索引值为0的Option(第一个)
    5 $("#select_id option[value='3']").remove();   //删除Select中Value='3'的Option
    6 $("#select_id option[text='4']").remove();   //删除Select中Text='4'的Option

# [jquery获取select下拉框的值以及change时间绑定][jquery_select_change] #

下拉框一般是绑定onchange时间，对应jquery的change,一般要获取下拉框的值和索引进行操作

<select id="bidder\_way" name="bidder\_way" style="width:207px;" class="normal">  
<option value="">--选择投标人的方式--</option>  
<option value="比选">比选</option>  
<option value="指定">指定</option>  
</select>  
  
<script>  
$(function()\{  
$("\#bidder\_way").change(function()\{   
var select\_val = $(this).children('option:selected').val();  
if(select\_val != '')\{  
if(select\_val == '比选')\{  
\}else\{  
\}  
\}  
\});  
\});  
  
</script>

更多获取select下拉框值和索引的方法（摘自网络）：

获取Select ：  
获取select 选中的 text :  
$("\#phpddt.com").find("option:selected").text();  
  
获取select选中的 value:  
$("\#phpddt.com ").val();  
  
获取select选中的索引:  
$("\#phpddt.com ").get(0).selectedIndex;  
  
设置select:  
设置select 选中的索引：  
$("\#phpddt.com ").get(0).selectedIndex=index;//index为索引值  
  
设置select 选中的value：  
$("\#phpddt.com ").attr("value","Normal“);  
$("\#phpddt.com ").val("Normal");  
$("\#phpddt.com ").get(0).value = value;  
  
设置select 选中的text:  
var count=$("\#phpddt.com option").length;  
for(var i=0;i<count;i++)   
\{ if($("\#phpddt.com ").get(0).options\[i\].text == text)   
\{   
$("\#phpddt.com ").get(0).options\[i\].selected = true;   
  
break;   
\}   
\}  
  
$("\#select\_id option\[text='jQuery'\]").attr("selected", true);  
  
设置select option项:  
  
$("\#select\_id").append("<option value='Value'>Text</option>"); //添加一项option  
$("\#select\_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option  
$("\#select\_id option:last").remove(); //删除索引值最大的Option  
$("\#select\_id option\[index='0'\]").remove();//删除索引值为0的Option  
$("\#select\_id option\[value='3'\]").remove(); //删除值为3的Option  
$("\#select\_id option\[text='4'\]").remove(); //删除TEXT值为4的Option  
  
清空 Select:  
$("\#phpddt.com ").empty();

目前几种借用jQuery选取点击元素获得当前点击元素信息，

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>$(document).click(function(e) { // 在页面任意位置点击而触发此事件</code></p> <p><code>&nbsp;&nbsp;</code><code>$(e.target).attr("id");&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // e.target表示被点击的目标</code></p> <p><code>})&lt;</code><code>br</code><code>&gt;//此方法对于想要获取击元素获得当前点击元素信息如id，value，等信息，无法准确定位，获取，因此需要this，及当前之意</code></p> </td> 
  </tr> 
 </tbody> 
</table>

借用this获取当前元素信息

HTML代码

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </td> 
   <td> <p><code>&lt;</code><code>ul</code><code>&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>li</code>&nbsp;<code>class="a" id="ongoing"&gt;正在进行&lt;/</code><code>li</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>li</code>&nbsp;<code>id="about_to_begin"&gt;即将开始&lt;/</code><code>li</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>li</code>&nbsp;<code>id="past_activities"&gt;往期活动&lt;/</code><code>li</code><code>&gt;</code></p> <p><code>&lt;/</code><code>ul</code><code>&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

js代码

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> </td> 
   <td> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(document).ready(</code><code>function</code><code>(){ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>"li"</code><code>).click(</code><code>function</code><code>(){&nbsp;</code><code>//点击可通过标签，id，类名等</code></p> <p><code>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert($(this).attr("id")) //此处可以拿到点击元素的id ，取到其value值及用attr（）方法&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert($(</code><code>this</code><code>).html())&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//拿到点击元素的内容&lt;br&gt;　　　　　　　　　　　　　　　　//拿到内容后即可使用ajax 方法与后台交换数据，进行交互</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>code = $(</code><code>this</code><code>).attr(</code><code>"id"</code><code>)</code></p> <p><code>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(code)</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>"#a div"</code><code>).remove();&nbsp;</code><code>//配合点击事件拿到元素的同时删掉HTML页面部分内容 同时也可用添加元素的方法添加元素</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>"#b div"</code><code>).remove();</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>"#c div"</code><code>).remove();&nbsp;&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>})</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

[Jquery _ radio]: https://www.cnblogs.com/1539136475-/p/4651325.html
[6e3170d1-a0ea-3a86-8add-a1eb66d68c23.jpg]: /images/20211211/010fba2343404c5eb2ec92fff647e91c.png
[0e05394d-723a-3fba-b3f3-e43eb8ffc60f.jpg]: /images/20211211/4f17b18573ee43d388500935025417c7.png
[jquery_select_change]: https://www.cnblogs.com/tianyiyi/p/3506810.html