定时器案例、省市联动、jQuery快速入门

news/2024/7/11 0:15:34 标签: jquery, 前端, javascript

定时器案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="i1">
<button id="b1">开始</button>
<button id="b2">结束</button>

<script>
    var t;
    function showTime() {
        var i1Ele = document.getElementById('i1');
        var time = new Date();
        i1Ele.value = time.toLocaleString();
    }
    showTime();
    var b1Ele = document.getElementById('b1');
    b1Ele.onclick = function (ev) {
        if (!t){
            t = setInterval(showTime,1000)
        }
    };
    var b2Ele = document.getElementById('b2');
    b2Ele.onclick = function (ev) {
       clearInterval(t);
       t = undefined
    };

</script>
</body>
</html>

省市联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<select name="" id="province">
    <option value="">请选择</option>

</select>

<select name="" id="city">
    <option value="">请选择</option>
</select>

<script>
    var data = {
        "河北省": ["廊坊", "邯郸", "保定", "邢台", "石家庄"],
        "北京": ["朝阳区", "海淀区", "大兴", "通州"],
        "河南": ["郑州", "周口", "信阳", "洛阳"],
    };
    var province = document.getElementById('province');
    var city = document.getElementById('city');
    // 1. 要循环data数据，拿到data数据的key值是省作为第一个下拉框的数据
    for (var i in data) {
        // 这里的i值就是data 的key值、其实就是省数据，我想拿到省对应的市所有数据，怎么拿?
        // console.log(data[i])
        // 2. 创建option标签，怎么样创建标签
        var option = document.createElement('option'); // <option value=""></option>

        // 3. 给option标签设置value值和文本数据
        option.value = i;  // <option value="河北省">河北省</option>
        option.innerText = i; // <option value="北京">北京</option>
        // 4. 把option追加到省的select中取
        province.appendChild(option);
    }

    // 接下来给省的下拉框绑定事件
    province.onchange = function () {
        // 1. 先拿到当前用户选择的是哪个省的数据
        // var current_province = province.value;
        var current_province = this.value;

        // 2. 根据选择的省获取对应的市信息
        var current_city_list = data[current_province]; // ["朝阳区", "海淀区", "大兴", "通州"],
        city.innerText = '';
        city.appendChild('<option value="">请选择</option>');
        // 3. 循环的把获取到的所有市列表放到第二个select框去
        for (var i = 0; i < current_city_list.length; i++) {
            var option = document.createElement('option'); // <option value=""></option>

            // 3. 给option标签设置value值和文本数据
            option.value = current_city_list[i];  // <option value="河北省">河北省</option>
            option.innerText = current_city_list[i]; // <option value="北京">北京</option>
            // 4. 把option追加到省的select中取
            city.appendChild(option);
        }
    }

</script>
</body>
</html>

jQuery快速入门

jQuery

jQuery介绍

  1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
  2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

jQuery的优势

  1. 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
  2. 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
  3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
  4. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
  5. Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
  6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
  7. 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

jQuery内容：

1. 选择器
2. 筛选器
3. 样式操作
4. 文本操作
5. 属性操作
6. 文档处理
7. 事件
8. 动画效果
9. 插件
10. each、data、Ajax
下载链接：jQuery官网
中文文档：jQuery AP中文文档

jQuery版本

  • 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
  • 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
  • 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

使用jQuery必须先下载库文件，下载方式：
1. 去官网下载：https://jquery.cuishifeng.cn/jQuery_selector_context.html
            https://jquery.com/
2. bootcdn:
https://www.bootcdn.cn/

jQuery对象

它和DOM对象可以相互转换，但不是同一个东西，如果你想使用jQuery提供的各个方法，就需要你把DOM对象转为jQuery对象.
DOM对象：标签对象
 

javascript">$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

jQuery基础语法

javascript">$(selector).action()

查找标签

基本选择器

id选择器：
javascript">$("#id")

标签选择器：

javascript">$("tagName")
class选择器：
javascript">$(".className")
配合使用：
javascript">$("div.c1")  // 找到有c1 class类的div标签
$('div#d1')
所有元素选择器：
javascript">$("*")
组合选择器：
javascript">$("#id, .className, tagName")

$('#d1,.c1,p')  # 并列+混用
$('div span')  # 后代
$('div>span')  # 儿子
$('div+span')  # 毗邻
$('div~span')  # 弟弟

层级选择器：

x和y可以为任意选择器

javascript">$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

基本筛选器：

javascript">:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
复制代码

属性选择器：

javascript">[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

表单筛选器：

javascript">:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

例子：

javascript">$(":checkbox")  // 找到所有的checkbox
$('input[type="text"]')---------->$(':text') 
$('input[type="password"]')---------->$(':password')

表单对象属性:

javascript">:enabled
:disabled
:checked
:selected

例子：

找到可用的input标签

javascript"><form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签

找到被选中的option：

javascript"><select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option


$(':checked')  # 它会将checked和selected都拿到
$(':selected')  # 它不会 只拿selected
$('input:checked')  # 自己加一个限制条件


 


http://www.niftyadmin.cn/n/5149810.html

相关文章

一个使用uniapp+vue3+ts+pinia+uview-plus开发小程序的基础模板

一个使用uniapp+vue3+ts+pinia+uview-plus开发小程序的基础模板

uniappuviewPlusvue3tspiniavite 开发基础模板 使用 uniapp vue3 ts pinia vite 开发基础模板&#xff0c;拿来即可使用&#xff0c;不要删除 yarn.lock 文件&#xff0c;否则会启动报错&#xff0c;这个可能和 pinia 的版本有关&#xff0c;所以不要随意修改。 拉取代码…
阅读更多...
JAVA整理学习实例（二）Object类

JAVA整理学习实例（二）Object类

JAVA整理学习实例&#xff08;二&#xff09;Object类 注&#xff1a;整理一下之前写的东西&#xff0c;然后在修修补补&#xff0c;水平有限&#xff0c;有错误的请指正。 前言 如果面试没有遇到问Object类的面试题&#xff0c;那真是一种遗憾。 一、关于Java Object的方法 解…
阅读更多...
H5ke9

H5ke9

上次fetvh就一个参数url,,就是get请求 fetch还可以第二个参数对象,可以指定method:改为POST 请求头header :发送txt,servlet,json给客户端,,异步请求图片 1 这节客户端传到服务器端 2异步文件上传,两三行代码把文件传输 mouseover事件 .then()的使用 是Promise对象的一个方法…
阅读更多...
正则表达式的修饰符

正则表达式的修饰符

正则表达式的修饰符是用来修改和调整正则表达式的特殊字符或元字符。修饰符可以改变正则表达式的行为和匹配方式。以下是一些常见的正则表达式修饰符&#xff1a; g&#xff08;全局&#xff09;&#xff1a;表示全局匹配&#xff0c;即在整个字符串中搜索所有匹配项&#xff…
阅读更多...
Python简单实现mysql工具类

Python简单实现mysql工具类

import pymysql import configparser# 打开连接 def create_connect():conn pymysql.connect(hostlocalhost, userroot, password123456, databaselargescreen)cur conn.cursor(cursorpymysql.cursors.DictCursor) # commond对象return conn,cur# 关闭连接 def close_connec…
阅读更多...
项目管理工具有哪些？项目管理必备的6款软件推荐！

项目管理工具有哪些？项目管理必备的6款软件推荐！

在现代商业环境中&#xff0c;项目管理已经成为一个不可或缺的工作流程。有效的项目管理可以提高团队的协作效率&#xff0c;促进任务分配和沟通&#xff0c;并确保项目按时交付。然而&#xff0c;随着项目越来越复杂和多样化&#xff0c;需要使用适合的软件工具来支持项目管理…
阅读更多...
路由器基础（十）：防火墙配置

路由器基础（十）：防火墙配置

一、防火墙默认的区域 防火墙是基于安全区域进行工作的安全设备。 一个安全区域是若干接口所连网络的集合&#xff0c;这些网络中的用户具有相同的安全属性。 通常防火墙认为在同一安全区域内部发生的数据流动是不存在安全风险的&#xff0c;不需要实施任何安全策略。只有当不同…
阅读更多...
日常踩坑-[sass]Error: Expected newline

日常踩坑-[sass]Error: Expected newline

在学习sass的时候&#xff0c;运行时发现报错 经过网上冲浪知道&#xff0c;原来在声明语言的时候 lang 不能声明为 sass &#xff0c;而是 scss ,这就有点坑了 原因&#xff1a; scss是sass3引入进来的&#xff0c;scss语法有"{}“,”;"而sass没有&#xff0c;所以…
阅读更多...
最新文章

Copyright @ 2022~2023