jQuery选择器

最新推荐文章于 2024-01-14 11:54:30 发布

勇PAN高峰

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量218

点赞数

分类专栏：笔记日志文章标签： jQuery选择器 jQuery基础

本文链接：https://blog.csdn.net/sky2714/article/details/51729751

版权

笔记日志专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jquery选择器

基本选择器；

元素选择器； $(“元素名”) id选择器；$ (“#id名”)
class选择器； $(“.类名”) 群组选择器；$ (“选择器1 , 选择器2 ,……,选择器n”)
选择器{padding:0;margin:0;}

层次选择器；

jQuery层次选择器
选择器说明
$(“M N”) 后代选择器，选择M元素内部后代N元素（所有N元素）$ (“M>N”) 子代选择器，选择M元素内部子代N元素（所有第1级N元素）
$(“M~N”) 兄弟选择器，选择M元素后所有的同级N元素$ (“M＋N”) 相邻选择器，选择M元素相邻的下一个元素（M、N是同级元素）

属性选择器；
伪类选择器:
（1）简单伪类选择器；

:not(selector) 选择除了某个选择器之外的所有元素
:first或first() 选择某元素的第一个元素（非子元素）
:last或last() 选择某元素的最后一个元素（非子元素）
:odd 选择某元素的索引值为奇数的元素
:even 选择某元素的索引值为偶数的元素
:eq(index) 选择给定索引值的元素，索引值index是一个整数，从0开始
:lt(index) 选择所有小于索引值的元素，索引值index是一个整数，从0开始
:gt(index) 选择所有大于索引值的元素，索引值index是一个整数，从0开始
:header 选择h1~h6的标题元素
:animated 选择所有正在执行动画效果的元素
:root 选择页面的根元素
:target 选择当前活动的目标元素（锚点）

（2）子元素伪类选择器；

:first-child 选择父元素的第1个子元素
:last-child 选择父元素的最后1个子元素
:nth-child(n) 选择父元素下的第n个元素或奇偶元素，n的值为“整数|odd|even”
:only-child 选择父元素中唯一的子元素（该父元素只有一个子元素）
:first-of-type 选择同元素类型的第1个同级兄弟元素
:last-of-type 选择同元素类型的最后1个同级兄弟元素
:nth-of-type 选择同元素类型的第n个同级兄弟元素，n的值可以是“整数|odd|even”
:only-of-type 匹配父元素中特定类型的唯一子元素（但是父元素可以有多个子元素）

（3）可见性伪类选择器；

:hidden 选取所有不可见元素
:visible 选取所有可见元素，与:hidden相反

（4）内容伪类选择器；:

contains(text) 选择包含给定文本内容的元素
:has(selector) 选择含有选择器所匹配元素的元素
:empty 选择所有不包含子元素或者不包含文本的元素
:parent 选择含有子元素或者文本的元素（跟:empty相反）

（5）表单伪类选择器；

:input 选择所有input元素
:button 选择所有普通按钮，即type=”button”的input元素
:submit 选择所有提交按钮，即type=”submit”的input元素
:reset 选择所有重置按钮，即type=”reset”的input元素
:text 选择所有单行文本框
:textarea 选择所有多行文本框
:password 选择所有密码文本框
:radio 选择所有单选按钮
:checkbox 选择所有复选框
:image 选择所有图像域
:hidden 选择所有隐藏域
:file 选择所有文件域

（6）表单属性伪类选择器；

:checked 选择所有被选中的表单元素，一般用于radio和checkbox
option:selected 选择所有被选中的option元素
:enabled 选择所有可用元素，一般用于input、select和textarea
:disabled 选择所有不可用元素，一般用于input、select和textarea
:read-only 选择所有只读元素，一般用于input和textarea
:focus 选择获得焦点的元素，常用于input和textarea

实例1.控制div的现实和隐藏.3种方法实现


<!DOCTYPE html> <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Title</title> </head> <script src="jquery-3.0.0.min.js"></script> <style>
    div{
        width: 300px;
        height: 300px;
        background-color: skyblue;
    } </style> <body> <button id="s">显示</button> <button id="h">隐藏</button> <button id="hs">显示或隐藏</button> <div id="d"></div> <script> //    $("#s").bind("click",function () { //        $("#d").show(1000) //    }); //    $("#h").bind("click",function () { //        $("#d").hide(1000) //    }); //    $("#hs").bind("click",function () { //        $("#d").toggle(1000) //  });
    //----------------------------------- //    $("#s").bind("click",function () { //        $("#d").css("display","block") //    }); //    $("#h").bind("click",function () { //        $("#d").css("display","none") //    })
    $("#s").bind("click",function () {
        $("#d").slideDown(1000)
    });
    $("#h").bind("click",function () {
         $("#d").slideUp(1000)
    });
    $("#hs").bind("click",function () {
         $("#d").slideToggle(1000)
    });


</script> </body> </html>

实例2.按钮控制div移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="jquery-3.0.0.min.js"></script>
<style>
    div{
        width: 300px;
        height: 300px;
        background-color: skyblue;
      margin: 20% auto 0 auto;
        position: relative;
    }
</style>
<body>
<button>↑</button>
<button>↓</button>
<button>←</button>
<button>→</button>
<div>456</div>
<script>
    $("button:contains('↑')").click(function(){
       $("div").animate({top:"-=30"},"slow");// $("div").css("top","-=30")
    });
    $("button:contains('↓')").click(function(){
        $("div").animate({top:"+=30"},"slow");// $("div").css("top","+=30")
    });
    $("button:contains('←')").click(function(){
        $("div").animate({left:"-=30"},"slow");// $("div").css("left","-=30")
    });
    $("button:contains('→')").click(function(){
        $("div").animate({left:"+=30"},"slow");// $("div").css("left","+=30")
    });
//  36
</script>
</body>
</html>

实例3.获取复选框的值并输出所有选中项的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="jquery-3.0.0.min.js"></script>
<body>
<input type="checkbox" name="ck" value="100">100
<input type="checkbox" name="ck" value="80">80
<input type="checkbox" name="ck" value="60">60
<input type="checkbox" name="ck" value="40">40
<input type="text" id="i">
<button id="b1">点我</button>
<div style="width: 300px;height: 300px;background-color: skyblue"></div>
<script>
  $("#b1").click(function () {
//      var chks=$("input:checked");
//      for(n=0;n<chks.length;n++){
//          document.write(chks[n].value+"<br>");
//       }
      var t="";
 //得到复选框的选中的第一项的值
$("input:checked").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出
     t=t+$(this).val()+",";
});
         $("#i").val(t);
//      alert(t);
  })
</script>
</body>
</html>

实例4.计算面积

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="jquery-3.0.0.min.js"></script>
<body>
长:<input type="number" id="w">
宽:<input type="number" id="h">
<input type="button" value="计算" id="c">
<input type="text" id="sq">
<script>
   $("#c").click(function () {
       $("#sq").val($("#w").val()*$("#h").val())
   });

</script>
</body>
</html>

勇PAN高峰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器

jquery选择器基本选择器；元素选择器；(“元素名”)id选择器；(“元素名”) id选择器；(“#id名”) class选择器；(“.类名”)群组选择器；(“.类名”) 群组选择器；(“选择器1 , 选择器2 ,……,选择器n”) 选择器{padding:0;margin:0;}层次选择器；jQuery层次选择器选择器说明 (“MN”)后代选择器，选择M元素内部
复制链接

扫一扫

专栏目录