jQuery库

生椰拿铁You

已于 2024-09-02 19:38:41 修改

阅读量1.2k

点赞数 8

文章标签： jquery 前端 javascript

于 2024-09-01 20:47:20 首次发布

本文链接：https://blog.csdn.net/m0_73557953/article/details/141787482

版权

注明：本文参考自：jQuery - 白月黑羽 (byhy.net)

jQuery安装

Download jQuery | jQuery下载到本地

ps: script标签中的src属性：表示包含要执行的代码的外部文件位置

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="/jslib/jQuery/jquery-3.7.1.js"></script>
      </head>
      
      <body>
      
        <button id='b1'>测试按钮1</button>
        <button id='b2'>测试按钮2</button>
      
        <script>
        jQuery('button').on('click', function () { alert('按钮被点击') })
        </script>
      
      <body>
</html>

选择元素、事件处理

对比不使用jQuery:

<!DOCTYPE html>
<html lang="en">
    <head>
        
      </head>
      
      <body>
      
        <button id='b1'>测试按钮1</button>
        <button id='b2'>测试按钮2</button>
      
        <script>
            let [b1,b2] = document.querySelectorAll('button')
            b1.addEventListener('click',()=>{alert('按钮被点击')})
            b2.addEventListener('click',()=>{alert('按钮被点击')})
        </script>
      
      <body>
</html>

jQuery本身是一个构造函数，里面的参数是css选择器；jQuery('button')返回的是一个jQuery对象

，这个对象类似js的数组，里面包含了所有参数css选择器选中的DOM对象

jQuery对象的on方法，用来定义事件的处理

  jQuery('button').on('click', function () { alert('按钮被点击') })

其中参1为事件名称，参2为回调函数

当然还可以写成

  jQuery('button').click（function () { alert('按钮被点击') })

jQuery的简化别名$

  $('button').on('click', function () { alert('按钮被点击') })

处理键盘事件：

<head>
  <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
</head>

<body>

  <textarea>按ctrl+回车 试试</textarea>

  <script>
  $('textarea').on('keydown', function (e) { 
    if (e.ctrlKey && e.key==='Enter')    
      alert('按下了ctrl+回车') 
  })
  </script>

<body>

元素操作

添加元素

<head>
  <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
</head>

<body>

  <div id='content1'>
    <p id='target1'>原来的元素1</p>
  </div>

  <div id='content2'>
    <p id='target2'>原来的元素2</p>
  </div>
</body>

添加子元素示例：

1.添加到#content1 ，作为最后一个子元素

var ele1 = $("<p>新元素1</p>");
ele1.appendTo("#content1");

还可以写成

$("<p>新元素1</p>").appendTo("#content1");

2.添加到#content1 ，作为第一个子元素

$("<p>新元素2</p>").prependTo("#content1");

3.插入到#target2前面，作为哥哥节点

$("<p>新元素3</p>").insertBefore("#target2");

4.插入到#target2后面，作为弟弟节点

$("<p>新元素4</p>").insertAfter("#target2");

注意区别：一个是div里的content；一个是p里的target

还可以：先选中要插入的元素（jQuery就等价于document.querySelector(''))

$("#content1").append("<p>新元素1</p>");
$("#content1").prepend("<p>新元素2</p>");
$("#target2").before("<p>新元素3</p>");
$("#target2").after("<p>新元素4</p>");

删除元素

先选中，然后调用remove

$("#content1").remove()

替换元素内容

先选中，然后调用html方法，更新元素内部的html

$("#content2").html(`<p id='target3'>新元素222</p>`)

也可调用text方法，直接更新元素内部的文本内容

$("#target2").text(`新元素222`)

jQuery对元素属性的操作

获取元素属性

(jQuery对象的) attr() : 获取元素的属性；返回值为字符串形式

<a id="hey" 
  style='color:green;font-size: 2rem;'  
  href="/" 
  class='nav nav-item'
  attr1='自定义属性'>
  一个链接
</a>

<script>
let a = $('a') //先选 ；构造函数创建对象

console.log(a.attr('id'))
console.log(a.attr('style'))
console.log(a.attr('href'))
console.log(a.attr('class'))
console.log(a.attr('attr1'))
</script>

设置元素属性

attr() 的第二个参数就是用来设置元素的属性的

<a id="hey" style='color:green'  href="/" attr1='自定义属性'>一个链接</a>

<script>
let a = $('a')

a.attr('id', 'new-hey')
a.attr('style' , 'color:blue')
a.attr('href', 'https://www.byhy.net')
a.attr('attr1', '自定义属性2')
</script>

删除元素属性

removeAttr() :用于删除元素的属性

<a id="hey" style='color:green'  href="/" attr1='自定义属性'>一个链接</a>

<script>
let a = $('a')

a.removeAttr('id')
a.removeAttr('style')
a.removeAttr('href')
a.removeAttr('attr1')
</script>

style设置

style属性较为特殊：style的属性值本身又是一个键值对

为了方便style里面的设置，只想设置元素style里的某一个样式的属性，可以使用css()

<a id="hey" style='color:green ; font-size: 2rem;'  href="/" attr1='自定义属性'>一个链接</a>

<script>
let a = $('a')

a.css('color','red')
</script>

如果点击某个元素，就设置这个被点击元素的style属性：
<a id="hey" 
  style='color:green;font-size: 2rem;'  
  href="#">
  一个链接
</a>

<script>
  $('a').click(function () {
    $(this).css('color', 'red');
  });
</script>
ps:为什么不能写成 $('a').css('color', 'red');

------- 因为它返回的是符合条件的所有类型的对象,而要的是一批里对应的一个；

$(this)代表当前正在点击事件的对象

生椰拿铁You

关注

8
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
jQuery库

为了方便style里面的设置，只想设置元素style里的某一个样式的属性，可以使用css()(jQuery对象的) attr() : 获取元素的属性；ps: script标签中的src属性：表示包含要执行的代码的外部文件位置。，这个对象类似js的数组，里面包含了所有参数css选择器选中的DOM对象。先选中，然后调用html方法，更新元素内部的html。attr() 的第二个参数就是用来设置元素的属性的。jQuery对象的on方法，用来定义事件的处理。removeAttr() :用于删除元素的属性。
复制链接

扫一扫