前端—jQuery

什么是jQuery?

jQuery是一个工具，简单方便实现DOM操作，python里可以叫模块，但在前端叫“类库“”

jQUery

我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

jQUery基本语法

$(selector).action()、

查找标签

层级选择器：

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

基本筛选器：

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

表单筛选器：

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

筛选器方法

下一个元素：

$("#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 p")

筛选

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

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

等价于 $("div.c1")

操作标签

样式操作

样式类

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

$("p").css("color", "red"); //将所有p标签的字体设置为红色

位置操作

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

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

<!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>
    .c1 {
      width: 100px;
      height: 200px;
      background-color: red;
    }

    .c2 {
      height: 50px;
      width: 50px;

      position: fixed;
      bottom: 15px;
      right: 15px;
      background-color: #2b669a;
    }
    .hide {
      display: none;
    }
    .c3 {
      height: 100px;
    }
  </style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div>

<button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#b1").on("click", function () {
    $(".c1").offset({left: 200, top:200});
  });

  $(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
      $("#b2").removeClass("hide");
    }else {
      $("#b2").addClass("hide");
    }
  });
  $("#b2").on("click", function () {
    $(window).scrollTop(0);
  })
</script>
</body>
</html>

返回顶部示例

返回顶部

尺寸：

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

文本操作

HTML代码：

html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容

文本值:

text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容

值：

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

<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>

<!--js代码取消默认事件的方式-->
return false

自定义登录校验

属性操作

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
// 获取文本属性
$(‘#d1‘).attr(‘s1‘)  // 获取属性值
$(‘#d1‘).attr(‘s1‘,‘haha‘)  // 设置属性值
$(‘#d1‘).attr({‘num‘:50,‘taidi‘:‘gay‘})  // 设置多个属性
$(‘#d1‘).removeAttr(‘taidi‘)  // 删除一个属性

// 获取check与radio标签的checked属性
$(‘#i1‘).prop(‘checked‘)
$(‘#i1‘).prop(‘checked‘,true)

文档处理

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

$(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()// 参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
        button {
            background-color: pink;
        }
    </style>
</head>
<body>
<button>屠龙宝刀，点击就送！</button>

<script>
    // 第一种绑定事件的方式
    // $(‘button‘).click(function () {
    //
    // })
    //
    $(‘button‘).on(‘click‘,function () {
        $(this).clone(true).insertAfter(this);
    })

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

克隆实例

效果

事件

常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p>来玩啊,老弟!</p>

<script>
    $(‘p‘).hover(
        function () {
            alert(‘How Much?‘)
    },
        function () {
            alert("欢迎老板下次再来，记得我是4号哟!")
        }
    )
</script>
</body>
</html>

hover悬浮事件

效果

事件绑定

.on( events [, selector ],function(){})
  • events： 事件
  • selector: 选择器（可选的）
  • function: 事件处理函数

阻止后续事件执行

1、return false; // 常见阻止表单提交等

　2、e.preventDefault();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form action="">
    <input type="submit">
</form>

<script>
    $(‘input‘).click(function (e) {
        alert(123);
        // 1.return false
        e.preventDefault();
    })

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

取消标签自带的事件

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>div
    <p>div>p
        <span>div>p>span</span>
    </p>
</div>
<script>
    $(‘div‘).click(function () {
        alert(‘div‘)
    });
    $(‘p‘).click(function (a) {
        alert(‘p‘);
        a.stopPropagation()
    });
    $(‘span‘).click(function (e) {
        alert(‘span‘);

    });
</script>
</body>
</html>

阻止事件冒泡

事件委托

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button>我是23号技师，很高兴为您服务!</button>

<script>
    // $(‘button‘).click(function () {
    //     alert(123)
    // })

    // 事件委托
    $(‘body‘).on(‘click‘,‘button‘,function () {
        alert(123)
    })

</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])

each

描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

.data()

原文地址：https://www.cnblogs.com/zhengyuli/p/10975922.html

时间： 2024-08-02 05:24:14

前端—jQuery的相关文章

ASP.NET 登录中Cookies和验证和前端Jquery

1.登陆中的验证问题 登录中用户名和密码的判断,一是怎么判断,需要调用业务逻辑层的判断方法,这里是单独拿出一个层Controls来进行授权和登录的验证.那怎么进行验证结果的返回,正确进入下个页面错误返回登录页面,首先想到的放法写一个bool的方法,正确进入下一个页面,错误返回登录页面.这里用的一个比较专业的方法是在Controls设置一个数据返回接口类DataResult.cs里面定义好code,Message,Data分别用于进行登录验证,错误信息返回,数据返回(这里暂时用不到)至于为什么这样

python前端jQuery高级

知识点预习1.jQuery事件冒泡2.事件委托 3.元素节点操作 4.正则表达式及表单验证实例 01- submit事件 //监听 提交的事件 $("form").submit(function (abc) { //阻止系统的默认行为 // abc.preventDefault(); return false; }) 事件冒泡的原理在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件

Python之Web前端jQuery扩展

Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 以下表单验证使用两种方式简单实现: (一). 使用DOM表单验证 (二). 使用jQuery表单验证 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单验证DOM<

转战前端 jQuery

序 我想,在看这篇文章之前,如果只看题目的话,肯定会以为我已经从服务端开发(Java 开发)转战到前端开发,说白了就是做前端,比如,设计布局什么的.JavaScript 什么的.首先申明一点,并不是这样的.那到底是什么样呢,请继续往下看. 背景 其实,对于我们搞开发的来说,没有严格的前端后端之分,做后端的工程师,前端的技术也是或多或少的知道一些.毕竟有的公司是没有前端工程师的,也或许前端工程师很少,你做开发的时候,只能自己写前端,久而久之,前端的技术,你也就了解一二了. 回想起来,这周也并没有用

Web前端JQuery基础

JQuery知识汇总 一.关于Jquery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨     是"write Less,Do More",即倡导      写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模       式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuer

07 前端--JQuery

目录 一.JQuery介绍 二.JQuery的优势 三.JQuery 内容 四.JQuery对象 五.JQuery创建对象 六.JQuery的基础语法 6.1 基本元素选择器 6.2 基本元素筛选器 七.属性选择器 八.筛选器方法 8.1 查找(find) 8.2 筛选(filter) 九.表单元素选择器 十.表单对象属性 十一.操作标签 11.1 样式操作(CSS) 11.2 位置操作 11.3 尺寸操作 11.4 文本操作 11.5 属性操作 11.6 porp和attr的区别 11.7 文

前端-jQuery介绍

目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器: 表单筛选器: 筛选器方法 操作标签 样式操作 位置操作 尺寸: 文本操作 属性操作 文档处理 事件 常用事件 事件绑定 移除事件 阻止后续事件执行 阻止事件冒泡 页面载入 事件委托 动画效果 补充 each .data() jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQ

前端jQuery使用ajax与后端Servlet进行数据交互

前端代码: 1 $.ajax({ 2 type : "post", 3 url : "Calculator", //servlet文件名为Calculator,需要提前在web.xml里面注册 4 dataType : "text", 5 data : 6 { 7 "operator1" : operator1, //操作数 8 "operatorSign":operatorSign, //操作符 9 &q

WEB前端--JQuery

jQuery 用法:http://www.php100.com/manual/jquery/ 一.基本使用 1.创建jQuery对象 $  ==>  相当于创建一个jQuery对象-->$=jQuery() $('#id')  ==>  相当于document.getElementById('id'),找到id是'id'的元素. 2.当页面框架加载完成,执行这里面的代码. 1 2 3 4 5 6 <script type="text/javascript" sr