jQuery 部分

最新推荐文章于 2023-03-10 16:13:26 发布

宇智波白给

最新推荐文章于 2023-03-10 16:13:26 发布

阅读量105

点赞数

分类专栏： javaweb 文章标签： jquery

本文链接：https://blog.csdn.net/PF_no_sad/article/details/119328740

版权

javaweb 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

jQuery 部分

1.jQuery 介绍

什么是 jQuery?
jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。

jQuery 核心思想！
它的核心思想是 write less，do more（写得更少，做得更多），所以它实现了很多浏览器兼容问题。

jQuery 流行程度
jQuery 现在已经成为最流行的 JavaScript 库，在世界前 1000个访问最多的网站中，有超过55%在使用jQuery

jQuery的好处
jQuery是免费、开源的，jQuery 的语法设计可以使开发更加便捷，例如使用文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能

2.jQuery 的初体验

为按钮绑定点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7月17日</title>
    <script type="text/javascript" src="../jquery/jquery-3.5.1.min.js">
    </script>
    <script type="text/javascript">

            $(function () { //相当于window.onload = function ()
                var $but1 = $("#on1");   //表示按id查询标签对象
                $but1.click(function (){
                    alert('jQuery的单机事件')
                });
            });
    </script>
</head>

<body>
    <button id="on1">点我</button>
</body>
</html>

常见问题：

1.使用 jQuery 一定要引入 jQuey 库。
2.jQuery 中的 $ 是一个函数
3.为按钮绑定响应函数需要：首先使用 jQuery 查询到标签对象接着使用标签对象.函数 ( function ) ;

3.jQuery 核心函数

$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。

1、传入参数为 [函数] 时
表示页面加载完成之后相当于 windows.onload = function ( ) { }

2、传入参数为 [HTML 字符串] 时
会根据这个字符串创建元素节点对象

3、传入参数为 [选择器字符串] 时
比如 $("#id"); 根据 id 查询标签对象

4、传入参数为 [DOM对象] 时
会把DOM对象转换为 jQuery 对象

4.jQuery 对象和 dom 对象区分

什么是 jQuery 对象什么是 dom 对象

Dom 对象：
1.通过 getElementById( ) 查询出来的标签对象是 Dom对象
2.通过 getElementByName( ) 查询出来的标签对象是 Dom对象
3.通过 getElementByTagName( ) 查询出来的标签对象是 Dom对象
4.通过 createElement( ) 创建的标签对象是 Dom对象

jQuery 对象
5.通过 jQuery 提供的 API 创建的对象，是 jQuery 对象
6.通过 jQuery 包装的 Dom 对象，是 jQuery 对象
7.通过 jQuery 提供的 API 查询到的对象，是 jQuery 对象
jQuery 对象的本质：
jQuery 对象 = dom 对象的数组 + jQuery 提供的一系列功能函数
jQuery 对象和 Dom 对象使用区别
两者不能互相使用对方的方法
（重点）Dom 对象和 jQuery 对象互转

先有 Dom 对象
$( Dom 对象)就可以转换为 jQuery 对象

先有 jQuery 对象
jQuery对象 [下标] 取出相应的 dom 对象

5.（重点！！！）jQuery 选择器

基本选择器
$("标签名或 id 或 name ")

层级选择器
在给定的祖先元素下匹配所有的后代元素

例如：匹配表单中所有的子级 input
$(" form > input “)

匹配所有紧接在 label 元素后的 input 元素
$(” label + input ")

匹配所有与 form 同辈的 input 元素
$(" form ~ input ")

基本过滤器

例如：获取匹配的第一个 li 元素
$(" li : first ")

内容过滤器

例如：匹配包含给定文本的元素
$(" div : contains(’ John ')" )

给所有包含 p 元素的 div 元素添加一个 text 类
$(" div:has§ . addClass(“test”) ")

属性过滤器

例如：查找所有含有 id 属性的 div 元素
$(" div[id] ")

jQuery 元素的筛选

eq( ) 获取给定索引的元素
first( ) 获取第一个元素
last( ) 获取最后一个元素
filter(exp) 留下匹配的元素
is( ) 判断是否匹配给定的选择器，只要有一个匹配就返回，true
has( ) 返回包含有匹配选择器的元素的元素
not( ) 删除匹配选择器的元素
children( ) 返回匹配给定选择器的子元素
find( ) 返回匹配给定选择器的后代元素
next( ) 返回当前元素的下一个兄弟元素
nextAll( ) 返回当前元素后面所有的兄弟元素
nextUntil( ) 返回当前元素到指定匹配的元素为止的后面元素
parent( ) 返回父元素
prev( ) 返回当前元素的上一个兄弟元素
prevAll( ) 返回当前元素前面所有的兄弟元素
prevUnit( ) 返回当前元素到指定匹配的元素为止的前面元素
siblings( ) 返回所有兄弟元素
add( ) 把 add 匹配的选择器元素添加到 jquery 对象中

jQuery 的属性操作

html( ) 它可以设置和获取起始标签和结束标签中的内容
text( ) 它可以设置和获取起始标签和结束标签中的文本
val( ) 它可以设置和获取表单项的 value 属性值

$(function(){
    $(":类名").val("[value值]");
    //使表单项被勾选
});

获取属性的方法

attr( ) 可以设置和获取属性值

$(function(){
    $(":类名").attr("name");   //获取XXX的name属性值
})

prop( ) 可以设置和获取属性值

Dom 的增删改

内部插入
appendTo( ) a.appendTo(b) 把a插入到b子元素末尾，成为最后一个子元素
prependTo( ) a.prependTo(b) 把a插入到b所有子元素前面，成为第一个子元素

外部插入
insertAfter( ) a.insertAfter(b) 得到 ba
insertBefore( ) b.insertBefore(b) 得到 ab

替换
replaceWith( ) a.replaceWith(b) 用b替换掉a
replaceAll( ) a.replaceAll(b) 用a替换掉所有b

删除
remove( ) a.remove( ) 删除 a 标签
empty( ) a.empty( ) 清空 a 标签内的内容

宇智波白给

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 部分

jQuery 部分1.jQuery 介绍什么是 jQuery?jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。jQuery 核心思想！它的核心思想是 write less，do more（写得更少，做得更多），所以它实现了很多浏览器兼容问题。jQuery 流行程度jQuery 现在已经成为最流行的 JavaScript 库，在世界前 1000个访问最多的网站中，有超过55%在使用jQueryjQuery的好
复制链接

扫一扫