jQuery-03

最新推荐文章于 2024-05-21 20:11:31 发布
最新推荐文章于 2024-05-21 20:11:31 发布
阅读量257 收藏
点赞数
文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55944058/article/details/122035459
版权

一、jQuery中的遍历

1、对象的遍历

格式：

jQuery对象.each(function(index,item){})

 index代表索引值,item代表数组元素(由于jquery对象存放的都是标签,所以一般都是标签对象)

代码演示：

<!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.0">
    <title>jQuery</title>
</head>
<body>
    <input type="text" value="1">
    <input type="text" value="2">
    <input type="text" value="3">
    <input type="text" value="4">
    <script src="../jquery-3.6.0/jquery-3.6.0.min.js"></script>
    <script>
        let sum = 0;
        ints.each(function(index, item) {
            // 方法一:使用jQuery方式
            // sum += parseInt($(item).val());
            // 方法二:使用dom方式
            sum += parseInt(item.value);
        });
        console.log(sum)
    </script>
</body>

</html>

 

2、数组的遍历

语法：

$.each(数组,function(index,item){})

index代表索引值,item代表数组元素

代码演示：

<!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.0">
    <title>jQuery案例</title>
</head>
<body>
    <input type="text" value="1">
    <input type="text" value="2">
    <input type="text" value="3">
    <input type="text" value="4">
    <script src="../jquery-3.6.0/jquery-3.6.0.min.js"></script>
    <script>
        // 代码演示
        let ints2 = $('input')
        $.each(ints2, function(index, item) {
            console.log(index);
            console.log(item);
        })
    </script>
</body>
</html>

 

二、jQuery对操作标签的一些操作

1、删除标签

a）移除所有标签

$('div').empty();

用于移除div中所有的标签

代码演示：

<!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.0">
    <title>01-02-知识点-删除标签</title>
</head>
<body>

    <div>
        <p>这是段落一</p>
        <p>这是段落二</p>
        <p>这是段落三</p>
        <p>这是段落四</p>
    </div>

    <script src="../jquery-3.6.0/jquery-3.6.0.min.js"></script>
    <script>
        //移除所有标签
        $('div').empty();
    </script>
</body>
</html>

b）删除特定标签

$('选择器').remove()

用于使特定标签自杀

代码演示：

<!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.0">
    <title>01-02-知识点-删除标签</title>
</head>
<body>
    <div>
        <p>这是段落一</p>
        <p>这是段落二</p>
        <p>这是段落三</p>
        <p>这是段落四</p>
    </div>
    <script src="../jquery-3.6.0/jquery-3.6.0.min.js"></script>
    <script>
        //将指定标签删除
        $('p:nth-child(1)').remove()
    </script>
</body>
</html>

 

2、创建标签

步骤：

1.先创建元素
语法:$('完整的html标签')

2.给新建的标签加内容、加样式
a)创建的元素有返回值
b)返回的对象是一个jQuery对象(很重要)可以加样式之类的

3.将创建后的元素添加到对应的标签容器其中
a）添加到父元素的末尾：.append()在添加元素的时候,会将元素
                $('.box').append(新标签);
b）添加在父元素开头使用：.prepend(newh1);
                $('.box').prepend(新标签);
c）如果使用html()去添加元素的时候,会将标签中原来的内容覆盖掉
                $('.box').html(新标签);

代码演示：

<!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.0">
    <title>jQuery案例</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 5px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>我是div里的段落</p>
    </div>
    <script src="../jquery-3.6.0/jquery-3.6.0.min.js"></script>
    <script>
        // 代码演示:
        // 创建标签
        let h1 = $('<h1></h1>')

        // 给创建出来的标签加内容、加样式
        h1.text('我是新创建的h1')
        h1.css('color', 'red')

        // 将创建后的元素添加到对应的父标签其中
        $('body').append(h1);
    </script>
</body>

</html>

3、获取标签大小

JQuery中获取元素大小：
语法1:jQuery对象.width()
          获取当前标签内容区域大小
语法2:jQuery对象.innerwidth()
          内容区域+内边距
语法3:jQuery对象.outerwidth() 
          内容区域+内边距+外边框

代码演示：

<!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.0">
    <title>jQuery获取元素的大小</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #f00;
            border: 10px solid #ccc;
            padding: 6px;
        }
    </style>
</head>
<body>
    <div></div>
    <script src="../jquery-3.6.0/jquery-3.6.0.min.js"></script>
    <script>
        // 代码演示
        let w1 = $('div').width()
        let w2 = $('div').innerWidth()
        let w3 = $('div').outerWidth()
        console.log(w1, w2, w3)
    </script>
</body>
</html>

 4、获取标签位置

JQuery对象.offset();
总结:
1)返回的结果是一个对象
2)只有top,left方法
3)完全参照页面最左上角为(0,0)点
4)和元素是否定位完全没有任何关系

Jquery对象.position()
总结:
1)JQuery对象.position()返回的也是对象
2)内有top,left
3)如果没有子绝父相,原点在左上角
4)有子绝父相,以父元素左上角为原点

代码演示：

<!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.0">
    <title>jQuery案例</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: #f00;
            margin-left: 200px;
            margin-top: 100px;
            position: relative;
        }
        
        .one {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="one"></div>
    </div>
    <script src="../jquery-3.6.0/jquery-3.6.0.min.js"></script>
    <script>
        // JQuery对象.offset();

        // 代码演示
        console.log($('.one').offset())
        console.log($('.one').offset().left) //获取据左侧
        console.log($('.one').offset().top) //获取顶端

        //---------------------------------------------------

        //Jquery对象.position()
        console.log($('.one').position().top) //获取顶端
    </script>
</body>

</html>

三、jQuery中移除事件

语法：jQuery对象.off('事件类型','选择器')

总结：

a）可以移除基础事件

b）可以移除on事件

c）可以移除委托事件，要选择真正被点击的标签,而不是受委托的标签

四、表单中的submit事件

submit事件
1.submit事件是表单域的一个事件,给form标签注册的
2.submit事件是被提交的时候会触发submit事件
作用:
可以在该事件中获取表单中的数据
可以替代通过在点击事件中获取表单值

李建雨
关注
Vue学习笔记（基础语法）
小言同学的博客
02-12 1065
一、安装Vue.js 直接用<script>引入：从官网下载并用<script>标签引入 使用CDN方法 <！--两者选其一即可--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> npm方法 n
jQuery-03（筛选&文档处理）
weixin_65479202的博客
03-11 1125
筛选 过滤 （在jQuery对象数组中，过滤出一部分元素来） first()：获取匹配的第一个元素 last()：获取匹配的最后一个元素 eq(N)：获取匹配的第N或-N个元素 filter(selector): 筛选出与指定表达式匹配的元素集合 not(selector): 筛选出不包含特定特点的元素的集合 has(selector): 筛选出包含特定特点的元素的集合 案例一：演示过滤所有的方法 <!-- 导入jQuery库...
数组遍历方法
m0_63989259的博客
09-23 232
数组遍历方法，forEach方法等
jquery元素选择器集合
qizhanfeng的专栏
06-16 130
http://www.cnblogs.com/pepcod/archive/2012/07/04/2575941.html jquery元素选择器集合 一、基本选择器 1. id选择器（指定id元素） 将id="one"的元素背景色设置为黑色。（id选择器返单个元素） $(document).ready(function () { $('#one').css('ba...
Mybatis item 和 index 区别
zhang19age_的博客
08-27 1848
Mybatis item 和 index 区别 相信很多人多看过Mybatis官方文档，但是在文档中并没有详细的说明index 的详细讲解，这里废话不多说，直接上代码来分析它和item 的区别。 <foreach collection="list" item="item" index="index" open="(" separator="," close=")"> #{index} </foreach>
function（item ，index）就是item= shopCategoryList 对列表中保存的 二级分类信息 对象 遍历。根据索引依次输出每个对象中的保存的字段信息
别抢我蓝buff
02-08 1195
function (ite...
jquery-导航条滑块特效（2014-11-03 ）
08-08
标题中的“jquery-导航条滑块特效”表明这个压缩包包含了一个使用jQuery库实现的导航条滑动效果的代码示例。在2014年11月3日创建，这可能是一个较早期的实现，但jQuery的原理和应用仍然对现代网页开发具有指导价值。...
jquery-tablesorter-rails：将jquery-tablesorter（Mottie的fork）简单集成到rails资产管道中
02-06
当前tablesorter版本：2.31.3（2020-03-03） 与js / css文件相关的任何问题，请向报告。 安装 将此行添加到您的应用程序的Gemfile中： gem 'jquery-tablesorter' 然后执行： $ bundle 或自己安装为： $ gem ...
javascript中的循环-$.each(,function(index,item){})
bobowang6052的博客
05-09 7516
每日记下自己在项目中遇到的一些小问题，就算是做备忘吧。 很久以前写c和c++习惯性的使用for循环进行遍历，但是在前端好像并不是很喜欢使用for，同事推荐使用$.each(,function(index,item){}),each的第一个参数是需要遍历的对象，数组或者对象都可以。如果是数组的话，index就是表示下标，item表示元素值。如果是对象，index表示的是对象的key值，item表示...
ItemIndex
weixin_30699463的博客
03-27 555
ItemIndex一般是列表的一个属性，比如TCombobox和TListBox都有，表示当前选中的项(Item)的下标(Index)，如果没有选中，那它是-1，所以一般判断TCombox或TListBox等当前有没有选中的项只要判断它等不等于-1就行了。列表的下标是从0开始的，0表示第1项，1表示第2项，如此类推...下面程序显示窗体上一个TListBox选中的项：var idx:Integer...
jQuery的常用方法
天高任鸟飞
07-26 404
$.contains() 判断另一个DOM元素是否是指定DOM元素的后代 $.each() 遍历指定的对象和数组 $.extend() 将一个或多个对象的内容合并到目标对象 $.fn.extend() 为jQuery扩展一个或多个实例属性和方法 $.globalEval() 全局性地执行一段JavaScript代码 $.grep() 过滤并返回满足指定函数...
JQuery入门---选择器
完善飞跃
11-18 1166
Jquery选择器 一、Jquery入门 1.1 什么是Jquery ​ jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的J...
Vue基本指令
Dimuzero的博客
04-28 739
1.v-cloak 解决插值表达式闪烁问题 <style> [v-cloak] { display: none; } </style> v-text，v-html和{{}}的区别： {{}}渲染界面会有闪烁问题，但是v-text，v-html不存在 2 v-text 1.v-text指令的作用：设置标签的内容 2.默认写法会替换全部内容，使用**插值表达式{{}}**可以替换指定内容 3.内部支持写表达式（字符串拼接） 3 v-html 1.v-htm.
layui 使用技巧
最新发布
github_39423829的博客
05-21 740
【代码】layui 使用技巧。
jquery获取元素索引值index()
wh1374256765的专栏
11-19 1505
jquery获取元素索引值index() 作者： 梅川内酷 于 13-04-26 热度：384 jquery获取元素索引值index()方法： jquery的index()方法 搜索匹配的元素，并返回相应元素的索引值，从0开始计数。 如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。 如果参数是一组DOM元素或者jQ
jQuery源码学习 item1-匿名函数及其参数
诗渊的博客
08-13 1028
本文对jQuery源码中进行了一个初步的介绍，分析了jQuery源码中自执行函数以及相关的参数。
小程序：wx:for里面的item，index。以及自定义属性data-xxx的用法（双层循环取下标）。
热门推荐
乐~的博客
07-04 10万+
1.定义通俗来说，wx:for    这个是正常的循环，没什么可说的。wx:for-item=‘变量名（随便起的）’   它是指定循环数据当前的变量名，可以通过  {{变量名.属性}} 展示数组的元素。wx:for-index=‘变量名（随便起）’，它是指向当前元素的下标名，可以在其他事件中定义自定义事件（data-xxx='{{变量名}}'，，该自定义属性可以在参数e下面打印出来）获取该下标。2...
递增 序列号 用itemindex 解决
hyt48079287的专栏
03-08 8921
先转载别人的资料一下，如下： autoindex和itemindex使用方法是一样的。但是{dede:channelartlist}必须使用itemindex autoindex用法实例 runphp型 1  [field:global name=autoindex runphp="yes"](@me!=7)? @me=" | ":@me="";[/field:glo
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李建雨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值