jQuery语法

【一】查找标签

【1】基本选择器

// id选择器
$('#id')

// 标签选择器
$('tag')

// 类选择器
$('.class')

// 找到由xx类的xx标签
$('tag.class')

// 所有元素选择器
$('*')

// 组合选择器
$("#id, .className, tagName")

【2】层级选择器

// x,y 这里指代任意标签

// x的所有后代y（子子孙孙）
$('x y')

// x的所有儿子y
$('s > y')

// 所有紧跟在x后面的y
$('x + y')

// x之后所有的兄弟y
$('x ~ y')

【3】基本筛选器

// 第一个
:first

// 最后一个
:last

// 索引等于index的那个元素
:eq(index)

// 配所有索引值为偶数的元素，从 0 开始计数
:even

// 匹配所有索引值为奇数的元素，从 0 开始计数
:odd

// 匹配所有大于给定索引值的元素
:gt(index)

// 匹配所有小于给定索引值的元素
:lt(index)

// 移除所有满足not条件的标签
:not(元素选择器)

// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
:has(元素选择器)

例子

// 找到所有后代中有h1标签的div标签
$("div:has(h1)")

// 找到所有后代中有c1样式类的div标签
$("div:has(.c1)")

// 找到所有不包含c1样式类的li标签
$("li:not(.c1)")

// 找到所有后代中不含a标签的li标签
$("li:not(:has(a))")

练习

自定义模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery.min.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script></script>
    <style>
        .cover{
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(128,128,128,0.4);
            z-index: 99;
        }
        .modal {
            position: fixed;
            height: 400px;
            width: 600px;
            background-color: white;
            top: 50%;
            left: 50%;
            margin-left: -300px;
            margin-top: -200px;
            z-index: 1000;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div id="d3">我是最下面的</div>
<button id="d1">登录</button>
<div class="cover hide"></div>
<div class="modal hide" id="d4">
    <p>username:<input type="text"></p>
    <p>password:<input type="text"></p>
    <input type="button" value="确认">
    <input type="button" value="取消" id="d2">
</div>
<script>
    let $coverEle = $('div.cover')
    let $modaEle = $('#d4')
    let $cancelEle = $('')
    $('#d1').on('click',function (){
        // 将俩个hide类属性移除
        $coverEle.removeClass('hide')
        $modaEle.removeClass('hide')
    })
    $('#d2').on('click',function (){
    // 将俩个hide类属性移除
    $coverEle.addClass('hide')
    $modaEle.addClass('hide')
    })
</script>
</body>
</html>

【4】属性选择器

// 取所有有a属性的标签
$('[a]')

// 取所有a属性是b的标签
$('[a=b]')

// 取所有a属性不是b的标签
$('[a!=b]')

例子

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
    
// 取到checkbox类型的input标签
$("input[type='checkbox']");

// 取到类型不是text的input标签
$("input[type!='text']");

【5】表单选择器

// 获取所有文本输入框元素
$(':text')

// 获取所有密码输入框元素
$(':password')

// 获取所有文件上传输入框元素
$(':file')

// 获取所有单选输入框元素
$(':radio')

// 获取所有复选框元素
$(':checkbox')

// 选取所有提交按钮元素
$(':submit')

// 选取所有重置按钮元素
$(':reset')

// 选取所有按钮元素
$(':button')

【6】表单对象属性

// 选取所有可用的表单元素。
$("input:enabled")

// 选择所有被禁用的输入框
$("input:disabled")

//选取所有被选中的复选框或单选按钮
$("input:checked")

//选取所有被选中的下拉列表选项
$("select option:selected")

例子

// 找到可用的input标签

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签

// 找到被选中的option：

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

【7】筛选器方法

// 下一个元素
$('#id').next()

// 下面所有的元素
$('#id').nextAll()

// 下面直到某个标签之间所有的元素
$('#id')nextUntil('#id2')

// 上一个元素
$('#id').prev()

// 上面所有的元素
$('#id').prevAll()

// 上面直到某个标签之间所有的元素
$('#id').prevUntil('#id2')

// 父亲元素
$('#id').parent()

// 所有父亲元素
$('#id').parentAll()

// 直到某个标签之间的所有父亲元素
$('#id').parentUntil('#id2')

// 儿子元素
$('#id').children()

// 兄弟元素
$("#id").siblings()

// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p") == $('div p')

// 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$('div').filter('.c1') == $('div.c1')

补充

// 获取匹配的第一个元素
.first()

// 获取匹配的最后一个元素
.last()

// 从匹配元素的集合中删除与指定表达式匹配的元素
.not() 

// 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.has() 

// 索引值等于指定值的元素
.eq()

案例

// 左侧下拉栏案例
// 要求点击哪个标签 哪个标签就展开内容，其他标签隐藏内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .left {
            float: left;
            background-color: pink;
            width: 20%;
            height: 100%;
            position: fixed;
        }
        .title {
            font-size: 24px;
            color: white;
            text-align: center;
        }
        .item {
            border: 1px solid black;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="left">
    <div class="menu">
        <div class="title">菜单一
            <div class="item">111</div>
            <div class="item">222</div>
            <div class="item">333</div>
        </div>
    </div>
    <div class="menu">
        <div class="title">菜单二
            <div class="item">111</div>
            <div class="item">222</div>
            <div class="item">333</div>
        </div>
    </div>
    <div class="menu">
        <div class="title">菜单三
            <div class="item">111</div>
            <div class="item">222</div>
            <div class="item">333</div>
        </div>
    </div>
</div>
<script>
    $('.title').on('click',function (){
        // 给所有的item加hide
        $('.item').addClass('hide')
        // 再给当前点击对象的子元素全部取消hide
        $(this).children().removeClass('hide')
    })
</script>
</body>
</html>

【二】操作标签

【1】样式操作

// 添加指定CSS类名
$('#id').addClass('class')

// 删除指定CSS类名
$('#id').removeClass('class')

// 判断指定CSS类名是否存在
$('#id').hasClass('class')

// 切换指定CSS类名，如果有就移除，没有就添加
$('#id').toggleClass('class')

案例

// 开关灯案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        #d1 {
            width: 300px;
            height: 300px;
            border-radius: 50%;
        }

        .bg_green {
            background-color: green;
        }

        .bg_red {
            background-color: red;
        }
    </style>
</head>
<body>
<div class="bg_green bg_red" id="d1"></div>
<button id="d2">开灯</button>
<script>
    let divEle = $('#d1')
    let btnEle = $('#d2')
    btnEle.click(function (){
        divEle.toggleClass('bg_red')
    })
</script>
</body>
</html>

// 模态框案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery.min.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script></script>
    <style>
        .cover{
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(128,128,128,0.4);
            z-index: 99;
        }
        .modal {
            position: fixed;
            height: 400px;
            width: 600px;
            background-color: white;
            top: 50%;
            left: 50%;
            margin-left: -300px;
            margin-top: -200px;
            z-index: 1000;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div id="d3">我是最下面的</div>
<button id="d1">登录</button>
<div class="cover hide"></div>
<div class="modal hide" id="d4">
    <p>username:<input type="text"></p>
    <p>password:<input type="text"></p>
    <input type="button" value="确认">
    <input type="button" value="取消" id="d2">
</div>
<script>
    let $coverEle = $('div.cover')
    let $modaEle = $('#d4')
    let $cancelEle = $('')
    $('#d1').on('click',function (){
        // 将俩个hide类属性移除
        $coverEle.removeClass('hide')
        $modaEle.removeClass('hide')
    })
    $('#d2').on('click',function (){
    // 将俩个hide类属性移除
    $coverEle.addClass('hide')
    $modaEle.addClass('hide')
    })
</script>
</body>
</html>

【2】位置操作

// 获取匹配元素在当前窗口的相对偏移或设置元素位置
offset()

// 获取匹配元素相对父元素的偏移
position()

// 获取匹配元素相对滚动条顶部的偏移
scrollTop()

// 获取匹配元素相对滚动条左侧的偏移
scrollLeft()

案例

// 返回顶部案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
    .hide {
      display: none;
    }

    #d1 {
      position: fixed;
      background-color: blue;
      right: 20px;
      bottom: 20px;
      height: 50px;
      width: 50px;
    }
  </style>
</head>
<body>
<a href="" id="d1"></a>
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: pink"></div>
<div style="height: 500px;background-color: yellowgreen"></div>
<a href="#d1" class="hide">回到顶部</a>
<script>
  $(window).scroll(function (){
    if($(window).scrollTop()>300){
      $('#d1').removeClass('hide')
    }else {
      $('#d1').addClass('hide')
    }
  })
</script>
</body>
</html>

【3】获取尺寸

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

【4】文本操作

// 获取html内容
html()

// 设置html内容
html('val')

// 获取文本内容
text()

// 设置文本内容
text('val')

// 获取值内容
val()

// 设置值内容
val('val')

// 设置多选的checkbox、多选select的值
val([val1, val2])

例子

<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球

<select multiple id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

// 设置属性name=hobby 的标签值
$("[name='hobby']").val(['basketball', 'football']);

【5】属性操作

// 返回对应标签元素的指定属性的属性值
$('#id').attr('attrName')

// 设置对应标签元素的属性值
$('#id').attr('attrName','attrValue')

// 设置对应标签元素的多个属性值
$('#id').attr({k1: v1, k2:v2})

// 删除对应标签元素的指定属性
$('#id').removeAttr('attrName')

用于checkbox和radio

// 获取属性
prop()

// 移除属性
removeProp()

prop和attr的区别

prop和attr两者都是属性的意思，但是两者分别指向的属性不同
attr指向的属性是html标签的属性
prop指向的属性是DOM对象属性

例子

<input type="checkbox" id="i1" value="1">
    
$("#i1").attr("checked")  // undefined
$("#i1").prop("checked")  // false

// 对于html标签里面没有的属性，使用attr会得到undefined
// 而对于prop会得到false

<input type="checkbox" checked id="i1" value="1">
    
$("#i1").attr("checked")   // checked
$("#i1").prop("checked")  // true

// 这样就可以看出来attr的局限性，它的作用只限于HTML标签内的属性
// 而prop获取的是DOM对象属性，他会检索这个对象是否有这个属性，有这个属性就返回true反之则是false

总结

对于标签上有的能看到的属性和自定义属性都用attr
对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

【三】事件

【1】常用事件

// 点击事件
click(function(){...})

// 悬停事件
hover(function(){...})

// 失焦事件
blur(function(){...})

// 聚焦事件
focus(function(){...})

// 改变事件
change(function(){...})

// 键盘抬起事件
keyup(function(){...})

案例

// hover事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<p id="d1">励志成为python大牛</p>
<script>
    $('#d1').hover(function () {
            alert('沉淀')
        },
        function () {
            alert('继续沉淀')
        })
</script>
</body>
</html>

// input实时监控

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" id="d1">
<script>
  $('#d1').on('input',function (){
    console.log($(this).val())
  })
</script>
</body>
</html>

【2】事件绑定

// 方式1
$('#id').events(function(){})

// 方式2
$('#id').on('events',function(){})

【3】移除事件

$('#id').off('events',function(){})

【4】阻止后续事件执行

// 方式1
在函数体最后 加上 return false

// 方式2
给函数加上一个形参 e
在函数体最后加上 e.preventDefault()

【5】阻止事件冒泡

事件冒泡是指当一个特定的事件发生在 DOM 树上的某个元素上时，这个事件将会从那个元素开始，然后逐级向上传播到 DOM 树的根节点。换句话说，如果一个元素具有某个事件的处理程序，当该事件在该元素上触发时，它将会先执行该元素的事件处理程序，然后再向该元素的父级元素传播，直到传播到整个文档的根节点。
如果想要阻止事件冒泡
直接在函数体最后加上return false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div>div
    <p>p
        <span>span</span>
    </p>
</div>
<script>
    $('div').on('click', function () {
        alert('div')
        return false
    })
    $('p').on('click', function () {
        alert('p')
        return false
    })
    $('span').on('click', function () {
        alert('span')
        return false
    })
</script>
</body>
</html>

【6】页面载入

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

// 写法1
$(document).ready(function(){
// 在这里写你的JS代码...
})

// 写法2
$(function(){
// 你在这里写你的代码
})

案例

// 文档加载完绑定事件，并且阻止默认事件发生：

<!DOCTYPE html>
<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>登录注册示例</title>
  <style>
    .error {
      color: red;
    }
  </style>
</head>
<body>

<form id="myForm">
  <label for="name">姓名</label>
  <input type="text" id="name">
  <span class="error"></span>
  <label for="passwd">密码</label>
  <input type="password" id="passwd">
  <span class="error"></span>
  <input type="submit" id="modal-submit" value="登录">
</form>

<script src="jquery-3.2.1.min.js"></script>
<script src="s7validate.js"></script>
<script>
  function myValidation() {
    // 多次用到的jQuery对象存储到一个变量，避免重复查询文档树
    var $myForm = $("#myForm");
    $myForm.find(":submit").on("click", function () {
      // 定义一个标志位，记录表单填写是否正常
      var flag = true;
      $myForm.find(":text, :password").each(function () {
        var val = $(this).val();
        if (val.length <= 0 ){
          var labelName = $(this).prev("label").text();
          $(this).next("span").text(labelName + "不能为空");
          flag = false;
        }
      });
      // 表单填写有误就会返回false，阻止submit按钮默认的提交表单事件
      return flag;
    });
    // input输入框获取焦点后移除之前的错误提示信息
    $myForm.find("input[type!='submit']").on("focus", function () {
      $(this).next(".error").text("");
    })
  }
  // 文档树就绪后执行
  $(document).ready(function () {
    myValidation();
  });
</script>
</body>
</html>

【7】事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

案例

// 点击任意一个按钮都会弹窗 包括后续通过dom操作动态添加的按钮
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<button>是兄弟就来砍我</button>
<script>
  $('body').on('click','button',function (){
    alert('一刀999')
  })
</script>
</body>
</html>

【四】动画效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])

posted @ 2024-03-24 17:08 HuangQiaoqi 阅读(64) 评论(0) 编辑收藏举报

刷新页面返回顶部

Loading

Hqqqq

jQuery语法

【一】查找标签

【1】基本选择器

【2】层级选择器

【3】基本筛选器

例子

练习

【4】属性选择器

例子

【5】表单选择器

【6】表单对象属性

例子

【7】筛选器方法

补充

案例

【二】操作标签

【1】样式操作

案例

【2】位置操作

案例

【3】获取尺寸

【4】文本操作

例子

【5】属性操作

用于checkbox和radio

prop和attr的区别

例子

总结

【三】事件

【1】常用事件

案例

【2】事件绑定

【3】移除事件

【4】阻止后续事件执行

【5】阻止事件冒泡

【6】页面载入

案例

【7】事件委托

案例

【四】动画效果

公告