jQuery

分类: IT文章 • 2023-11-28 19:20:43

一、jQuery

jQuery的基础语法：$(selector).action()

语法规则：$("xxx")

参考：http://jquery.cuishifeng.cn/

二、选择器

1、基本选择器

- ID选择器                   $("#id的值")
- 类选择器（class）          $(".class的值")
- 标签选择器(html标签)       $("标签的名字")
- 所有标签                   $("*")

- 组合选择器              $("xx,xxx")
2、层级选择器

- 从一个标签的子子孙孙去找   $("父亲  子子孙孙")
- 从一个标签的儿子里面找     $("父亲>儿子标签")
- 找紧挨着的标签             $("标签+下面紧挨着的那个标签")
- 找后面所有同级的           $(".outer~div")

3、筛选器
   - 写在引号里面的

      $(" :first") 
      $(" :not('')")
      $(" :even")
      $(" :odd")
      $(" :eq")
      $(" :gt")
      $(" :last")
      $(" :focus")

内容
$(" :contains")
$(" :empty")
$(" :has('')")
$(" :parent")  *****   区别于$("").parent()

可见性
$(" :hidden)
$(" :visible")

属性
input[name]  --> 有name属性的input
input[type='password']  --> 类型是password的input标签

表单
:input
:password
:checkbox
:radio
:submit
:button
:image
:file

表单对象属性
:enable
:disable
:checked
:selected

- 写在信号外面当方法用的

  过滤
   $("").first()
   $("").parent()
   $("").eq()
   .hasClass()

  查找
   .children()
   .find()
   .next()
   .nextAll()
   .nextUntil()

   .parent()
   .parents()
   .parentsUntil()

   .prev()
   .prevAll()
   .prevUntil()

   .siblings()
4、插找筛选器

 查找子标签：         $("div").children(".test")      $("div").find(".test")  
                               
 向下查找兄弟标签：    $(".test").next()               $(".test").nextAll()     
                    $(".test").nextUntil() 
                           
 向上查找兄弟标签：    $("div").prev()                  $("div").prevAll()       
                    $("div").prevUntil()   
 查找所有兄弟标签：    $("div").siblings()  
              
 查找父标签：         $(".test").parent()              $(".test").parents()     
                    $(".test").parentUntil()

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例一</title>
    <style>
        .c99 {
            color: red;
        }
        .c11 {
            height: 100px;
             100px;
            border-radius: 50%;
            border: 1px solid #cccccc;
            display: inline-block;
        }

        .c12 {
            background-color: yellow;
        }
    </style>
</head>
<body>
<div >哪吒</div>
<div >
    <div ></div>
    <div >i3</div>
    <div >i4</div>
    <div class="c1">.c1</div>
    <p>pppppp</p>
    <h2>稳住，我们能学会。</h2>
    <h2>猥琐发育，别浪。</h2>
    <div class="c1">.c1</div>
    <div class="c2">.c2</div>

    <div>
        <div></div>
        <div><input type="text" value="222"></div>
        <div></div>
    </div>
    <div >
        <input type="text" value="这是第0个input">
        <input class="c1" type="text" value="这是第1个input">
        <div>
            <p></p>
            <input type="text" value="aaa"></div>
        <input  name="aaa" class="c2" type="text" value="这是第2个input">
        <input type="password" value="这是第3个input">
        <div ><p>div下pppppp</p></div>
    </div>
    <div></div>
    <input type="checkbox" value="1" checked>
    <input type="checkbox" value="11">
    <input type="checkbox" value="111">
    <input type="checkbox" value="1111">
    <input type="checkbox" value="1111" disabled>
    <input type="radio" value="0">
</div>

<div >
    <div>111</div>
    <div >222</div>
    <div>333</div>
    <div>444</div>
    <div >555</div>
</div>

<div class="c11"></div>

<button >开关</button>
<script src="jquery-3.2.1.js"></script>
<script>
    // id选择器
    $("#i1")

//    $("#switch")[0].onclick = function () {
//        ....
//    }
//jQuery绑定事件

 $("#switch").on("click", function () {
        // 找灯泡
        $(".c11").toggleClass("c12");
    })
</script>
</body>

示列

<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery选择器筛选器练习</title>
  <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
   <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">

</head>
<body>
<!--导航栏开始-->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
              data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" >
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
             aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
             aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">哪吒</a></li>
            <li><a >Egon</a></li>
            <li><a class="c1" href="#">日天</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Alex</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<!--导航栏结束-->


<div class="container">

  <div class="jumbotron">
    <div >
      <h1 class="c1">学厨师，去新东方。</h1>
      <h1 class="c1">学Python，就来老男孩。</h1>
      <p >查看更多</a></p></div>
  </div>
  <hr>
  <div class="row">
    <div class="col-md-12">
      <table class="table table-bordered table-striped">
        <thead>
        <tr>
          <th>#</th>
          <th>姓名</th>
          <th>爱好</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <th>1</th>
          <td>Egon</td>
          <td>杠娘</td>
          <td>
            <button class="btn btn-warning">编辑</button>
            <button class="btn btn-danger">删除</button>
          </td>
        </tr>
        <tr>
          <th>2</th>
          <td>Yuan</td>
          <td>日天</td>
          <td>
            <button class="btn btn-warning">编辑</button>
            <button class="btn btn-danger">删除</button>
          </td>
        </tr>
        <tr >
          <th>3</th>
          <td>八级哥</td>
          <td>英语</td>
          <td>
            <button class="btn btn-warning">编辑</button>
            <button class="btn btn-danger">删除</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>

  <hr>
  <div class="row">
    <div class="col-md-12">
      <form >
        <div class="form-group">
          <label for="exampleInputEmail1">邮箱</label>
          <input type="email" class="form-control" >
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">密码</label>
          <input type="password" class="form-control" >
        </div>
        <div class="form-group">
          <label for="exampleInputFile">上传头像</label>
          <input type="file" >
          <p class="help-block">只支持img格式。</p>
        </div>
        <button >提交</button>
      </form>
    </div>
  </div>

  <hr>

  <div class="row">
    <div class="col-md-12">
      <div class="checkbox-wrapper">
        <div class="panel panel-info">
          <div class="panel-heading">jQuery学习指南</div>
          <div >
            <div class="checkbox">
              <label>
                <input type="checkbox" value="0">
                jQuery一点都不难
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="1" checked>
                jQuery一学就会
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="2">
                jQuery就要多练
              </label>
            </div>

            <div class="checkbox">
              <label>
                <input type="checkbox" value="3" disabled>
                jQuery学不好
              </label>
            </div>
          </div>
        </div>
      </div>
      <hr>
      <div class="radio-wrapper">

        <div class="panel panel-info">
          <div class="panel-heading">我来老男孩之后...</div>
          <div class="panel-body">
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" >
                我要上课玩手机
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" >
                我要上课好好听
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <hr>

  <div class="row">
    <div class="col-md-12">
      <h2>练习题：</h2>
      <ol >
        <li>找到本页面中id是<code>i1</code>的标签</li>
        <li>找到本页面中所有的<code>h2</code>标签</li>
        <li>找到本页面中所有的<code>input</code>标签</li>
        <li>找到本页面所有样式类中有<code>c1</code>的标签</li>
        <li>找到本页面所有样式类中有<code>btn-default</code>的标签</li>
        <li>找到本页面所有样式类中有<code>c1</code>的标签和所有<code>h2</code>标签</li>
        <li>找到本页面所有样式类中有<code>c1</code>的标签和id是<code>p3</code>的标签</li>
        <li>找到本页面所有样式类中有<code>c1</code>的标签和所有样式类中有<code>btn</code>的标签</li>
        <p ></p>
        <li>找到本页面中<code>form</code>标签中的所有<code>input</code>标签</li>
        <li>找到本页面中<code>label</code>标签下的<code>input</code>标签</li>子标签
        <li>找到本页面中紧挨着<code>label</code>标签的<code>input</code>标签</li>
        <li>找到本页面中id为<code>p2</code>的标签后面所有和它同级的<code>li</code>标签</li>
        <p ></p>
        <li>找到id值为<code>f1</code>的标签下面的第一个input标签</li>
        <li>找到id值为<code>my-checkbox</code>的标签下面最后一个input标签</li>
        <li>找到id值为<code>my-checkbox</code>的标签下面没有被选中的那个input标签</li>
        <li>找到所有含有<code>input</code>标签的<code>label</code>标签</li>
      </ol>
    </div>
  </div>

</div>

<script src="jquery3_0_0.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>

jQuery选择器筛选联系

三、属性

1. 属性

      如果你的选择器选出了多个对象，那么默认只会返回第一个的属性

         attr(name|pro|key,val|fn)
            - 一个参数 获取属性的值
            - 两个参数 设置属性的值
            - 点击加载图片
         removeAttr(name)
            - 删除属性的值

         prop(n|p|k,v|f)  属性的返回值是布尔类型
         removeProp(name)
            - 删除属性的值

         - 例子
            全选、反选、取消的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选反选取消</title>

    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">
                <button >全选</button>
                <button >取消</button>
                <button >反选</button>
            </div>
            <div class="panel-body">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th scope="row"><input type="checkbox"></th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <th scope="row"><input type="checkbox"></th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <th scope="row"><input type="checkbox"></th>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
// 全选
$("#all").on("click", function () {
    // 统一的操作
$(":checkbox").prop("checked", true);
})

    //取消
    $("#cancel").on("click", function () {
        $(":checkbox").prop("checked", false);
    })


//    // 反选
    $("#reverse").on("click", function () {
        // 取出所有的checkbox
        var checkboxEles = $(":checkbox");
//         翔哥的耻辱
//        checkboxEles.prop("checked", !(checkboxEles.prop("checked")))
//         要循环checkbox
        // 选中的就取消
        // 没选中的就选中
        checkboxEles.each(function () {
            var thisCheckbox = $(this);  // 在教室里走的那个人
            var isChecked = thisCheckbox.prop("checked");  // 是否选中

//            方法一：判断的方式
            if (isChecked){
                // 取消选中
                thisCheckbox.prop("checked", false);
            }else {
                // 选中
                thisCheckbox.prop("checked", true);
            }

//            // 方法二：直接取反的方式
//            thisCheckbox.prop("checked", !isChecked);

        })
    })
//    $("#reverse").on("click", function () {
//        $(":checked").prop("checked", false);
//        $(":not(:checked)").prop("checked", true);
//    })

</script>

</body>
</html>

全选，反选，取消

jQuery

相关推荐