jquery里面.length和.size() index()有什么区别

本文介绍了如何使用jQuery选择器来获取HTML元素的数量,并通过index()方法确定元素在其同级元素中的位置。示例展示了如何为列表项设置点击事件以显示它们的索引。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.针对标签对象元素,比如数html页面有多少个段落元素<p></p>
那么此时的$("p").size() == $("p").length
2 .计算一个字符串的长度或者计算一个数组元素的个数

那么此时只能用length而不能用size()

index() 获取当前元素的索引

<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){   $("li").click(function(){     alert($(this).index());   }); }); </script> </head> <body> <p>点击列表项可获得其相对于同胞元素的 index 位置:</p> <ul> <li>Coffee</li> <li>Milk</li> <li>Soda</li> </ul> </body> </html>

### 使用HTML、CSS、JavaScript、jQueryVue.js创建的项目实例 #### 项目概述 为了展示如何综合运用 HTML、CSS、JavaScript、jQuery Vue.js 创建一个完整的 Web 应用程序,这里提供了一个简单的待办事项列表应用 (To-Do List App) 的实现。 #### 文件结构 该项目包含以下几个主要文件: - `index.html`:项目的入口页面。 - `styles.css`:用于定义全局样式。 - `main.js`:包含应用程序的主要逻辑。 - `todo.vue`:Vue 单文件组件,负责处理待办事项的功能。 #### index.html 这是项目的主页面,包含了基本的 HTML 结构以及引入外部资源的链接。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>To-Do List</title> <!-- 引入自定义样式 --> <link rel="stylesheet" href="./styles.css"> <!-- 引入 jQuery 库 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入 Vue.js 开发版 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!-- 引入 main.js 脚本 --> <script defer src="./main.js"></script> </head> <body> <div id="app"> <to-do-list></to-do-list> </div> </body> </html> ``` #### styles.css 此文件定义了一些基础样式的规则来美化界面布局。 ```css /* 定义容器宽度 */ .container { width: 50%; margin-left: auto; margin-right: auto; } /* 设置输入框样式 */ input[type=text] { padding: 10px; font-size: 1em; } ``` #### todo.vue 这个 Vue 组件实现了核心功能——管理用户的待办事项条目。它利用了模板语法渲染视图并响应用户交互事件。 ```html <template> <div class="container"> <h2>我的待办清单</h2> <form @submit.prevent="addTask()"> <input type="text" v-model.trim="newItemText"/> <button type="submit">添加新任务</button> </form> <ul> <li v-for="(item, idx) in items" :key="idx">{{ item }} <span style="color:red;" @click="remove(idx)">×</span> </li> </ul> </div> </template> <script> export default { name: 'ToDoList', data () { return { newItemText: '', items: [] } }, methods: { addTask() { if (!this.newItemText.length) return; this.items.push(this.newItemText); this.newItemText = ''; }, remove(index){ this.items.splice(index, 1); } } }; </script> ``` #### main.js 通过这段脚本初始化整个 Vue 实例,并注册之前定义好的 `<to-do-list>` 自定义标签作为根节点下的子元素。 ```javascript // 注册全局组件 Vue.component('to-do-list', require('./components/todo.vue').default); // 初始化新的 Vue 实例 new Vue({ el: '#app' }); ``` 上述代码片段展示了如何将不同技术栈组合起来构建现代Web应用程序的一个简单例子[^1][^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值