首页 > 其他分享 >06前端开发jQuery

06前端开发jQuery

时间:2023-11-06 13:22:21浏览次数:33  
标签:jQuery 06 标签 id ul let document 前端开发 d1

DOM操作标签

'''
在起变量名的时候 如果该变量指向的是一个标签 那么建议使用
    xxxEle
        eg:aEle\pEle\divEle\spanEle
'''
# 动态创建一个a标签并添加到页面指定位置
var aEle = document.createElement('a')  # 创建a标签
aEle.href = 'https://www.sogo.com/'  # 设置href属性
aEle.innerText = '点我去搜狗'  # 设置文本内容
var divEle = document.getElementById('d1')  # 查找标签
divEle.append(aEle)  # 内部追加标签
"""
标签可以有默认属性 
    比如 id class 等 设置的时候可以直接通过点的方式
        divEle.id = 'd1'
也可以有自定义属性
    比如 username password 等 设置的时候需要使用setAttribute
        divEle.setAttribute('username','jason')
        
setAttribute()既可以设置自定义属性也可以设置默认属性

divEle.getAttribute("age")        获取指定属性
divEle.removeAttribute("age") 移除指定属性
"""
# innerText与innerHTML
    获取值的时候 
      innerText只会获取文本内容
    innerHTML获取文本和标签
     设置值的时候 
      innerText不识别标签语法 
    innerHTML识别标签语法

获取值操作

input、option、textarea...
1.获取普通值数据
    标签对象.value
2.获取文件数据
    标签对象.value  # 只能获取到文件路径 没啥用
  标签对象.files  # 结果是一个数组 可以通过索引获取具体文件对象

属性操作

'''类属性操作'''
标签对象.classList  # 查看所有的类属性
标签对象.classList.add()  # 添加类属性
标签对象.classList.remove()  # 移除类属性
标签对象.classList.contains()  # 判断是否含有某个类属性
标签对象.classList.toggle()  # 有则移除 无则添加

'''样式操作'''
标签对象.style.属性名
    divEle.style.height = '800px'

 事件

"""
达到某个条件 自动触发的功能
    eg:用户点击某个标签弹出警告框 双击某个标签提示信息
"""
# 如何给标签绑定事件
方式1:
    <p onclick="showMsg()">快来点我 点我 点我!!!</p>
  <script>
        function showMsg() {
            alert('猴急猴急的干啥 一会儿让你好看!!!')
        }
  </script>
方式2:
  <p>快来点我 点我 点我!!!</p>
  <script>
  var pEle = document.getElementsByTagName('p')[0];
        pEle.onclick = function () {
            alert('我来了 准备好了吧')
        }
    </script>
'''
补充:事件函数中有一个固定的关键字 this指代当前被操作对象本身
'''

事件案例

# 1.数据校验
    获取用户名和密码 校验是否符合 并暂时相应提示
  '''给普通按钮绑定一个点击事件 触发校验动作'''
  <p>username:
    <input type="text" id="username">
      <span style="color: red" id="username_error"></span>
  </p>
  <p>password:
      <input type="text" id="password">
      <span style="color: red" id="password_error"></span>
  </p>
  <input type="button" value="提交" id="btn">
  <script>
      // 1.查找按钮标签
      let btnEle = document.getElementById('btn');
      // 2.绑定点击事件
      btnEle.onclick = function () {
          // 3.获取用户名和密码
          let userNameVal = document.getElementById('username').value;
          let passWordVal = document.getElementById('password').value;
          // 4.判断
          if (userNameVal === 'jason'){
              // 给用户名下面的span标签设置文本内容
              let userSpanEle = document.getElementById('username_error')
              userSpanEle.innerText = '用户名不能是jason!!!'
          }
          if (passWordVal === '123'){
              // 给密码下面的span标签设置文本内容
              let userSpanEle = document.getElementById('password_error')
              userSpanEle.innerText = '密码不能是123!!!'
          }
      }
  </script>

# 2.搜索框案例
    <input type="text" id="d1" value="默认搜索的内容">
    <script>
    // 1.查找input标签对象
    var inputEle = document.getElementById('d1')
    // 2.绑定一个聚焦事件
    inputEle.onfocus = function () {
        // 3.清空value值
        this.value = ''
    }
    // 4.绑定一个失焦事件
    inputEle.onblur = function () {
        // 5.添加一个全新的value值
        this.value = '小霸王游戏机'
    }
    </script>
# 3.省市联动
    <p>省市:
    <select name="" id="pro">

    </select>
    </p>

    <p>市区:
    <select name="" id="city">

    </select>
    </p>
    <script>
    let proEle = document.getElementById('pro');
    let cityEle = document.getElementById('city');
    // 1.自定义数据(以后有现成的组件实现)
    let data = {
        "河北": ["廊坊", "邯郸"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"],
        "安徽": ["合肥市", "芜湖市"],
        "上海": ["静安", "黄埔"],
        "深圳": ["龙湖", "罗湖"]
    };
    // 2.获取自定义对象中所有的key并添加到省市下拉框中
    for (let proVal in data) {
        // 2.1.创建option标签
        opEle = document.createElement('option');
        opEle.innerText = proVal;
        opEle.value = proVal
        // 2.2.添加到第一个下拉框中
        proEle.append(opEle)
    }
    // 3.文本域变化事件
    proEle.onchange = function () {
        // 3.0.先清空市区下拉框中的内容
        cityEle.innerHTML = '';
        let currentPro = this.value;
        let currentCityList = data[currentPro];
        // 3.1.循环获取市区数据
        for (let i=0;i<currentCityList.length;i++){
            // 3.2.创建option标签
            opEle = document.createElement('option');
            opEle.innerText = currentCityList[i];
            opEle.value = currentCityList[i]
            // 2.2.添加到第一个下拉框中
            cityEle.append(opEle)
        }
    }
    </script>

jQuery简介

'''基本介绍'''
1.兼容多浏览器
    IE浏览器:很多时候针对IE浏览器前端需要重新写一份代码操作
2.封装了js代码
    核心代码也就几十KB 加载速度快 极大的提升编写效率 
3.宗旨
    "Write less, do more."
4.Ajax交互
    异步提交 局部刷新(django部分再学)
  
'''版本区别''' 
1.x:兼容IE678
2.x:不兼容IE678
3.x:不兼容IE678  学习直接使用最新版即可
 
'''下载使用'''
下载地址:https://jquery.com/
jQuery必须先导入才可以使用(html页面上得写导入语句>>>:容易忘)
jQuery本身就是一个js文件 里面写了一些js代码而已

'''导入方式'''
1.本地jQuery文件  (python中先写好,后面需要用时,直接导入地址)
    不会收到网络影响
2.CDN加速服务
    需要确保有互联网
    min.js  压缩之后的文件 容量更小  
             .js   没有压缩的文件 容量稍大
 
'''基本使用'''
将页面上的两个p标签文本内容一个变成红色 一个变成绿色
原生的js代码
  let p1Ele = document.getElementsByTagName('p')[0]
  let p2Ele = document.getElementsByTagName('p')[1]
  p1Ele.style.color = 'red'
  p2Ele.style.color = 'green'

jQuery代码
    $('#d1').css('color','red').next().css('color','green')     #更加简单

下面的方法,可以让以后在使用pthon或者html文件的时候,自动开始添加好一些东西

比如python中可以添加文字,html中加入jQuery地址,后期方便直接使用

 

查找标签

'''基本选择器'''
$('#d1')  # id选择器  
$('.c1')  # class选择器  
$('p')  # 标签选择器
$('div#d1')
$('div,#d1,.c1')
$("x y")        // x的所有后代y(子子孙孙)
$("x > y")    // x的所有儿子y(儿子)
$("x + y")    // 找到所有紧挨在x后面的y
$("x ~ y")    // x之后所有的兄弟y

'''基本筛选器'''
$('ul li:first')  #ul中第一个l1
$('ul li:last')    #ul中最后一个l1
$('ul li:eq(2)')  #ul中第二个l1
$('ul li:odd')     #ul中偶数的l1
$('ul li:even')     #ul中奇数的l1
$('ul li:gt(2)')     #ul中大于第二个的l1
$('ul li:lt(2)')     #ul中小于第二个的l1
$('ul li:not(#d1)')    #ul中的全部l1,除了d1地址的l1
$('ul:has(#d1)')  # 查看内部含有id是d1的ul标签

'''属性选择器'''
$('[name]')
$('[name="jason"]')
$('div[name="jason"]')

'''表单筛选器:专门针对form表单内的标签'''
$('input[type="text"]')     筛选器简化    $(':text')

$(':checked') 会将option自身也找到
$(':selected')  只会找到option标签

'''筛选器方法'''
# 同级别往下查找
$("#id").next()     #id后面一个
$("#id").nextAll()    #找id后面全部
$("#id").nextUntil("#i2")    #从id一直往下,直到找到i2结束
# 同级别网上查找
$("#id").prev()   #和上面相似,只是向上查找
$("#id").prevAll()
$("#id").prevUntil("#i2")
# 查找父标签
$("#id").parent()
$("#id").parents() 
$("#id").parentsUntil() 
# 查找儿子和兄弟
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们(同级别上下所有标签)

"""
链式操作
$('#d1').parent().parent().parent()
$('#d1').parent().parent().next().parents()
一个对象操作完毕之后还可以继续点击相同或不同的方法操作其他标签
    
核心:
    对象在调用完一个方法之后返回的还是一个对象
"""

 

标签:jQuery,06,标签,id,ul,let,document,前端开发,d1
From: https://www.cnblogs.com/Milk1/p/17808959.html

相关文章

  • UOS 1060a 安装向日葵
    1、准备操作系统(https://cdimage-download.chinauos.com/server/1060/uos-server-20-1060a-amd64.iso):  2、准备软件包(访问https://sunlogin.oray.com/download/linux?type=personal选择CentOS,下载图形版本):  3、安装试一下(rpm-ivhSunloginClient_11.0.1.44968......
  • 231106-jmeter随笔
    1.获取接口的执行时间 Stringctime=prev.getTime().toString();2.String转int intc=Integer.parseInt(ctime);3.获取接口的请求data部分Stringreq_data=prev.queryString4.jmeter后置处理器,文件写入本地,用于帅选参数化数据Stringfilename=“本......
  • 206-java修改图片文件的元属性值TIFF_TAG_SOFTWARE等
    base64的图片转为文件//base64的图片转为文件Stringbase64String=obj.getString("base64");byte[]imageBytes=java.util.Base64.getDecoder().decode(base64String);FileoutputFile=null;FiletmpPathDir=newFile(tmpPath);tmpPathDir.mkdirs();StringfileP......
  • 统信UOS桌面操作系统1060上修改启动器中软件名称
    原文链接:统信UOS桌面操作系统1060上修改启动器中软件名称hello,大家好啊,今天给大家带来一篇在统信桌面操作系统1060上修改启动器中软件名称的文章,这样我们就可以将经常使用的软件修改个个性化的名称显示,欢迎大家浏览分享。关注我吧!1、安装Krfb软件,为Krfb软件修改名称2、查看系统信息......
  • 2023-2024-1 20231306 《计算机基础与程序设计》第六周学习总结
    这个作业属于哪个课程2023-2024-1-计算机基础与程序设计这个作业要求在哪里2023-2024-1计算机基础与程序设计第六周作业这个作业的目标Polya如何解决问题、简单类型与组合类型、复合数据结构、查找与排序算法、算法复杂度、递归、代码安全作业正文《计算机......
  • ARC_068F Solitaire题解
    非常骚的一道题首先看数据范围就很像dp(而且在dp专题里),尝试直接dp,发现不太行手玩一波样例,发现答案是2的若干次方乘一个系数。我们发现“若干”=n-k-1,这是巧合吗!?思索一番,会发现当我们取完k个数后剩下的n-k个数取法就为2^(n-k-1),为什么呢?可以把每次操作看成“前取“”or......
  • 前端开发笔记[5]-rust的webassembly
    摘要基于rust开发webassembly入门,通过rust实现在网页中弹出警告框.rust的webassembly开发方式https://zhuanlan.zhihu.com/p/104299612入门Rust开发WebAssemblyRust编译为WebAssembly在前端项目中使用https://zhuanlan.zhihu.com/p/662991464相对来说,使用Rust开发......
  • 云原生架构实战06 Kubernetes的核心概念
    一、有状态和无状态二、对象规约和状态spec是规约规格的意思,描述了对象的期望状态--希望对象所具有的特征,当创建Kubernetes对象是,必须提供兑现对象的规约,用来描述该对象的期望状态,以及关于对象的一些基本信息(名称)状态status:表示对象的实际状态,该属性由k8s自己维护,会通过一系列......
  • 2023-2024-1 20231406 《计算机基础与程序设计》第六周学习总结
    2023-2024-120231406《计算机基础与程序设计》第六周学习总结作业信息这个作业属于哪个课程([2023-2024-1-计算机基础与程序设计](https://edu.cnblogs.com/campus/besti/2023-2024-1-CFAP)这个作业要求在哪里(2023-2024-1计算机基础与程序设计第六周作业这个作业......
  • 【趣味Javascript】前端开发中不为人知的LHS和RHS查询,你真的弄明白了吗? 《1024程序
    ......