JQuery选择器

最新推荐文章于 2022-11-03 22:33:30 发布
最新推荐文章于 2022-11-03 22:33:30 发布
阅读量490 收藏
点赞数
分类专栏： JQuery学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fygkchina/article/details/20716843
版权

所用到的Html如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/select.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<table id="test_table" width="1100" height="418" border="1" cellpadding="0" cellspacing="0">
  <tr bgcolor="#009966">
    <td height="62"><div align="center">
      <input type="checkbox" name="checkbox" value="checkbox" >
    </div></td>
    <td><div align="center">UserName</div></td>
    <td><div align="center">Password</div></td>
    <td><div align="center">Address</div></td>
    <td><div align="center">Phone</div></td>
  </tr>
  <tr>
    <td><div align="center">
      <input type="checkbox" name="checkbox2" value="checkbox">
      <input type="hidden" value="1" />
    </div></td>
    <td><div align="center">admin1</div></td>
    <td><div align="center">admin1</div></td>
    <td><div align="center">Address00000001</div></td>
    <td><div align="center">000000000000001</div></td>
  </tr>
  <tr>
    <td><div align="center">
      <input type="checkbox" name="checkbox3" value="checkbox">
      <input type="hidden" value="2" />
    </div></td>
    <td><div align="center">admin2</div></td>
    <td><div align="center">admin2</div></td>
    <td><div align="center">Address00000002</div></td>
    <td><div align="center">000000000000002</div></td>
  </tr>
  <tr>
    <td><div align="center">
      <input type="checkbox" name="checkbox4" value="checkbox">
      <input type="hidden" value="3" />
    </div></td>
    <td><div align="center">admin3</div></td>
    <td><div align="center">admin3</div></td>
    <td><div align="center">Address00000003</div></td>
    <td><div align="center">000000000000003</div></td>
  </tr>
  <tr>
    <td><div align="center">
      <input type="checkbox" name="checkbox5" value="checkbox">
      <input type="hidden" value="4" />
    </div></td>
    <td><div align="center">admin4</div></td>
    <td><div align="center">admin4</div></td>
    <td><div align="center">Address00000004</div></td>
    <td><div align="center">000000000000004</div></td>
  </tr>
  <tr>
    <td><div align="center">
      <input type="checkbox" name="checkbox6" value="checkbox">
      <input type="hidden" value="5" />
    </div></td>
    <td><div align="center">admin5</div></td>
    <td><div align="center">admin5</div></td>
    <td><div align="center">Address00000005</div></td>
    <td><div align="center">000000000000005</div></td>
  </tr>
  <tr>
    <td><div align="center">
      <input type="checkbox" name="checkbox7" value="checkbox">
      <input type="hidden" value="6" />
    </div></td>
    <td><div align="center">admin6</div></td>
    <td><div align="center">admin6</div></td>
    <td><div align="center">Address00000006</div></td>
    <td><div align="center">000000000000006</div></td>
  </tr>
  <tr>
    <td><div align="center">
      <input type="checkbox" name="checkbox8" value="checkbox">
      <input type="hidden" value="7" />
    </div></td>
    <td><div align="center">admin7</div></td>
    <td><div align="center">admin7</div></td>
    <td><div align="center">Address00000007</div></td>
    <td><div align="center">000000000000007</div></td>
  </tr>
  <tr>
    <td><div align="center">
      <input type="checkbox" name="checkbox9" value="checkbox">
      <input type="hidden" value="8" />
    </div></td>
    <td><div align="center">admin8</div></td>
    <td><div align="center">admin8</div></td>
    <td><div align="center">Address00000008</div></td>
    <td><div align="center">000000000000008</div></td>
  </tr>
  <tr>
    <td><div align="center">
      <input type="checkbox" name="checkbox10" value="checkbox">
      <input type="hidden" value="9" />
    </div></td>
    <td><div align="center">admin9</div></td>
    <td><div align="center">admin9</div></td>
    <td><div align="center">Address00000009</div></td>
    <td><div align="center">000000000000009</div></td>
  </tr>
</table>
<p>
  <input name=" Save " type="button" id="test_btn" value=" Save ">
  <input type="button" name="Submit" id="even_btn">
  <input type="button" name="Submit2" id="odd_btn">
</p>
<p>
   Hidden value: <input type="hidden" value="10000" />
</p>
<h1>Test H1</h1>
<h2>Test H1</h2>
<div id="test_div">
    <ul class="ul_1 ul_2">
        <li><a href="http://www.baidu.com/test.jpg">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
    <ul class="ul_2">
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <ul class="ul_2">
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</div>

<p><img src="20140123_155604.jpg" width="108" height="80" ></p>
<p><input type="image" src="20140123_155604.jpg" width="108" height="80" /></p>
<p>
  <input type="file" name="file">
</p>
</body>
</html>

用法JS

$(function(){
    
    //1.选择当前页面中的所有元素 $("*")
    //console.log($("*"));
    
    //2.ID选择器
    //console.log($("#test_table"));
    
    //3.单个Class选择器
    //console.log($(".ul_1"));
    
    //4.多个class || 选择器   查找class为ul_1或ul_2或ul_3的对象
    //console.log($(".ul_1,.ul_2,.ul_3"));
    
    //5.多个class & 选择器   查找class为ul_1并且class为ul_2的对象
    //console.log($(".ul_1.ul_2"));
    
    //6.html标签选择器 element
    //console.log($("div,ul,li,p,a,input"));
    
    //7.First选择器 查找所有p标签中的第一个
    //console.log($("p:first"));
    
    //8.First选择器 查找所有p标签中的最后一个
    //console.log($("p:last"));
    
    //9.Even选择器， 查找所下标为偶数行的tr
    //console.log($("tr:even"));
    
    //10.Even选择器，在某个对象中查找元素，在指定的表格中查找所有下标为偶数tr
    //console.log($("tr:even",$("#test_table")));
    
    //11.Odd选择器， 查找所有下标为奇数行的tr
    //console.log($("tr:odd"));
    
    //12.Odd选择器，在某个对象中查找元素，在指定的表格中查找所有下标为奇数tr
    //console.log($("tr:odd",$("#test_table")));
    
    //13.Eq选择器(equals) 查找div下的ul下的li，并且index=2的li
    //console.log($("div ul li:eq(2)"));
    
    //14.Gt选择器(greater than) 查找div下的ul下的li，并且index>2的li
    //console.log($("div ul li:gt(2)"));
    
    //15.Lt选择器(Less than) 查找div下的ul下的li，并且index<2的li
    //console.log($("div ul li:lt(2)"));
    
    //16.Not选择器   除了checkbox以外的所有input
    //console.log($("input:not(:checkbox)"));
    
    //17.Header选择器，选择html中的h标签， <h1> - <h6> 例如:h1,h2,...h6
    //console.log($(":header"));
    
    //18.Contains选择器，查找包含指定字符串的所有元素:contains
    //console.log($("td div:contains('Address')"));
    
    //19.Empty选择器，查找无子（元素）节点的所有元素
    //console.log($(":empty"));
    
    //20.Hidden选择器，查找所有隐藏的input元素
    //console.log($("input:hidden"));
    
    //21.Visible选择器，查找所有的可见的元素
    //console.log($(":visible"));
    //console.log($("input:visible"));//查找所有的可见的input元素
    
    //22.多选选择器,
    //console.log($("div,ul,li"));//查找所有的div,ul和li
    //console.log($("div ul li"));//查找div下的ul下的所有li
    //console.log($("li",$("#test_div")));//在id为test_div中查找所有的li
    //console.log($("li","#test_div"));//在id为test_div中查找所有的li
    
    //23.属性选择器
    //console.log($("[href]"));//查找所有带href属性的元素
    //console.log($("[href='#']"));//查找所有href='#'的元素
    //console.log($("[href!='#']"));//查找所有href!='#'的元素
    //console.log($("[href$='.jpg']"));//查找所有href属性的值包含以 ".jpg" 结尾的元素
    
    //console.log($(":input"));//查找所有的input
    //console.log($(":text"));//查找所有属性为text的元素
    //console.log($(":password"));//查找所有属性为password的元素
    //console.log($(":radio"));//查找所有属性为radio的元素
    //console.log($(":checkbox"));//查找所有属性为checkbox的元素
    //console.log($(":submit"));//查找所有属性为submit的元素
    //console.log($(":reset"));//查找所有属性为reset的元素
    //console.log($(":button"));//查找所有属性为button的元素
    //console.log($(":image"));//查找所有属性为image的元素
    //console.log($("img"));//查找所有标签为img的元素
    //console.log($(":file"));//查找所有属性为file的元素
    //console.log($(":enabled"));//所有激活的 input 元素
    //console.log($(":disabled"));//所有禁用的 input 元素
    //console.log($(":selected"));//所有被选取的 input 元素
    //console.log($("checked"));//所有被选中的 input 元素
    
    //总结，1.标签类的，可以在jquery中直接用标签选择，2.属性类的，在属性名前加:
    
    //给id为test_table的table中的checked加上全选和全不选
    var _first = $(":checkbox:first","#test_table");
    
    _first.live("click",function(){
        
        if(_first && _first.attr("checked")=="checked"){
            
            $(":checkbox","#test_table").attr("checked","checked");
        }else{
            
            $(":checkbox","#test_table").removeAttr("checked");
        }
    });
    
    //获取选中后提交的值
    $("#test_btn").live("click",function(){
        
        var _select_ids = $("#test_table td").map(function(){
            
            var _value = "";
            
            if($(":checkbox",this).attr("checked") == "checked"){
                
                _value = $(":hidden",this).val();
            }
            
            return _value?_value:null;
        }).get().join(",");
        
        alert("你所选择的Id为: "+_select_ids);
    });
    
    
    var _even_btn = $("#even_btn").val("偶数行加背景色");
    var _odd_btn = $("#odd_btn").val("奇数行加背景色");
    
    //给table所有的偶数行加上背景色#99CCFF
    _even_btn.toggle(function(){
        
        var _find_tr = $("tr:even:gt(0)","#test_table").css("background-color","#99CCFF");
        
        $(this).val("偶数行去背景色");
        
        //顺便给选择的行中的checkbox加上选中
        $(":checkbox",_find_tr).attr("checked","checked");
        
    },function(){
        
        var _find_tr = $("tr:even","#test_table").css("background-color","");
        
        $(this).val("偶数行加背景色");
        
        $(":checkbox",_find_tr).removeAttr("checked");
    });
    
    
    //给table所有的奇数行加上背景色#FF99CC
    _odd_btn.toggle(function(){
        
        var _find_tr = $("tr:odd","#test_table").css("background-color","#FF99CC");
        
        $(this).val("奇数行去背景色");
        
        //顺便给选择的行中的checkbox加上选中
        $(":checkbox",_find_tr).attr("checked","checked");
        
    },function(){
        
        var _find_tr = $("tr:odd","#test_table").css("background-color","");
        
        $(this).val("奇数行加背景色");
        
        $(":checkbox",_find_tr).removeAttr("checked");
    });
});

浪子尘晨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery选择器
m0_57774967的博客
06-16 4668
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
jQuery 选择器
longlonglaobiao
04-09 542
jQuery 概述 jQuery 是对 js 的封装，让我们能够用更加简单的方式使用脚本代码。学习 jQuery，其实就是学习 jQuery 中封装的一大堆方法 jQuery 的版本 slim 即简化版，比普通版本缺少 Ajax 和特效模块模块 uncompressed 即未压缩版，包含了大量的注释和空行，适用于学习与开发环境，源码清晰 minified 是压缩版，适用于生产环境，...
JQuery选择器超级详细
热门推荐
林高禄
08-06 1万+
基本选择器 id选择器：$("#id的属性值") 获取与指定id属性值匹配的元素 单击按钮，将id为myid的元素背景为绿色 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>JQuery选择器</title> <script src="js/jquery-3.3.1.min...
jquery选择器以及案例
最新发布
m0_59745705的博客
11-03 1129
jquery选择器是jquery为我们提供的一组方法，让我们更加方便的获取到页面中的元素，注意：jquery选择器返回的是jquery对象。 jquery选择器有很多，但是选择器之间可以互相替代，就是说获取到一个元素，会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。 Css()方法：获取/设置样式 1.获取样式：css（）方法设置参数为要获取值的样式名。 $('#getbtn').click(function(){ 1.1获取id为div1这个元素的样式 conso
详解强大的jQuery选择器之基本选择器、层次选择器
12-10
jQuery选择器是jQuery库的核心特性之一，它极大地简化了JavaScript中的DOM操作，使得开发者能够更加高效地选取和操作页面上的元素。本文将详细介绍jQuery的基本选择器和层次选择器。 首先，我们来看基本选择器，这...
jQuery 选择器用法实例分析【prev + next】
10-15
jQuery选择器是jQuery库中的核心部分，用于高效地选取DOM元素。在JavaScript中，选取DOM元素通常需要编写复杂的代码，而jQuery提供了一套简洁、强大的选择器系统，使得选取元素变得简单直观。本文将深入探讨jQuery...
jquery选择器简述
11-24
jQuery选择器是jQuery库的核心功能之一，它极大地简化了对网页DOM元素的选取，使得JavaScript开发者能够更加高效地操作页面内容。jQuery选择器基于CSS选择器，并在其基础上扩展了一些更强大的功能，使得开发者能以...
jQuery选择器及jquery案例详解(必看)
10-22
本文将重点介绍jQuery选择器的种类和使用，以及通过具体的案例来深入理解jQuery选择器的应用。 首先，jQuery选择器是jQuery库的核心部分之一，它允许开发者通过不同的语法来选择页面上的元素。选择器可以分为几大类...
有关display:block、display:table在IE、火狐的兼容性问题
fygkchina的专栏
07-17 6750
最近在作项目的时候碰到一个问题，就是需要AJAX来交互显示两个table，按照常理，对于一个表格需要显示时，使用：display:block属性，不需要显示时使用display:none属性，而且这样做在IE浏览器中显示正常，没有任何问题。在火狐下就有问题了，表格始终只显示原来的60%左右的宽度。 　　然后通FireBug去看了下源码，调试下了，发现是display:block属性问题。
js正则标志/g /i /m的用法，以及实例
fygkchina的专栏
02-24 4559
一，js正则标志/g,/i,/m说明 1，/g 表示该表达式将用来在输入字符串中查找所有可能的匹配，返回的结果可以是多个。如果不加/g最多只会匹配一个 2，/i  表示匹配的时候不区分大小写 3，/m 表示多行匹配，什么是多行匹配呢？就是匹配换行符两端的潜在匹配。影响正则中的^$符号 二，实例说明 1，/g的用法 str = "tankZHang
JS正则表达式大全(整理详细且实用)
fygkchina的专栏
12-09 3062
正则表达式中的特殊字符 字符 含意 \ 做为转意，即通常在"\"后面的字符不按原来意义解释，如/b/匹配字符"b"，当b前面加了反斜杆后/\b/，转意为匹配一个单词的边界。 -或- 对正则表达式功能字符的还原，如"*"匹配它前面元字符0次或多次，/a*/将匹配a,aa,aaa，加了"\"后，/a\*/将只匹配"a*"。 ^ 匹配一个输入或一行的开头，/^a/匹配"an A"
自定义Checkbox的checked与unchecked
fygkchina的专栏
12-13 2005
最近项目中，要用到互斥的Checkbox,所以自己写了个方法： 1.首先是用如下方法: $(':checkbox[name=users]').each(function(){      $(this).click(function(){            if($(this).attr('checked')){                 $(':checkbox[name=us
jQuery Ajax 实例 全解析
fygkchina的专栏
04-11 1527
Query确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。 废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [cal
jquery datagrid 参数及使用
fygkchina的专栏
09-29 1051
数据表格 - DataGrid 数据表格显示的数据以表格的形式，并提供了丰富的选择，排序，分组和编辑数据的支持。这个数据表格被设计以缩短开发时间，并要求开发商没有具体的知识。它是轻量级的，功能丰富的。单元格合并，多列标题，冻结列和页脚是其功能只是一小部分。继承$.fn.panel.defaults，使用$.fn.datagrid.defaults重载默认值。. 依赖组件（D
javascript判断数字大小
fygkchina的专栏
04-05 999
parseInt(obj) —— 判断obj是否为整数，如果为有小数点的数字(包括后面多个小数点)则自动截掉小数后的所有位数(不四舍五入)；如果不为数字，则返回NaN。 parseFloat(obj)——判断obj是否为浮点数，如果为有小数点的数字（包括后面多个小数点）则自动截掉第2个小数点的所有位数（不四舍五入）；如果不为数字，则返回NaN。 isNaN(obj)——判断obj是否为字符串，
ajax返回值为中文时乱码解决方法
fygkchina的专栏
04-05 933
/**    * 使用ajax检查用户是否存在    */   public void checkUser()  {        try      {            System.out.println("userName="+user.getUserName());            HttpServletResponse response=Servle
jQuery获取浏览器中的分辨率
fygkchina的专栏
04-22 726
$(document).ready(function(){  alert($(window).height()); //浏览器当前窗口可视区域高度  alert($(document).height()); //浏览器当前窗口文档的高度  alert($(document.body).height());//浏览器当前窗口文档body的高度  alert($(document.body).
jQuery选择器全面解析
本教程将深入讲解jQuery选择器的使用。 1. 在HTML页面中添加jQuery 在HTML页面中引入jQuery库，通常有两种方式：一是通过谷歌的CDN(Content Delivery Network)来链接官方提供的最新或特定版本；二是直接下载jQuery...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值