zoukankan      html  css  js  c++  java

  • Web前端 --- jQuery

    目录

    jQuery

    jQuery是js的一个库，方便我们使用，提高开发效率

    jQurey的特点
    1.链式编程

    2.隐式迭代：在方法的内部进行循环便利，不用我们自己在进行循环

    jQurey的优点
    一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。

    丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。

    链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。

    事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。

    Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。

    跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

    插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

    jQuery对象

    jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

    $("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。

    相当于： document.getElementById("i1").innerHTML;

    虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

    基本选择器

    id选择器：

    $("#id")

    标签选择器：

    $("tagName")

    class选择器：

    $(".className")

    配合使用：

    $("div.c1")  // 找到有c1 class类的div标签

    所有元素选择器：

    $("*")

    组合选择器：

    $("#id, .className, tagName")

    层级选择器

    x和y可以为任意选择器

    $("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

    基本筛选器

    基本选择器

    # 根据标签名查
$('ul')

# 查询标签内部的子节点
$('ul li')

# 查询标签内部的第一个节点--first
$('ul li:first')

# 查询标签内部的第一个节点--last
$('ul li:last')

# 按索引号查询--eq
$('ul li:eq(1)')

# 查询索引为偶数的节点--even   # 此时0为偶数
$('ul li:even')

# 查询索引为奇数的节点--odd
$('ul li:odd')

# 查询大于索引的节点--gt
$('ul li:gt(索引号)')

# 查询小于索引号的节点--lt
$('ul li:lt(索引号)')

# 不显示不需要的节点
$('div span:has(".c1")')  # 表示在查询 div 中的结果中不显示c1

# 筛选后代中是否有查询的节点
$('div:has(".c1")')  # 判断div中有没有 c1 的节点

# 总结：" : " 后边跟的是判断条件，查询出来的结果是数组的行式

    属性选择器

    可以根据自己定义的属性来进行查找，查找的方式是使用 [ ] 来查找

    # 基础版
$('[username]')  # 查询全局中含有username的节点

# 升级版
$('[username="wang"]')  # 查询全局中username='wang'的节点

# 豪华版
$('span[username="wang"]') # 查询span中username='wang'的节点

    表单选择器

    # 表单元素：需要用户输入选择的部分，就是HTML中的表单
# 常见的表单标签：input，select，label，textarea

$(':text')  # 查询type类型是test的节点
$(':password')  # 查询type类型是password的节点
$(':file')   # 查询type类型是文件的节点
$(':radio')  # 查询含有radio属性的节点
$(':checkbox') # 查询含有checkbox属性的节点    checkbox默认选中
$(':submit')  # 查询type类型是sumbit类型的节点
$(':reset')  # 查询type类型是reset类型的节点
$(':button')  # 查询含有button类型的节点

注意：使用表单筛选器进行查询的时候，使用$(':checkbox')的时候会将selece也找到，这是在使用的时候的一个bug，所以在查询select的时候需要使用$(':select')

    下一个元素：

    $("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

    上一个元素：

    $("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

    父亲元素：

    $("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

    儿子和兄弟元素：

    $("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

    查找

    搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p")
等价于$("div p")

    筛选

    筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的
等价于 $("div.c1")

    补充：

    .first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

    筛选器方法

    直接通过锁定需要进行操作的标签下，直接对这个标签内的内容进行查询

    # 先查找到需要进行操作的标签对象
> var $spanEle = $('span')[0] # 注意：此时拿到的是标签对象

> $($spanEle)    # 此时是一个jQuery对象

    常用的筛选器方法

    注意：在使用筛选器的时候要注意区分是jQuery对象还是标签对象

    左侧菜单栏

    <!DOCTYPE html>
<html lang="en">
<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>
    .left {
      position: fixed;
      left: 0;
      top: 0;
       20%;
      height: 100%;
      background-color: rgb(47, 53, 61);
    }

    .right {
       80%;
      height: 100%;
    }

    .menu {
      color: white;
    }

    .title {
      text-align: center;
      padding: 10px 15px;
      border-bottom: 1px solid #23282e;
    }

    .items {
      background-color: #181c20;

    }
    .item {
      padding: 5px 10px;
      border-bottom: 1px solid #23282e;
    }

    .hide {
      display: none;
    }
  </style>
</head>
<body>

<div class="left">
  <div class="menu">
    <div class="item">
      <div class="title">菜单一</div>
      <div class="items">
        <div class="item">111</div>
        <div class="item">222</div>
        <div class="item">333</div>
    </div>
    </div>
    <div class="item">
      <div class="title">菜单二</div>
      <div class="items hide">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
    </div>
    <div class="item">
      <div class="title">菜单三</div>
      <div class="items hide">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
    </div>
  </div>
</div>
<div class="right"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>
  $(".title").click(function (){  // jQuery绑定事件
    // 隐藏所有class里有.items的标签
    // $(".items").addClass("hide");  //批量操作
    // $(this).next().removeClass("hide");
    
    // jQuery链式操作
    $(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
  });
</script>

    操作标签

    样式操作

    标签操作

    位置操作

    实例：当滚动条滑动到某一个位置的时候会自动执行某一指令

    offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

    返回顶部实例

    文本操作

    jQuery的文本操作与js的文本操作实现的方法上是一样的

    获取文本框值的操作：

    $('div').val()  # 查询值
$('div').val('wang')   # 添加值

    自定义登录校验实例

    <!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 action="">
  <div>
    <label for="input-name">用户名</label>
    <input type="text" id="input-name" name="name">
    <span class="error"></span>
  </div>
  <div>
    <label for="input-password">密码</label>
    <input type="password" id="input-password" name="password">
    <span class="error"></span>
  </div>
  <div>
    <input type="button" id="btn" value="提交">
  </div>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  $("#btn").click(function () {
    var username = $("#input-name").val();
    var password = $("#input-password").val();

    if (username.length === 0) {
      $("#input-name").siblings(".error").text("用户名不能为空");
    }
    if (password.length === 0) {
      $("#input-password").siblings(".error").text("密码不能为空");
    }
  })
</script>
</body>
</html>

    属性操作

    用于ID等或自定义属性：

    attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, false/true)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

    用于checkbox和radio

    prop() // 获取属性
removeProp() // 移除属性

    prop和attr的区别：

    attr所指的属性是HTML标签属性可以认为attr是显式的。

    prop所指的是DOM对象属性，而prop是隐式的。

    文档处理

    添加到指定元素内部的后面

    $(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

    添加到指定元素内部的前面

    $(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

    添加到指定元素外部的后面

    $(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

    添加到指定元素外部的前面

    $(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

    移除和清空元素

    remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

    替换

    replaceWith()
replaceAll()

    克隆

    clone()// 参数
    克隆实例

    jQurey事件

    与js中的事件相同，当进行某些操作的时候会触发某些动作

    jQurey常见的事件

    click(function(){...})   # 点击事件
hover(function(){...})   # 悬浮事件
blur(function(){...})    # 移除事件
focus(function(){...})   # 聚焦事件
change(function(){...})  # 内容与变化
keyup(function(){...})   # 键位上下操作

    按住shift实现批量操作实例

    jQurey绑定事件语法

    1.$(选择器).事件名(function(){事件代码}）

2.$(选择器).on('事件名',function(){事件代码} )  # 用处更广，事件委托用

    input实时监听事件

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input实时监控</title>
</head>
<body>
<script src="jQuery.js"></script>
<input type="text" id="i1">
<script>
    $("#i1").on("input propertychange",function(){
        alert($(this).val());
    })

</script>

</body>

    阻止标签默认事件

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
</head>
<body>

<form action="">
    <button id="b1">点我</button>
</form>

<script src="jQuery.js"></script>

<script>
    $("#b1").click(function(e){
    alert(123);
    e.preventDefault();
    })

</script>

</body>
</html>

    阻止冒泡事件

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
  我是div
    <p>我是p
        <span>点我</span>
    </p>
</div>
<script src="jQuery.js"></script>
<script>
    $("span").click(function (e) {
        alert("span");
        e.stopPropagation();
    });

    $("p").click(function (e) {
        alert("p");
        e.stopPropagation()
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

    事件委托

    事件委托 将特定的事件 委托给标签内部指定的元素 (标签即可以是提前写的 也可以是后期动态添加的)
  • 相关阅读:
    core mvc 分页
    core下的routelink
    python 3使用binascii方法的报错解决
    汉字乱码处理
    DLL的调用方法
    Python内置函数清单
    Linux 几种上传文件到linux服务的方法
    在VS中添加lib的第三种方法
    Bash Shell 数字/字符比较大小
    虚拟Linux服务器不能获取IP的解决办法
  • 原文地址：https://www.cnblogs.com/whkzm/p/11895441.html
Copyright © 2011-2022 走看看