day01jQuery节点操作

最新推荐文章于 2024-05-15 20:43:52 发布
最新推荐文章于 2024-05-15 20:43:52 发布
阅读量142 收藏
点赞数
分类专栏： 前端技术 文章标签： javascript 前端 jquery
本文链接：https://blog.csdn.net/zhangchen124/article/details/129291941
版权

jQuery常用技术

1.jQuery获取元素

2.jQuery与js对象转换

3.jQuery中的遍历方式

4.jQuery中的事件绑定

1. jQuery介绍

在这里插入图片描述

1.1 jQuery概述

在JavaScript的使用过程中，存在很多问题，例如：兼容问题(咱不考虑)，元素获取方式单一(只能用基本的选择器)等等，因此就出现了很多第三方的封装库(将复杂的、麻烦的功能进行封装，提供给用户一种简单的、可直接调用的形式进行使用)，在众多的第三方库中脱颖而出的就是jQuery。

理念：写的少，做的多。（用更少的代码做更多的事情）

注意：jQuery中提供的函数或对象与js中的函数或对象是没有关系的。

2. jQuery基本使用

2.1 对象获取

2.1.1 基本选择器
//基本选择器
//使用js进行获取
var btns = document.getElementsByTagName("button");
var btns2 = document.getElementsByClassName("btn");
//使用jQuery的形式获取 jQuery的形式获取到的元素都是一组元素
//命名的时候为了和js的变量进行区分，通常jQuery的变量前面都会加上一个$
var $btns = $('button');
var $btns2 = $('.btn');
//典型错误：$ is not defined 该错误的出现意味着jQuery的文件未加载成功
console.log($btns);
console.log($btns2);
2.1.2 属性及伪类选择器

使用css2提供的属性选择器及css3提供的伪类选择器可以更快捷的选择元素

//css2/3中提供的选择器
//获取除了submit按钮之外的其他的input标签
var $inNodes = $('input:not([type="submit"])');
console.log($inNodes);
console.log("--------灵魂分割线----------");
var $btns3 = $('button:nth-of-type(2n+1)');
console.log($btns3);
//jQuery中提供的常用选择器
console.log($('button:eq(1)'));//=
console.log($('button:gt(1)'));//>
console.log($('button:lt(1)'));//<
2.1.3 获取对象-过滤选择器

jQuery中大多数的操作都是以函数的形式存在的，对于元素的获取同样提供了对应的函数

//jQuery中提供的常用过滤器
console.log($('button').eq(1));
console.log($('input[type="text"]').next());
console.log($('button').parent());
console.log($('button').parent().children('button:eq(0)'));

2.2 获取及修改元素的值

jQuery中获取到的元素都是以组的形式存在的，元素值的三种操作方式结合API详细了解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>
        div {
            height: 100px;width: 100px;
            background-color: chartreuse;
        }
    </style>
    <!-- 引入jquery -->
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="d1"></div>
    <input type="text" id="i1" value="默认值">
    <input type="text" id="i2">
</body>
<script>
    //通过jquery选择器选择对应的jquery对象
    //类似于java中的封装 Java中的类封装后不允许通过.属性进行操作 而是提供了对应属性操作的方法
    //jquery对dom封装后 不能直接使用dom对象的属性(因为获取的不是dom对象而是jquery对象)
    //jquery为常用属性额外定义的对应的方法 也定义的通用的属性操作方法
    //对innerHTML  与innerTEXT提供的方法
    var $d1 = $("#d1")
    //方法如果传入参数就是修改 没有传入参数就是获取
    $d1.html("修改内容")//等价于innerHTML属性的修改

    console.log($d1.html())//没有设置属性就是获取操作


    //对value属性的操作
    var $i1 = $("#i1");
    //jquery所有方法修改后返回的是当前jquery对象
    var $t = $i1.val("修改后的值")
    console.log($i1 == $t)


    //通用属性操作 attr方法
    //需要填入操作的属性名
    //如果只填入属性名 就是获取指定属性的值 如果将值也填入就是修改
    var $i2 = $("#i2");
    console.log($i2.attr("type", "text"))


    var $input = $("input");
    //jquery内置迭代 如果当前jquery对象代表多个dom标签 那么会将所有标签同时操作
    //  $input.val("aaaa")

    //由于返回值只能有一个 所以当前jquery对象代表对个标签获取值时 默认返回第一个dom对象的值
    console.log($input.val())
</script>

</html>

2.3 获取及修改样式

多样式的修改语法与json的使用相同，其复合属性可使用"-"链接也可以首字母大写链接

<!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>
        div {
            height: 100px;
            width: 100px;
            position: absolute;
            left: 50px;
            top: 20px;
            background-color: chartreuse;
        }
    </style>
    <!-- 引入jquery -->
    <script src="../js/jquery-3.6.0.min.js"></script>

</head>

<body>
    <div id="d1"></div>
    <input type="text" id="i1" value="默认值">
    <input type="text" id="i2">
</body>


<script>
    //通过jquery选择器选择对应的jquery对象
    //类似于java中的封装 Java中的类封装后不允许通过.属性进行操作 而是提供了对应属性操作的方法
    //jquery对dom封装后 不能直接使用dom对象的属性(因为获取的不是dom对象而是jquery对象)
    //虽然样式也是属性的异同也可以通过修改属性方法修改  但是很不方便
    //jquery同样对常用样式额外提供了方法  并且提供了通用样式操作方法
    var $d1=$("#d1");

    //获取对应宽高数值
    console.log($d1.width());
    console.log($d1.height());

    //样式通用方法
    $d1.css("left","100px");
    $d1.css("top",100);

    console.log($d1.css("top"));
    //但是在css样式设置时通常会设置多个样式

    //jquery提供的css方法可以解析json格式数据  可以使用json形式填入多个样式修改
    $d1.css({"width":"200px","height":"200px","background-color":"red"});

</script>

</html>

3. jQuery和js对象之间的转换

jQuery对象只能使用jQuery中提供的函数或属性，同样的jQuery中的属性或函数只能由jQuery对象调用.

JS对象只能使用JS中提供的函数或属性，同样的JS中的属性或函数只能由JS对象进行调用

3.1 jQuery对象转js对象

jQuery中提供了get(index)函数用于对象的转换，同时可以使用数组下标的形式进行转换

//获取元素使用jquery
var $btn = $('button');
//将jQuery对象转换为js对象
//var btn = $btn[0]; //利用数组本身的特性(下标)
var btn = $btn.get(0); //jQuery本身提供的一种转换函数
btn.onclick = function(){
    //将js对象转换为jQuery对象 this是js对象 $(js对象)
    //console.log(this.innerHTML);
    console.log($(this).html());
}

3.2 js对象转jQuery对象

js对象转jQuery对象只需要满足jQuery的格式要求即可，使用$()包裹js对象后就是jQuery对象

//js对象
var btn = document.getElementsByTagName("button")[0];
//$()包裹js对象即可转为jQuery对象
var $btn = $(btn);
$btn.css('background','red');

<!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>
        div {
            height: 100px;
            width: 100px;
            position: absolute;
            left: 50px;
            top: 20px;
            background-color: chartreuse;
        }
        img{
            position: absolute;
        }
        img:nth-of-type(1) {
            height: 500px;
            width: 500px;
            border-radius: 500px;
        }
        img:nth-of-type(2) {
            left: 530px;
            top: 150px;
            height: 200px;
            width:200px;
            border-radius: 500px;
        }
    </style>
    <!-- 引入jquery -->
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/jquery-rotate.js"></script>

</head>

<body>
    <div id="d1"></div>
    <input type="text" id="i1" value="默认值">
    <input type="text" id="i2">

    <img src="/img/cm1.jpg" alt="">
    <img src="/img/cm1.jpg" alt="">
</body>


<script>
    //通过jquery选择器选择对应的jquery对象
    //类似于java中的封装 Java中的类封装后不允许通过.属性进行操作 而是提供了对应属性操作的方法
    //jquery对dom封装后 不能直接使用dom对象的属性(因为获取的不是dom对象而是jquery对象)
    //虽然样式也是属性的异同也可以通过修改属性方法修改  但是很不方便
    //jquery同样对常用样式额外提供了方法  并且提供了通用样式操作方法
    var $d1 = $("#d1");

    //获取对应宽高数值
    console.log($d1.width());
    console.log($d1.height());

    //样式通用方法
    $d1.css("left", "100px");
    $d1.css("top", 100);

    console.log($d1.css("top"));
    //但是在css样式设置时通常会设置多个样式

    //jquery提供的css方法可以解析json格式数据  可以使用json形式填入多个样式修改
    $d1.css({ "width": "200px", "height": "200px", "background-color": "red" });
    $d1.css({ "left": 400, "top": 400 });
    var i = 1;
    setInterval(function () {
        $("img:nth-of-type(1)").rotate(i += 1)
    }, 1)

    var j = 1;
    setInterval(function () {
        $("img:nth-of-type(2)").rotate(j -= 1)
    }, 1)

</script>

</html>

4. jQuery中的遍历形式

数组、集合或json对象的遍历，jQuery中提供了新的更简洁的遍历形式

4.1 遍历节点

$(‘选择器’).each(function(index,element){})，该写法是用于遍历获取到的元素对象

//目的：输出元素的内容 函数中不带参数
/* $('button').each(function(){
		console.log(this.innerHTML);
	}) */
//函数中带有一个参数,该参数代表下标
/* $('button').each(function(index){
		console.log(index);
	}) */
//参数一：下标，参数二：对象
$('button').each(function(index,element){
    console.log(index,element.innerHTML);
});

4.2 遍历数组或集合

$.each(data,function(key,value){})，主要用于遍历数组或json对象等

//遍历指定的集合数据,参数一：代表要遍历的集合对象，参数二：函数
var arr = ["张飞","刘备","关羽"];
/* $.each(arr,function(){
		console.log(this);
	}) */

/* $.each(arr,function(index){
		console.log(index);
	}) */

$.each(arr,function(index,element){
    console.log(index,element);
})
var json = {"name":'张飞',"age":13};
$.each(json,function(key,val){
    console.log(key,val);
})

5. jQuery事件绑定

js中的所有事件都是以on开头的，在jQuery中是都不加on的

5.1 ready事件

ready事件是jQuery提供的当DOM元素加载完毕后执行的函数

ready和onload的区别：

1、onload事件是在页面的DOM结构及图片资源都加载完毕后执行的，而ready事件是在DOM结构加载完后执

2、onload事件只能使用一次，ready事件可使用多次

 //onload是在页面结构都加载完毕(DOM树结构及图片资源)后才开始执行其中的代码
window.onload = function(){
    var btn = document.getElementsByTagName("button")[0];
    btn.onclick = function(){
        alert(this.innerHTML);
    }
} 
window.onload = function(){  //2个onolad无法同时执行，后面会覆盖前面的；
    var btn = document.getElementsByTagName("button")[0];
    btn.onclick = function(){
        alert("hahaha");
    }
} 
 $(document).ready(function(){
     $('button').click(function(){
         alert($(this).html());
     })
 })

 $(function(){
     $('button').click(function(){
         alert($(this).html());
     })
 })

在js中是无法直接给一组元素绑定事件的，但是在jQuery中可以

$('button').click(function(){
    alert($(this).html())
})
$('button').click(show)
function show(){
    alert($(this).html())
}

5.2 焦点事件

当元素获取焦点及失去焦点时触发该事件，失去焦点blur，获取焦点focus

//焦点事件，当输入框获取到焦点时改变其背景颜色
$('input').focus(function(){
    $(this).css('background-color','pink')
})
//失去焦点事件，当输入框失去焦点时将背景变为白色
$('input').blur(function(){
    $(this).css('background-color','white')
})

5.3 表单提交事件

submit事件简化了js中的表单提交事件

//该函数的目的是为了验证表单中的数据，并给出验证的结果
function check(){
    return false;
}

 //jQuery中直接在函数返回结果即可
$('form').submit(function(){
    return true;
})

5.4 on事件绑定

在jQuery中提供了多种事件绑定的函数，根据版本的迭代更新，目前常用的主流的是on事件，其他的事件有：bind/unbind，live/die，delegate/undelegate。在jQuery的3.1.1的版本中，通过源码可以知道，新版本中的bind等事件的底层也是通过on来实现的。

5.4.1 on单事件绑定

通过on给元素绑定单个事件

var divNode = $('div')[0];
//需要指定要绑定的事件名，函数
$('button').on('click',function(){
    //创建元素
    var pNode = document.createElement('p');
    //赋值
    pNode.innerHTML = "show you";
    //添加到div中
    divNode.appendChild(pNode)
})

//需求：在点击P标签后显示p标签中的内容
var $pNodes = $('p');
$pNodes.on('click',function(){
    console.log($(this).html());
})

//语法:父元素对象.on(事件名,子元素,function(){})
$('div').on('click','p',function(){
    console.log($(this).html());
})
5.4.2 on绑定多个事件

通过on同时给元素绑定多个事件

$('input').blur(function(){
    var phone = $(this).val();
    var $span = $(this).next();
    if(phone.length!=11){

        $span.html('手机号错误')
        $span.css('color','red')
    }else{
        $span.html('')
    }
})
$('input').focus(function(){
    $(this).next().html('请输入11位手机号');
    $(this).next().css('color','black')
})

$('input').on({
    'blur':function(){
        var phone = $(this).val();
        var $span = $(this).next();
        if(phone.length!=11){

            $span.html('手机号错误')
            $span.css('color','red')
        }else{
            $span.html('')
        }
    },
    'focus':function(){
        $(this).next().html('请输入11位手机号');
        $(this).next().css('color','black')
    }
})
5.4.3 on后添加的元素绑定事件

针对通过动态添加到页面中的元素进行事件绑定（此处先做了解，动态增删时演示案例）

语法：$(已存在的父元素).on(事件名,子元素选择器,函数)

//给删除标签添加点击事件
$('table').on('click','.del',function(){
    $(this).parent().parent().remove()
})

5.5 事件冒泡

事件冒泡指事件向上传递-通常存在于具有包裹关系的元素中

$('button').click(function(){
    alert('btn up');
})

$('div').click(function(){
    alert('div up')
})

$('body').click(function(){
    alert('body up')
})

如何阻止事件冒泡？

只要有事件的存在就一定有事件源-event

阻止事件冒泡：event.stopPropagation();

$('button').click(function(event){
    event.stopPropagation();
    alert('btn up');
})

本章小结

1.jQuery获取到的元素都是以组的形式存在的

2.jQuery的对象不能使用js中的属性或函数

3.jQuery中的操作基本都是以函数的形式存在的，js中的操作多数以属性的形式存在

4.on的单事件绑定与直接对元素进行事件绑定是一样的，灵活选择

})


### 5.5 事件冒泡

事件冒泡指事件向上传递-通常存在于具有包裹关系的元素中

```js
$('button').click(function(){
    alert('btn up');
})

$('div').click(function(){
    alert('div up')
})

$('body').click(function(){
    alert('body up')
})

如何阻止事件冒泡？

只要有事件的存在就一定有事件源-event

阻止事件冒泡：event.stopPropagation();

$('button').click(function(event){
    event.stopPropagation();
    alert('btn up');
})

本章小结

1.jQuery获取到的元素都是以组的形式存在的

2.jQuery的对象不能使用js中的属性或函数

3.jQuery中的操作基本都是以函数的形式存在的，js中的操作多数以属性的形式存在

4.on的单事件绑定与直接对元素进行事件绑定是一样的，灵活选择
在这里插入图片描述

teayear
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
day20 jquery01.zip
11-18
关于jQuery的最初认识，以及一些循环的语句，jQuery是一个优秀的JavaScript库，封装JavaScript，直接调用。
day01-SpringCloud01
12-13
day01-SpringCloud01
jquery对节点的操作
梦蓝樱飞(一点一滴, 记录个人成长之路)
02-08 603
Jquery对事件的绑定 ().bind(“事件类型”,事件处理);给jquery绑定一个事件().bind(“事件类型”,事件处理);给jquery绑定一个事件().bind(“事件类型”, 事件处理); 给jquery绑定一个事件 ().bind(“事件类型1 事件类型2 事件类型3..”, 事件处理) 绑定多个事件类型并且使用同一个处理程序。 $().bind({ 事件类型1...
day01_jQuery
无
10-11 90
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基本使用 1.2.1 jQuery 的下载 1.2.2. 体验jQuery 1.2.3. jQuery的入口函数 1.2.4. jQuery中的顶级对象$ 1.2.5. jQuery 对象和 DOM 对象 1.2.6. jQuery 对象和 DOM 对象转换 1.3. jQuery 选择器 1.3.1. 基础选择
# day01 - jQuery
weixin_60651472的博客
05-08 176
> 学习目标： > 能够说出什么是 jQuery > 能够说出 jQuery 的优点 > 能够简单使用 jQuery > 能够说出 DOM 对象和 jQuery 对象的区别 > 能够写出常用的 jQuery 选择器 > 能够操作 jQuery 样式 > 能够写出常用的 jQuery 动画 ## 1.1. jQuery 介绍 ### 1.1.1 JavaScript 库 ​ JavaScript库：即 library，是一个封装好的特定的.
day01 - jQuery
guido
06-06 76
day01 - jQuery 学习目标： 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 jQuery 选择器 能够操作 jQuery 样式 能够写出常用的 jQuery 动画 1.1. jQuery 介绍 1.1.1 JavaScript 库 ​ JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义
39-day01_jQuery
weixin_42985170的博客
05-01 99
day01 - jQuery学习目标：1.1. jQuery 介绍1.1.1 JavaScript 库1.1.2 jQuery的概念1.1.3 jQuery的优点1.2. jQuery 的基本使用1.2.1 jQuery 的下载1.2.2. 体验jQuery1.2.3. jQuery的入口函数1.2.4. jQuery中的顶级对象$1.2.5. jQuery 对象和 DOM 对象1.2.6. ...
Day09【jQuery】操作函数
qq_43639081的博客
11-04 116
jQuery的dom-属性和文本 jQuery对象可以调用多种函数，操作选择器返回的jQuery对象 （1）text属性-text() （2）html属性-html() （3）value属性-val() <input id="myinput" type="text" name="username" value="张三" /><br /> <div id="mydiv"><p><a href="#">标题标签</a></p>&
jQuery元素的节点操作
巫山♔
09-12 117
jquery元素节点操作 创建节点 var Div = $('<div>'); var Div2 = $('<div>这是一个div元素</div>'); 插入节点 1、append()和appendTo()：在现存元素的内部，从后面插入元素 var Span = $('<span>这是一个span元素</span>'); $('#Di...
jQuery学习day01
qq_45924868的博客
04-19 68
JQuery库，里面存在大量的js函数 获取jquery 方式一：搜索jQuery.com,——>downloading jQuery,——>下载需要的版本 方式二：搜索cdn jquery，——>https://www.bootcdn.cn/jquery/，——>复制script标签 公式:$(selector).action() 查文档 搜索https://jquery.cuishifeng.cn/ 事件 鼠标，键盘，其他 <!DOCTYPE html> &l
四：Day07—jQuery01
qq_51318621的博客
09-26 44
一、jQuery入门 1. 定义和特点 目前最流行的JavaScript函数库之一，对JavaScript进行了封装。 并不是一门新语言，而是将常用的、复杂的JavaScript操作进行函数化封装，封装后可以直接调用，大大降低了使用JavaScript的难度，改变了使用JavaScript的习惯。 2. 第一个示例 实现隔行变色的效果，在使用jQuery实现效果之前，先使用在HTML中使用class属性直接标记、使用JavaScript来实现动态隔行变色，然后再采用jQuery来实现，可以明显体现到
Linux操作系统day01.pdf
03-28
Linux操作系统day01.pdf
day01课后总结.docx
11-23
day01课后总结.docx
day01-jquery基础.pdf
03-22
day01-jquery基础.pdf
TypeScript中的函数类型注解：精确定义行为与意图
逐星的博客
05-11 398
在TypeScript中，函数不仅是一段执行特定任务的代码块，它们还可以拥有自己的类型。函数类型注解允许开发者定义函数的参数类型和返回值类型，从而提高代码的可读性和可维护性。函数类型注解是TypeScript中定义函数时的重要特性，它有助于确保函数参数和返回值符合预期，从而提高代码的准确性和安全性。
React中JSX语法入门
woliuhuaqiangla的博客
05-12 764
通过使用大括号{}，可以在JSX中使用任何有效的JavaScript表达式，包括变量、函数调用、算术运算和条件语句等。JSX将HTML标签和JavaScript代码结合在一起，可以在其中使用JavaScript表达式，并且可以通过使用大括号{}来嵌入JavaScript代码。通过使用JSX，我们可以在JavaScript代码中嵌入HTML标记，从而更容易地构建可复用的UI组件。在React中的JSX中，也可以使用任何有效的JavaScript表达式，包括变量、函数调用、算术运算、条件语句等。
前端Vue架构
weixin_45678402的博客
05-12 274
defineProperty：监听范围比较窄，只能通过属性描述符去监听已有属性的读取和赋值；兼容性较差，只能兼容支持ES6 的浏览器（要求监听数据是对象）这样写的话，依赖收集只能收集到属性c；如果访问的属性值还是一个对象，对属性值再次进行代理；创建视图的函数（render）和数据之间的关联；当数据发生变化的时候，希望render重新执行；下面的用法，只能收集到c，收集不到c1。依赖收集：a color: #f00。依赖收集：a color: #f00。如何知晓数据对应的函数；监听数据的读取和修改；
Vue.js的发展史（一）
最新发布
2301_79683791的博客
05-15 434
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
note_spark_day01：spark 基础环境
09-26
然后，编辑Spark的配置文件，设置集群的主节点和从节点。 5. 验证安装：通过在终端运行spark-shell命令，验证Spark是否正确安装。spark-shell命令会启动一个Scala解释器，并连接到Spark集群。 6. 运行第一个Spark...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

teayear

读后有收获可以获取更多资源

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值