Web-jQuery/正则表达式

最新推荐文章于 2024-04-30 16:17:31 发布

I会飞的鱼

最新推荐文章于 2024-04-30 16:17:31 发布

阅读量207

点赞数

分类专栏： Web jQuery 文章标签： jquery 前端 javascript 正则表达式

本文链接：https://blog.csdn.net/qq_48865614/article/details/125447508

版权

Web 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

jQuery

1 篇文章 0 订阅

订阅专栏

jQuery

jQuery概述

为了简化js的开发，js库封装了很多预定义的对象和实用函数，简化HTML与js之间的操作，能够帮助实用者建立高难度交互的页面，并且兼容各大浏览器；宗旨：Write Less，Do More
如今jQuery已经是最流行的js库
优点：
1. 免费、开源
2. 轻量级（压缩后就几十kb）
3. 强大的选择器
4. 出色的DOM操作的封装
5. 可靠的事件处理机制
6. 完善的Ajax使用
7. 出色的多浏览器兼容性
8. 隐式迭代：堆积和对象做相同操作时不需要逐个进行遍历，jQuery自动进行遍历
9. 文档说明很全
10. 可扩展插件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HelloJQuery</title>
  <!-- 导入jquery库 -->
  <script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
  <script type="text/javascript">
    //类似window.onload
    $(function (){
    //  通过id获取元素节点，并关联单击事件
      $("#btnId").click(function () {
          alert("hello jQuery");
      });
    });
  </script>
</head>
<body>
  <button id="btnId">HelloJQ</button>
</body>
</html>

$与$()

$是jQuery，jQuery是函数的引用
$()是在触发【调用】核心函数

核心函数的作用【$()】

传入参数为函数时：$(function(){})，类似与windbw.onload作用
- $(function)与window.οnlοad=function区别
  1. 加载时机不同，前者当前文档【绘制成功】后执行fn，后者当前文档【完全加载】后执行fn。
    - 绘制成功:节点加载【绘制】成功【标签、属性、文本】
    - 总结:$(function)先执行， window.οnlοad=function后执行
  2. 在当前文档中，书写次数不同:前者可以书写多次，后者只能书写一次。
    - 后者如果书写多次，后面window.onload会覆盖前面
  3. 语法结构不同，前者有两种语法结构，后者只有—种语法结构
传入参数为选择器字符串时：$(选择器字符串)
传入参数为HTML字符串时:$(HTML字符串)，创建HTML的元素节点
传入参数为DOM对象时: $(DOM对象)，将DOM对象转换为jQuery对象

DOM对象与jQuery对象的转换问题

为什么DOM对象与jQuery对象需要转换呢?
- 因为：默认情况，DOM对象与jQuery对象不能调用对方的属性或方法，所以，当需要调用对方的属性或方法时，需要类型转换
DOM对象转换为jQuery对象

var $obj = $(DOM对象);
jQuery对象转换为DOM对象【将jQuery对象看成数组或集合(伪数组)】

var domObj = $obj[0]

var domObj = $obj.get(0)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DOM对象与jQuery对象的转换问题</title>
  <script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
  <script type="text/javascript">
    $(function (){
      //使用DOM对象调用DOM方法
      $("#dom2dom").click(function (){
        var divEle = document.getElementById("testDiv");
        alert(divEle.innerText);
      });
      //jQuery对象调用jQuery
      $("#JQuery2JQuery").click(function () {
        var divText = $("#testDiv").text();
        alert(divText);
      });
      //DOM对象调用jQuery
      $("#dom2JQuery").click(function () {
        var divEle = document.getElementById("testDiv");
        //将DOM转换为JQuery对象
        alert($(divEle).html());
      });
      $("#JQuery2DOM").click(function () {
        var $divText = $("#testDiv");
        //将jQuery对象转换为DOM对象
        //alert($divText[0].innerText);
        alert($divText.get(0).innerText);
      });
    });
  </script>
</head>
<body>
  <div id = "testDiv">Hello jQ</div>
  <br>
  <button id = "dom2dom">DOM对象调用DOM</button>
  <button id = "dom2JQuery">DOM对象调用jQuery</button>
  <button id = "JQuery2JQuery">jQuery对象调用jQuery</button>
  <button id = "JQuery2DOM">jQuery对象调用DOM</button>
</body>
</html>

jQuery选择器

基本选择器

$(“#id”): id选择器
$s(“标签名”):标签选择器
$(“.类名”):类选择器
$(“*”):【全局】选择器
$(“p,span,#id,.class”):并集选择器

层级【层次】选择器

$(“E F”):后代选择器
$(“E>F”):子代选择器【子—代】
$(“E+F”):相邻选择器【后一个元素】
$(“E~F”):同辈选择器【后面所有兄弟元素】

过滤选择器

基本过滤选择器

$(“:first”)：第一个
$(“:last”)：最后一个
$(“:eq(index)”)：相等（下标从0开始）
$(“:gt(index)”)：大于（下标从0开始）
$(“:lt(index)”)：小于（下标从0开始）
$(“:even”)：匹配下标偶数（下标从0开始）
$(“:odd”)：匹配下标奇数（下标从0开始）
$(“:header”)：匹配所有标题元素
$(“:animated”)：正在执行动画
$(“:not()”)：取反

内容过滤选择器

$(“:contains(text)”)：匹配指定文本
$(“:has(selector)”)：匹配含有指定子元素的
$(“:empty”)：空元素
$(“:parent”)：非空元素

可见性过滤选择器

$(“:hidden”)：不可见
$(“:visible”)：可见

属性过滤选择器

$(“[属性]”)：匹配属性
$(“[属性 = ‘value’]”)：匹配含有属性且属性值为value
$(“[属性 ^= ‘value’]”)：匹配含有属性且属性值以value开始的
$(“[属性 $= ‘value’]”)：匹配含有属性且属性值以value结尾的
$(“[属性 *= ‘value’]”)：匹配含有属性且属性值包含value开始的
$(“[属性 != ‘value’]”)：匹配含有属性且属性值不为value的
$(“[属性][属性 *= ‘value’]”)：可以选择多个属性

子元素过滤选择器

$(“父元素子元素:first-child”)：为每一个父元素匹配第一个子元素
$(“父元素子元素:last-child”)：为每一个父元素匹配最后一个子元素
$(“父元素子元素:nth-child(index)”)：为每一个父元素匹配下标为index的子元素（index从1开始）
$(“父元素子元素:only-child”)：匹配某个父元素中子元素唯一的

表单过滤选择器

$(“:input”)：匹配所有input，textarea，select，button元素
$(“:text”)：所有文本
$(“:password”)：所有密码框
$(“:radio”)：匹配所有单选
$(“:checkbox”)：所有复选框
$(“:submit”)：所有提交
$(“:image”)：
$(“:reset”)：
$(“:button”)：所有按钮（type，button标签）
$(“:file”)：文件域
$(“:hidden”)：隐藏域

表单对象属性过滤选择器

$(“:enabled”)：匹配所有可用元素
$(“:disabled”)：匹配所有不可用元素
$(“:checked”)：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
$(“:selected”)：匹配所有选中的option元素

jQuery操作DOM

DOM：文档对象模型【文档节点、元素节点、属性节点、文本节点】

jQuery操作标签

增【API文档处理】
- 内部插入到最后
  - append()
  - appendTo()
- 内前
  - prepend()
  - prependTo()
- 外后
  - after()
  - insertAfter()
- 外前
  - before()
  - insertBefore
删【API文档处理】
- empty()：删除匹配的元素集合中所有的子节点
- remove()：删除本身
改【API文档处理】
- replaceWith()
- replaceAll()
查【API筛选】
- eq()
- first()
- last()
- filter()
- is()
- has()
- add()
- children()
- find()
- next()
- nextAll()
- prev()
- prevAll()
- parent()
- parents()

jQuery操作属性

attr(“”)：获取指定的属性值
attr(“”,“”)：为指定的属性赋值
prop()：同上【attr升级版】

jQuery操作文本

text()：获取文本
text(“”)：设置文本
html()
val()：获取指定元素的value属性值
val(“”)：为指定元素设置value属性值
val([“”,……])：对下拉框，单选框，复选框设置选中状态

jQuery操作样式表

css(“”)：获取指定元素的样式
css(“”,“”)：为指定元素设置样式表
addClass()
removeClass()

jQuery常用的事件【API事件】

$(document).ready(fn)：当前文档绘制成功后执行
click(fn)：单击事件
live(“事件名”,fn)：事件委派【$xxx.live(“事件名”,fn)】
delegate(“选择器”，“事件名"，fn)：事件委派
change(fn)：文本改变且失去焦点事件
mouseover(fn)：鼠标移入【悬停】事件
mouseout(fn)：鼠标移出事件

正则表达式【API其他】

为什么需要正则表达式
- 在软件研发中，往往对数据验证要求比较严格【用户名只能是字母、数字、_(6-12位)】，此时使用正则表达式验证数据，更加方便、安全。
正则表达式概述:—组验证数据规则
使用
- 语法:
  1. var reg =/规则/;
    - var reg =/a/;：包含字母‘a’即可
    - var reg =/^a/;：以字母‘a’开头即可
    - var reg =/a$/;：以字母‘$’结尾即可
    - var reg =/ab/;：包含字母‘ab’即可（ab不可拆分）
  2. var reg2 =/^[规则]{n,m}$/;
    - var reg =/^[ab]$/;：包含一个字母‘a’或‘b’
    - var reg =/^[a-bA-Z0-9_]{6,12}$/;：包含字母数字下划线，6-12位({6}:只能是6位，{6,}:≥6)
- 验证
  - test()：返回boolean类型数值【true:数据合法，false:数据不合法】
特殊规则
- 特殊字符
  - \d：等价于[0-9]
  - \w：等价于[a-zA-Z0-9_]
  - .：匹配除了‘\n’的任何字符
- 特殊次数
  - *：等价于{0,}【匹配任意次】
  - +：等价于{1,}【匹配至少1次】
  - ?：等价于{0,1}【匹配0次或1次】

I会飞的鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web-jQuery/正则表达式

为了简化js的开发，js库封装了很多预定义的对象和实用函数，简化HTML与js之间的操作，能够帮助实用者建立高难度交互的页面，并且兼容各大浏览器；宗旨：Write Less，Do More如今jQuery已经是最流行的js库优点：免费、开源轻量级（压缩后就几十kb）强大的选择器出色的DOM操作的封装可靠的事件处理机制完善的Ajax使用出色的多浏览器兼容性隐式迭代：堆积和对象做相同操作时不需要逐个进行遍历，jQuery自动进行遍历文档说明很全可扩展插件
复制链接

扫一扫