笔记总结：Web前端——jQuery

笔记君Pude

已于 2023-08-31 12:47:33 修改

阅读量89

点赞数 1

分类专栏： Web前端文章标签：前端笔记 jquery

于 2023-08-29 16:48:04 首次发布

本文链接：https://blog.csdn.net/lzf240286/article/details/132565119

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jQuery

一、jQuery简介

1.介绍

jQuery是对JavaScript对象和函数的封装，其设计思想为write less, do more。

2.用途

访问和控制DOM元素
控制页面样式
对页面事件处理
扩展新的jQuery插件
与Ajax技术完美结合

3.优势

体积小
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化程序
丰富的插件支持

二、jQuery语法

1.选择器

$(CSS选择器 | DOM元素)

返回标签集合

示例：

$("form")
$("#username")
$(".form-group")
$("input[type=text]")
$("input[name=username]")

$("div,span")	//并集选择器
$("form input")	//后代选择器
$("div > span")	//子代选择器

$("div:first")	//过滤选择器，选择所有div中的第一个
$("div:last")
$("div:even")
$("div:odd")
$("div:eq(0)")	//指定选择下标为0的div标签
//greater than
$("div:gt(0)")
//less than
$("div:lt(10)")
$("input:focus")
$(document)	//选中整个文档

2.ready方法

$(CSS选择器 | DOM元素).ready(回调函数)

选择器选择的标签准备好之后的后续动作

先选择整个文档，在回调函数中选择文档中的元素

//省略写法，缺省选择document
$(function(){
    
})

三、DOM元素操作

1.操作元素的内容

$(CSS选择器 | DOM元素).text()	//获取标签文本内容
$(CSS选择器 | DOM元素).text(文本内容)	//设置

let elements = $(CSS选择器 | DOM元素)
elements[0].textContext()
elements[0].textContext(文本内容)
elements.get(0).textContext()
elements.get(0).innerText()

$(CSS选择器 | DOM元素).html()	//获取标签内的html内容
$(CSS选择器 | DOM元素).html(元素内html内容)	//设置

2.操作元素的属性

$(CSS选择器 | DOM元素).val()	//设置val属性
$(CSS选择器 | DOM元素).val(val值)

$(CSS选择器 | DOM元素).attr(属性名)
$(CSS选择器 | DOM元素).attr(属性名，属性值)

$(CSS选择器 | DOM元素).removeAttr(属性名)

3.操作元素的样式

操作元素的宽度和高度

$(CSS选择器 | DOM元素).width()
$(CSS选择器 | DOM元素).width('200px')

$(CSS选择器 | DOM元素).height()
$(CSS选择器 | DOM元素).height(值)

操作元素样式

//如果属性名存在-，使用驼峰命名法连接
$(CSS选择器 | DOM元素).css(样式属性名)
$(CSS选择器 | DOM元素).css(样式属性名，样式属性值)
$(CSS选择器 | DOM元素).css({
    'font-size':'20px',
    ...
})

操作类样式

$(CSS选择器 | DOM元素).addClass(类名)
$(CSS选择器 | DOM元素).removeClass(类名)
//如果存在该类样式，则移除，否则添加该类样式
$(CSS选择器 | DOM元素).toggleClass(类名)
//判断是否存在该类样式
$(CSS选择器 | DOM元素).hasClass(类名)

元素事件

$(CSS选择器 | DOM元素).on(事件名，函数)
$(CSS选择器 | DOM元素).事件名(函数)

$(CSS选择器 | DOM元素).on(事件名，选择器，函数)

四、节点操作

1.创建、获取节点

$(选择器)
$(DOM元素)
$(HTML内容)

示例：

//使用DOM对象获取节点
let dom = document.getElementById("text")
$(dom)
//使用HTML内容创建节点
$("<tr></tr>")

2.插入节点

//将给定元素添加到节点内容的末尾
$(选择器 | DOM元素).append(元素节点)
//将节点添加到给定元素内容的末尾
$(选择器 | DOM元素).appendTo(元素节点)

//添加到内容的最前面
$(选择器 | DOM元素).prepend(元素节点)
$(选择器 | DOM元素).prependTo(元素节点)

//添加到标签的后面
$(选择器 | DOM元素).after(元素节点)
$(选择器 | DOM元素).insertAfter(元素节点)

//添加到标签的前面
$(选择器 | DOM元素).before(元素节点)
$(选择器 | DOM元素).insertBefore(元素节点)

3.替换节点

//使用给定的元素节点替换节点
$(选择器 | DOM元素).replaceWith(元素节点)

4.移除节点

//将标签中所有内容清空
$(选择器 | DOM元素).empty()
//将标签以及标签中的所有内容从DOM树中移除
$(选择器 | DOM元素).remove()

5.查找结点

//查找结点的下一级子标签
$(选择器 | DOM元素).children()
$(选择器 | DOM元素).parent()
//从选择器1向上级查找最近的选择器2选择的结点
$(选择器1 | DOM元素).closest(选择器2)
//向后查找同级的选择器2选择的结点
$(选择器1 | DOM元素).next(选择器2)
$(选择器1 | DOM元素).prev(选择器2)
//向前后查找同级选择器2,不写选择器则返回所有同级元素
$(选择器1 | DOM元素).siblings([选择器2])
//在标签内容中找到选择器2
$(选择器1 | DOM元素).find(选择器2)
//选择器选择元素中的第一个元素
$(选择器 | DOM元素).first()
//选择器选择元素中的最后一个元素
$(选择器 | DOM元素).last()

6.遍历结点

$(选择器|DOM元素).each(function(index,e){	//index表示下标，e表示元素
    //遍历操作
    console.log(index)
    console.log(e)
})

五、jQuery validate

1.简介

jQuery validate插件为表单提供了强大的验证功能，使得客户端表单验证变得更简单，同时提供大量定制选项，满足应用程序的各种需求。

规则	描述
required:true	必须输入字段
remote:	使用ajax方法验证输入值
email:true	必须输入正确的电子邮件格式
url:true
date:true
dateISO:true	例如：2023-08-29，不验证有效性
number:true
digits:true	整数
creditcard:
equalTo:”#ID”	输入值必须和#ID选择器选择的标签值相同
accept:	输入拥有合法后缀名的文件名称
maxlength:15	长度最多是15的字符串，汉字算1
minlength:8
rangelength:[8,15]
range:[8-15]	输入值在8-15之间
max:100	输入值不能大于100
min:10

2.使用

示例：用户注册表单

<body>
<form class="registerForm" id="registerForm" method="post" action="">
  <div>
    <label for="username">账号</label>
    <input id="username" name="username" type="text">
  </div>
  <div>
    <label for="password">密码</label>
    <input id="password" name="password" type="password">
  </div>
  <div>
    <label for="password">确认密码</label>
    <label for="confirm"></label><input id="confirm" name="confirm" type="password">
  </div>
  <div>
    <label for="email">邮箱</label>
    <input id="email" type="email" name="email">
  </div>
  <div>
    <label for="url">个人主页</label>
    <input id="url" type="url" name="url">
  </div>
  <div>
    <input class="submit" type="submit" value="注册">
  </div>
</form>
</body>

<script type="text/javascript">
  $(function () {
    $("#registerForm").validate({
      //自定义校验规则
      rules: {
        //设置id值对应的标签的属性
        username: { //每个规则都算是一个属性
          required: true,
          minlength: 8,
          maxlength: 15
        },
        password: {
          required: true,
          minlength: 8,
          maxlength: 20
        },
        confirm: {
          required: true,
          equalTo: "#password"
        },
        email: {
          required: true,
          email: true
        },
        url: {
          required: true,
          url: true
        }
      },
      //校验规则对应的提示信息
      messages: {
        username: {
          required: "请输入用户名",
          minlength: "用户名长度不能小于 8 个字符",
          maxlength: "用户名长度不能超过 15 个字符"
        },
        password: {
          required: "请输入密码",
          minlength: "密码长度不能小于 8 个字符",
          maxlength: "密码长度不能超过 20 个字符"
        },
        confirm: {
          required: "请确认密码",
          equalTo: "两次密码输入不一致"
        },
        email: {
          required: "请输入邮箱",
          email: "请输入一个正确的邮箱"
        },
        url: {
          required: "请输入个人主页",
          url: "请输入一个正确的个人主页"
        }
      },
      submitHandler: function (form) {  //验证通过提交表单
        form.submit();
      }
    });
  })
</script>