实验四：Jquery基础应用

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量110 收藏
点赞数
分类专栏： Web前端实验 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51173747/article/details/130199393
版权

实验目的及要求：

  1. 掌握Jquery页面初始化方法
  2. 掌握Jquery的选择器的基本使用
  3. 掌握Jquery对DOM 的基本操作
  4. 掌握vue的基础用法

1

要求：1.奇数行背景色：#FFF38F；偶数行背景色：#FFFFEE;选中行：#FF6500

2.选中行时，设置单选框选中状态

<!DOCTYPE html>
<html lang="en">
    <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>Document</title>
     <style>
          body,html{
               border:0;
               padding:0;
          }
          .table{
               border:1px solid #000;
               border-collapse: collapse;
               text-align: center;
               border-spacing: 0;
          }
          td,th{
               border:1px solid #000;
          }
          td{
               width: 80px;
          }
          td:last-child{
               width:140px;
          }
          tr:nth-child(odd){
               background-color: #ffffee;
          }
          tr:nth-child(even){
               background-color: #fff38f;
          }
          tr.selected{
               background-color: #ff6500;
          }
     </style>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <body>
        <div id="app">
            <table class="table"  @click="choose($event)">
                <tr>
                    <th></th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>暂住地</th>
                </tr>
                <tr v-for="(item,index) in list" :key="item.id">
                    <td><input v-model="selected" type="radio" :id="item.id" /></td>
                    <td>{{item.name}}</td>
                    <td>{{item.sex?'男':'女'}}</td>
                    <td>{{item.place}}</td>
                </tr>
            </table>
        </div>
    </body>

    <script>
        new Vue({
            el: "#app",
            data: {
                list:[
                          {
                              id: 1,
                              name: '张三',
                              sex: 1,
                              place: '四川成都'
                          },
                          {
                              id: 2,
                              name: '李四',
                              sex: 0,
                              place: '四川绵阳'
                          },
                          {
                              id: 3,
                              name: '夏彦',
                              sex: 0,
                              place: '四川成都'
                          },
                          {
                              id: 4,
                              name: '王五',
                              sex: 1,
                              place: '四川南充'
                          },
                          {
                              id: 5,
                              name: '赵六',
                              sex: 1,
                              place: '四川自贡'
                          },
                          {
                              id: 6,
                              name: '罗梅',
                              sex: 1,
                              place: '四川德阳'
                          },
                      ],
                      selected: ''
            },
            methods:{
                choose(e){
                    const radio = e.target.closest('tr').querySelector('input[type=radio]');
                    if(radio){
                        radio.checked = !radio.checked;
                        this.selected = radio.id
                        radio.checked?e.target.closest('tr').style.backgroundColor = '#FF6500':e.target.closest('tr').style.backgroundColor =
                        radio.id%2===0?'#ffffee':'#fff38f'

                        console.log(radio.id);
                    }
                }
            }
        });
    </script>
</html>

2

Jquery中提供了filter方法进行过滤，如$("选择器").filter(内容过滤器)。搜索过程中可先隐藏hide所有数据行，满足条件的行进行显示show（）

 

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
     <style>
          body,html{
               border:0;
               padding:0;
          }
          .table{
               border:1px solid #000;
               border-collapse: collapse;
               text-align: center;
               border-spacing: 0;
          }
          td,th{
               border:1px solid #000;
          }
          td{
               width: 80px;
          }
          td:last-child{
               width:140px;
          }
          tr:nth-child(odd){
               background-color: #ffffee;
          }
          tr:nth-child(even){
               background-color: #fff38f;
          }
          tr.selected{
               background-color: #ff6500;
          }
     </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
    <div id="app">
          <div class="search">
               <label>查询</label>
               <input type="text" v-model="key">
          </div>
        <table class="table"  @click="choose($event)">
            <tr>
                <th></th>
                <th>姓名</th>
                <th>性别</th>
                <th>暂住地</th>
            </tr>
            <tr v-for="(item,index) in searchList" :key="item.id">
                <td><input v-model="selected" type="radio" :id="item.id" /></td>
                <td>{{item.name}}</td>
                <td>{{item.sex?'男':'女'}}</td>
                <td>{{item.place}}</td>
            </tr>
        </table>
    </div>
</body>
    <script>
        new Vue({
            el: "#app",
            data: {
                list:[
                          {
                              id: 1,
                              name: '张三',
                              sex: 1,
                              place: '四川成都'
                          },
                          {
                              id: 2,
                              name: '李四',
                              sex: 0,
                              place: '四川成都'
                          },
                          {
                              id: 3,
                              name: '王五',
                              sex: 0,
                              place: '未知'
                          },
                          {
                              id: 4,
                              name: '赵六',
                              sex: 1,
                              place: '四川自贡'
                          },
                          {
                              id: 5,
                              name: '心理学家',
                              sex: 0,
                              place: '第五医院'
                          },
                          {
                              id: 6,
                              name: '王五',
                              sex: 1,
                              place: '四川德阳'
                          },
                      ],
                    selected: '',
                    key:''
            },
            methods:{
                choose(e){
                    const radio = e.target.closest('tr').querySelector('input[type=radio]');
                    if(radio){
                        radio.checked = !radio.checked;
                        this.selected = radio.id
                        radio.checked?e.target.closest('tr').style.backgroundColor = '#FF6500':e.target.closest('tr').style.backgroundColor =
                        radio.id%2===0?'#ffffee':'#fff38f'

                        console.log(radio.id);
                    }
                }
            },
          computed:{
               searchList() {
                    return this.list.filter(item => {
                        return item.name.includes(this.key);
                    });
                },
          },
        });
    </script>
</html>

3

 

 

<!DOCTYPE html>
<html lang="en">
    <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>select</title>

    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <body>  
        <div id="app">
                <select name="province" id="province" @change="handleChange($event,$event.target.value)">
                    <option disabled selected>请选择省份</option>
                    <option v-for="p in list" :value="p.id">{{p.name}}</option>
                </select>
                <select v-show="selected.province" name="city" id="city" @change="handleChange($event,$event.target.value)">
                    <option disabled selected>请选择城市</option>
                    <option v-for="c in list[key].city" :value="c.id">{{c.name}}</option>
                </select>
        </div>
    </body>
    <script>
        new Vue({
            el: "#app",
            data: {
                list: [
                    {
                        id: '001',
                        name: '四川省',
                        city: [
                            {
                                id: '001001',
                                name: '成都市',
                                county: ['...']
                            },
                            {
                                id: '001002',
                                name: '巴中市',
                                county: ['...']
                            },
                            {
                                id: '001003',
                                name: '绵阳市',
                                county: ['...']
                            },
                        ]
                    },
                    {
                        id: '002',
                        name: '河北省',
                        city: [
                            {
                                id: '002001',
                                name: '邢台市',
                                county: ['...']
                            },
                            {
                                id: '002002',
                                name: '石家庄',
                                county: ['...']
                            },
                            {
                                id: '002003',
                                name: '邯郸市',
                                county: ['...']
                            },
                        ]
                    },
                    {
                        id: '003',
                        name: '广东省',
                        city: [
                            {
                                id: '003001',
                                name: '珠海市',
                                county: ['...']
                            },
                            {
                                id: '003002',
                                name: '深圳市',
                                county: ['...']
                            },
                            {
                                id: '003003',
                                name: '广州市',
                                county: ['...']
                            },
                        ]
                    },
                    {
                        id: '004',
                        name: '未名省',
                        city: [
                            {
                                id: '003001',
                                name: '北区',
                                county: ['...']
                            },
                            {
                                id: '003002',
                                name: '嘉南区',
                                county: ['...']
                            },
                            {
                                id: '003003',
                                name: '锦兰区',
                                county: ['...']
                            },
                            {
                                id: '003004',
                                name: '文华区',
                                county: ['...']
                            },
                            {
                                id: '003005',
                                name: '滨河南区',
                                county: ['...']
                            },
                        ]
                    },
                ],
                selected: {
                    province: '',
                    city: ''
                },
                key: 0
            },
            methods:{
                handleChange(e,value){
                    this.key = Number(value)-1;
                    switch(e.target.id){
                        case 'province':
                            this.selected.province = value;
                            break;
                        case 'city':
                            this.selected.city = value;
                            break;
                        default:
                            console.log('changed')
                    }
                    
                }
            },
        });
    </script>
</html>

4

 

 

<!DOCTYPE html>
<html lang="en">
    <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>Document</title>
<style>
     body,html{
               border:0;
               padding:0;
          }
          .table{
               border:1px solid #000;
               border-collapse: collapse;
               text-align: center;
               border-spacing: 0;
          }
          td,th{
               border:1px solid #000;
          }
          td{
               width: 80px;
          }
          td:last-child{
               width:140px;
          }
          tr:nth-child(odd){
               background-color: #ffffee;
          }
          tr:nth-child(even){
               background-color: #fff38f;
          }
          .submit{
            position: relative;
            left:40vw;
          }
</style>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <body>
        <div id="app">
            <fieldset>
                <legend>添加:</legend>
                <dialog id="tip">请正确输入所有信息</dialog>
                Name: <input type="text" v-model="person.name" /> Email: <input type="text" v-model="person.email" />
                Salary:
                <input type="text" v-model="person.salary" /> <br /><br />
                <button class="submit" @click="add">Submit</button>
            </fieldset>
            <br /><br />
            <table class="table">
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Salary</th>
                    <th></th>
                </tr>
                <tr v-for="(item,index) in list" :key="item.id">
                    <td>{{item.name}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.salary}}</td>
                    <td><a href="#" @click="del(item.id)">Delete</a></td>
                </tr>
            </table>
        </div>
    </body>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                list: [
                    { id: 1, name: "李四", email: "ls@qq.com", salary: "8888" },
                    { id: 2, name: "陆景和", email: "ljh@qq.com", salary: "1000000" },
                    { id: 3, name: "夏彦", email: "xy@qq.com", salary: "50000" },
                    { id: 4, name: "左然", email: "zr@qq.com", salary: "30000" },
                    { id: 5, name: "张三", email: "zhangsan@qq.com", salary: "4000" },
                ],
                curId: 4,
                person: {
                    id: null,
                    name: "",
                    email: "",
                    salary: "",
                },
            },
            methods: {
                add() {
                    if(Object.values(this.person).some(i=>i==='')){
                        let t = document.getElementById('tip')
                        t.open = true
                        setTimeout(()=>{t.open=false},1000)
                        return;
                    }
                    this.person.id = this.curId++;
                    this.list.push(this.person);
                    this.person = { id: null, name: "", email: "", salary: "" };
                },
                del(id){
                    this.list = this.list.filter(i=>i.id!==id)
                }
            },
        });
    </script>
</html>

 

 

 

平平无奇小码手
关注
专栏目录
jquery的实验
tolm77549的博客
04-27 265
4.1 <body> <select id = "province"> <option value = "0">陕西省</option> <option value = "1">四川省</option> <option value = "2">福建省</option> </select> <select id = "city">
jQuery的应用(二)
qq_61102168的博客
02-21 1176
对上一节内容的补充。
Web实验四Jquery基础应用
m0_74331689的博客
04-23 412
掌握Jquery页面初始化方法；掌握Jquery的选择器的基本使用；掌握Jquery对DOM 的基本操作；掌握vue的基础用法
前端实验四——jQuery基础应用
newY6的博客
04-22 249
实现效果图。
RIA应用开发实验指导书：实验四 jQuery动画效果.doc
06-25
**RIA（Rich Internet Application）应用开发实验：jQuery动画效果** jQuery是一个强大的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画效果以及Ajax交互。在RIA应用开发中，jQuery的动画效果扮演着...
RIA应用开发实验指导书：实验二 jQuery文档处理.doc
06-25
**RIA（Rich Internet Application）应用开发实验指导书：实验二 jQuery文档处理** 在RIA应用开发中，jQuery是一个非常重要的库，它简化了JavaScript的操作，尤其是处理DOM（Document Object Model）和事件绑定。本...
jQuerySampler:jQuery实验的集合
05-16
jQuerySampler是一个专注于jQuery实验的项目，它汇集了一系列与jQuery相关的实践案例，旨在帮助开发者深入理解和应用jQuery库。在这个项目中，你可以找到各种各样的示例，涵盖了从基础操作到高级技巧的广泛内容，...
RIA应用开发实验指导书：实验一 jQuery选择器.doc
06-25
**RIA应用开发实验指导书：实验一 jQuery选择器** 在Web开发领域，Rich Internet Application（RIA）技术使得网页能够提供更丰富的用户体验，而jQuery作为一款强大的JavaScript库，是实现RIA功能的重要工具。本实验...
lab9:jQuery的
04-22
一、jQuery基础 1. **选择器**：jQuery的选择器类似于CSS，允许我们快速选取DOM元素。例如，`$("#myID")`选择ID为"myID"的元素，`$(".myClass")`选择所有class为"myClass"的元素。 2. **链式操作**：jQuery对象...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 882
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 601
【代码】【JavaScript】LeetCode：707设计链表。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 482
实现中国地图各省数据案例
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 524
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
JS笔记
2201_76100326的博客
09-11 903
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
vue3中动态引入本地图片的两种方法
haodanzj的博客
09-11 291
动态在本地引入图片
JS的输出语句
J3259392566的博客
09-13 271
js中严格区分大小写。
八十多种证件识别接口-JavaScript身份证识别API示例-护照识别-户口页识别
weixin_41711744的博客
09-12 631
证件识别API包含了身份证识别、护照识别、户口页识别、港澳台来往通行证识别等八十多种证件识别类型，提供了快速、精准的证件信息提取功能，广泛应用于实名认证 、机场出入口等场景。身份证识别API常用于在线支付、金融服务、酒店入住等需要进行实名认证和提取身份信息的场景。在这些场景中，通过快速识别和验证身份证信息，可以有效提高处理速度，减少人为错误，增强安全性。八十多种证件识别接口提供了一种高效、精准的识别方式来读取各类证件信息，通过合理应用这些技术，可以大幅提升用户体验和企业运营效率。
《实现 HTML 图片轮播效果》
qq_69304031的博客
09-11 802
在网页设计中，轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告，能够有效地吸引用户的注意力，提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。以下是一个简单的 HTML、CSS 和 JavaScript 实现的图片轮播代码示例。
jQuery实验指南：从基础到插件开发
实验8进阶到开发jQuery插件，这是对jQuery深入理解和应用的重要环节，学习者将学习如何扩展jQuery的功能，创建自定义的插件，提高代码复用性。 整个实验指导书以实践为主，通过实际操作帮助学习者巩固理论知识，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值