首页 > 其他分享 >【前端】-jQuery(带你让你深入了解学习使用jQuery)

【前端】-jQuery(带你让你深入了解学习使用jQuery)

时间:2024-09-29 22:48:39浏览次数:7  
标签:jQuery console log 前端 元素 let 深入 选择器

引言:  jQuery 是一个轻量级的 JavaScript 库,自 2006 年发布以来,它迅速成为 Web 开发中不可或缺的工具。它通过提供简洁的语法和强大的功能,简化了 HTML 文档操作、事件处理、动画效果以及 AJAX 请求的实现。jQuery 允许开发者以更少的代码实现复杂的任务,提升开发效率。此外,jQuery 还具备良好的跨浏览器兼容性,使得开发者无需关注不同浏览器间的差异,能够专注于构建更好的用户体验。无论是初学者还是经验丰富的开发者,jQuery 都是实现现代 Web 应用的强大助手。

 因为使用jQuery需要引入jQuery的js文件,所以大家需要下载jQuery相应的js文件

下载步骤:

 jQuery官网jQuery

点击显示下面的网页,然后使用快捷键ctrl+s进行保存到文件夹中,就可以在vscode上直接使用了 (我下的就是3.7.1版本的)

 jQuery的使用:

1.对象:

1.1jQuery包装级对象:
<body>
  <div id="mydiv">jquery</div>
  <script src="./jquery-3.7.1.js" type="text/javascript" charset="UTF-8"></script>
  <script type="text/javascript">
    //jQuery包装级对象
    var div = $('mydiv')
    console.log(div)
  </script>
</body>

输出语句如下图所示 :

 

 1.2jQuery包装级对象和dom对象之间的转换
    // DOM对象转jQuery对象
    var domDiv = document.querySelector('#mydiv')
    mydiv = $(domDiv)

    // jQuery转DOM对象
    var div = $('mydiv')
    var dom = div[0]

 2.选择器:

2.1基础选择器

  1.  元素选择器     元素名

  2.  类选择器    .类名

  3.  id选择器    #id名

  4.  通用选择器     *

  5.  混合选择器    选择器1,选择器2

!- - 这个是标准的使用jQuery的框架,下面再书写代码时外面的js引入以及script元素将会省略 - - !

  <div id="idiv">id</div>
  <div class="cdiv">class</div>
  <div>元素名</div>
  <p>p</p>
    // id选择器
    let idiv = $('#idiv')
    // 类选择器
    let cdiv = $('.cdiv')
    // 元素选择器
    let div = $('div')
    // 通用选择器
    let divAll = $('*')
    // 混合选择器
    let divSome = $('div,p')
    console.log(idiv)
    console.log(cdiv)
    console.log(div)
    console.log(divAll)
    console.log(divSome)

以下是输出语句 

关于第四个,通用选择器有12个:

 html head meta meta title body div#idiv div.cdiv div p script script

2.2层次选择器

    1.后代选择器(父元素 指定元素)

    2.子选择器(父元素 > 指定元素)

    3.相邻选择器(父元素 + 指定元素)

    4.同辈选择器(父元素~指定元素)

<div id="parent">
    <div id="child" class="testColor">
      <div class="first">子选择器</div>
      <img src="./img1">
      <img src="./img2">
    </div>
    <div>
      <div></div>
    </div>
  </div>
    let div1 = $('#parent div')
    console.log(div1)
    let div2 = $('#parent>div')
    console.log(div2)
    let div3 = $('#child>img')
    console.log(div3)
    let div4 = $('img+img')
    console.log(div4)

2.3表单选择器:
 <input type="text" name="" id="">
 <button></button>
  //表单选择器:input,会匹配所有的input textarea select button 元素
  let input = $(':input')
  console.log(input)

3.操作元素:

3.1操作元素的属性;

  获取属性

  (

    元素分类

    固有属性:元素本身有的属性 id,name,class,style

    返回值是boolean类型的属性 (checked,selected,disabled)

    自定义属性 用户自己定义的属性

  )

  attr('属性名') 获取的是属性值  没有属性值就是undefined

  prop('属性名') 对于固有属性获得的是属性值,对于boolean类型获得true和false,本可获得prop()

  设置属性

  移除属性

  <input type="checkbox" name="box" id="aa" checked="checked" abc="aaa">
  <input type="checkbox" name="box" id="bb">

获取元素的属性

 //固有属性
  let name = $('#aa').attr('name')
  console.log(name)  //box

  //boolean属性
  let check1 = $('#aa').attr('checked')  //checked
  let check2 = $('#aa').prop('checked')  //true

  let check3 = $('#bb').attr('checked')  //undefined
  let check4 = $('#bb').prop('checked')  //false

  //自定义属性
  let aaa1 = $('#aa').attr('abc')  //aaa
  let aaa2 = $('#aa').prop('abc')  //undefined

设置元素属性

  //设置属性  value是固有属性
  $("#aa").attr('value', '1')
  $("#bb").prop('value', '2')

  //设置boolean属性
  $("#bb").attr('checked', '')  //让第二个选框也被选中
  $("#bb").prop('checked', false)  //设置第二个选框的属性值为false不被选中

  //自定义属性  prop不可设置
  $("#aa").attr('uname', 'admin')  //设置uname='admin'
  $("#aa").prop('uname1', 'admin1')
3.2 获取元素样式

  attr('class')  获取元素的样式名

  attr('class', '样式名')  设置元素的样式

  addClass('样式名')  添加样式  在原来基础上添加样式

  css()  添加具体样式(行内样式)  css('样式名','样式值')设置单个样式   css({'样式名':'样式值','样式名':'样式值'})设置多个

  removeClass('样式名')  移除样式

  <h3>css()方法设置</h3>
  <div id="1" class="blue">蓝色</div>
  <div id="2" class="red">红色</div>
  <div id="3">无色</div>
  .blue {
      width: 100px;
      height: 100px;
      background-color: blue;
    }

    .red {
      width: 100px;
      height: 100px;
      background-color: red;
    }

    .green {
      width: 100px;
      height: 100px;
      background-color: green;
    }
let a1 = $("#1").attr("class")  //blue

  // 设置元素属性(如果之前有那么class属性就替换,没有就添加)
  $("#1").attr('class', 'red')
  $("#3").attr('class', 'green')

  // 添加样式  后面的css会覆盖上面的css样式,显示后面的css样式(覆盖不替换)
  $("#1").addClass('green')

  // 通过css添加样式
  $("h3").css('font-size', '20px')
  $("h3").css('color', 'blue')

  //删除class属性
  $("#1").removeClass('green')
3.3操作元素内容

  html()  获取元素内容 包括HTML标签 非表单标签

  html('内容')  设置元素内容 包括HTML标签 非表单标签

  text() 获得元素的纯文本内容,不包括HTML标签(非表单元素)

  text('内容')  设置元素的纯文本内容,不包括HTML标签(非表单元素)

  val()  获取元素的值(表单元素)

  val('值')  设置元素的值(表单元素)

  表单元素:text, password, radio, checkbox, 隐藏寓hidden, textarea, select

  <h1><span>html()和text()方法设置元素内容</span></h1>
  <div id="html1"></div>
  <div id="html2"></div>
  <div id="text1"></div>
  <div id="text2"></div>
  <input type="text" name="uname" id="o" value="0">
    //设置元素
    $("#html1").html('<span>年后</span>')  //页面显示年后
    $("#html2").html('年后')  //年后
    //获得元素
    let a1 = $("#html1").html()    //<span>年后</span> 
    let a2 = $("#html2").html()    //年后

    //设置元素
    $("#text1").text('<h4>上海</h4>')  //页面中显示<h4>上海</h4>
    $("#text2").text('上海') //上海
    //获得元素
    let b1 = $("#text1").text()  //<h4>上海</h4>
    let b2 = $("#text2").text()  //上海

    let val1 = $("#o").val()
    console.log(val1)  //0

    let val2 = $("#o").val("你好")
    console.log(val2.val())  //你好

下面为浏览器中显示的内容 

 4.删除元素

  删除元素

  remove()

  删除元素及其子元素 标签内容一起删除

  empty()

  清空元素内容,保留标签

  <h3>删除元素</h3>
  <span class="green">1</span>
  <span class="blue">2</span>
  <span class="green">1</span>
  <span class="blue">2</span>
  $('.blue').remove()
  $('.green').empty()

5.遍历内容:

通过使用each()方法遍历内容

  <span class="green">1</span>
  <span class="green">2</span>
  <span class="green">3</span>
  <span class="green">4</span>
$('.green').each(function (index, element) {
    console.log(index)
    console.log(element)
    console.log($(element))
    console.log($(this))
  })

6.事件:

6.1加载事件:

    ready 加载事件

    当页面中的dom结构加载完毕后执行

    类似js中的load事件

加载事件的语法:

 语法
  $(document).ready(function () {

  })
  简写
  $(function () {

  })
<p id="p1">文本</p>
  $(document).ready(function () {
    console.log($('#p1'))
  })

 6.2绑定事件:

  基础语法:

  $(selector).bind(eventType, eventData, handler)

  ----------------------------------------------------------------

  eventType:要绑定的事件类型,例如 'click'、'mouseover'、'resize' 等。

  eventData:可选参数,传递给事件处理器的额外数据。

  handler:事件发生时要执行的函数。

 绑定单个事件  ---  1.直接绑定   2.bind绑定

  绑定多个事件(不常用(大家理解即可))

  为多个事件绑定同一个函数

  指定元素.bind('事件类型1,事件类型2,事件类型3', function () { })

  1.指定元素.bind('事件类型', function () {

   }).bind('事件类型', function () {

   })

   2指定元素.bind({

    '事件类型': function () { }, '事件类型': function () { }

  })

  // bind()绑定
  $('#myButton').bind('click', function () {
    console.log('按钮被点击了!');
  });

  // 直接绑定
  $('#myButton').click(function () {
    console.log('按钮被点击了!');
  })

7.ajax

  jQuery调用ajax方法:

  格式:  $.ajax({})

  参数:type:请求方式GET/POST

        url 请求地址

        async 是否异步

        data 发送红岛服务器的数据

        dataType 预期服务器返回的数据类型

        contentType 设置请求头

        succes 请求成功调用此函数

        error 请求失败后调用此函数

$.ajax({
    url: 'https://api.example.com/data', // 请求的 URL
    type: 'GET', // 请求类型(GET 或 POST)
    dataType: 'json', // 预期服务器返回的数据类型
    success: function(data) {
        console.log('成功:', data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error('请求失败:', textStatus, errorThrown);
    }
});

输出如下: 

jQuery分享到这里基本解释了,感谢大家的观看!

标签:jQuery,console,log,前端,元素,let,深入,选择器
From: https://blog.csdn.net/2301_81253185/article/details/142598208

相关文章

  • 基于Django的景点预约管理系统,前端使用bootstart框架开发,包括用户和管理员两种角色
    研究背景随着旅游业的快速发展和数字化技术的进步,景区预约系统的需求日益增长。传统的现场购票模式在高峰期常常面临人流量过大、排队时间长等问题,不仅影响游客的游览体验,还对景区的管理造成一定挑战。尤其是在疫情后,人们更加重视避免聚集,景区需要合理控制人流,采用在线预约系......
  • vue中使用decimal.js对前端数值类型进行高精度计算
    需求背景:由于一些场景我们需要在前端JavaScript进行数值计算,且对精度要求比较严谨,而前端数值是浮点类型,直接使用计算可能会产生一系列的精度问题,常见的浮点运算问题,比如精度损失等;所以例如涉及到一些金额计算等,需要进行高精度处理。解决方案:(1)可以把数值计算部分逻辑交给后端接口......
  • 深入解析网络通信的四大关键要素:网卡、MAC地址、IP地址、子网掩码与端口
    文章目录深入解析网络通信的四大关键要素:网卡、MAC地址、IP地址、子网掩码与端口**1.网卡(NetworkInterfaceCard,NIC)**关键知识点:联系与区别:**2.MAC地址(MediaAccessControlAddress)**关键知识点:联系与区别:**3.IP地址(InternetProtocolAddress)**关键知识......
  • 【Terminator】深入了解Terminator:高效终端的终极指南
    文章目录前言1.Terminator1.1Terminator简介1.2为什么选择Terminator?Terminator安装与使用Terminator安装Terminator使用与快捷键窗口管理分屏管理光标和文本操作查找和搜索其他总结前言该篇文章主要是介绍一个好用的终端关于ROS的一些学习笔记,可以看这个系......
  • 深入理解 Nuxt.js 中的 app:data:refresh 钩子
    title:深入理解Nuxt.js中的app:data:refresh钩子date:2024/9/29updated:2024/9/29author:cmdragonexcerpt:摘要:本文详细介绍了Nuxt.js框架中的app:data:refresh钩子,包括其定义、用途、使用方法及实际应用案例。该钩子用于在数据刷新时执行额外处理,支持服务器端和客......
  • 前端动画案例分享 (二)
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><style>.wave-loader{displa......
  • 主流前端框架的详细对比和选择建议
    前端框架的选择对于现代Web开发至关重要,影响到开发效率、代码可维护性以及用户体验。以下是对几种主流前端框架的详细对比和选择建议。一、前端框架概述前端框架是为了简化Web开发而设计的一组工具和库,帮助开发者构建用户界面、管理状态以及处理与服务器的交互。常见的前端框......
  • UIOTOS前端组态跟中控等SCADA、HMI有什么区别?
    UIOTOS不是SCADA,不过可以拿去开发SCADA,在绘图、HMI、交互界面搭建能力上,是uiotos的强项,毕竟定位是一站式IoT应用无代码搭建工具。尤其是嵌套、继承、连线,基本上组态一样搭建,能做到代码定制开发的效果。这点跟一般的前端低代码组态大屏设计器还是有很大不一样。另外,SCADA一般跟协......
  • 关于前端框架的对比和选择
    成长路上不孤单......
  • 【前端】ES12:ES12新特性
    文章目录1逻辑赋值操作符2数字分隔符3replaceAll4Promise.any5WeakRef6FinalizationRegistry1逻辑赋值操作符逻辑赋值操作符??=、&&=、||=。leta=trueletb=false//a&&=b//falsea||=b;//trueconsole.log(a)letobj={name:"kerwin......