jQuery节点操作

news/2024/11/22 17:52:25/

jQuery常用技术

1.jQuery获取元素

2.jQuery与js对象转换

3.jQuery中的遍历方式

4.jQuery中的事件绑定

1. jQuery介绍

img

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提供的伪类选择器可以更快捷的选择元素

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"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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;
}//找对象  定事件  匿名函数$('form').submit(function(){//可以用来判断，当在这里写一堆代码，成功的时候，提交return true; 失败的时候false;let uname=$('#uname').val(); let pwd=$('#pwd').val();if(uname=='admin' && pwd=='admin')return true;elsereturn false;});

5.4 on事件绑定

在jQuery中提供了多种事件绑定的函数，根据版本的迭代更新，目前常用的主流的是on事件，其他的事件有：bind/unbind，live/die，delegate/undelegate。

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 事件冒泡

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

body> 包含 div，div又包含button

$('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的单事件绑定与直接对元素进行事件绑定是一样的，灵活选择

body> 包含 div，div又包含button

$('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');
})

http://www.ppmy.cn/news/773446.html

相关文章

Linux——常用命令

Linux——常用命令

常用命令 ①、系统信息 ②、操作系统 关机的命令也有好几个&#xff1a; ③、用户相关 在Linux中&#xff0c;who 命令会显示当前登录到系统的用户。输出中有三个用户的原因是第一个用户 root 是登录到本地的 GUI 环境&#xff0c;第二个用户 tom 是从远程主机通过 SSH 登录…
阅读更多...
小米手机微信怎样能显示定位服务器地址,小米手机丢了微信可以定位

小米手机微信怎样能显示定位服务器地址,小米手机丢了微信可以定位

这个效果并不难&#xff0c;要点是位置和比例设置&#xff0c; 捕获鼠标位置、判断鼠标位置区域、还有onmouseover事件、onmousemove事件、onmouseout事件 设置显示大图的比例&#xff0c;小图上显示的切图比例都要弄准确点&#xff0c;最好是2倍啦&#xff0c;4倍啦。 主要注意…
阅读更多...
小米之家真的是有效的渠道模式么？

小米之家真的是有效的渠道模式么？

小米在去年取得了复兴&#xff0c;重新跻身全球手机市场前五名&#xff0c;而在中国市场也取得了同比大幅增长的好成绩&#xff0c;小米将其中一部分原因归于在线下渠道的变革--大举建设小米之家&#xff0c;目前这一模式已开始向印度等海外市场推广&#xff0c;不过这一模式真…
阅读更多...
在小米之家收录的文章

在小米之家收录的文章

一条汇编指令是如何在计算机的硬件中进行执行的 - 墨清乌 - 博客园 (cnblogs.com)&#xff0c; 这个东西是连接软件硬件的桥梁。
阅读更多...
小米手机深陷“返修门” 售后成软肋

小米手机深陷“返修门” 售后成软肋

日前&#xff0c;小米公司正式发布了售价仅为1499元的小米手机青春版&#xff0c;选择在毕业季的前夕发售这款大打“青春牌”的手机&#xff0c;的确很受学生欢迎。但与此同时&#xff0c;有关小米手机的负面消息被频频曝出&#xff1a;发货慢、频死机、售后客服电话难以接通、…
阅读更多...
Linux 学习记录46(QT篇)

Linux 学习记录46(QT篇)

Linux 学习记录46(QT篇) 本文目录 Linux 学习记录46(QT篇)一、建立QT项目工程二、Assistant帮助文档的使用三、自动生成的文件介绍1. tempprj.pro2. mainwindow.h3. mainwindow.cpp4. main.cpp5. mainwindow.ui 四、常用类的介绍1. 信息调试类(1. qDebug(2. 输出当前界面尺寸(3…
阅读更多...
flutter ffmpeg_kit_flutter 踩坑

flutter ffmpeg_kit_flutter 踩坑

LTS区别 pubspec.yaml LTS可以兼容更低版本的安卓 ios版本, 详情:https://github.com/arthenica/ffmpeg-kit/wiki/LTS-Releases ffmpeg_kit_flutter: 5.1.0-LTS或者ffmpeg_kit_flutter: 5.1.0备注:安卓 SDK24 表示安卓7 使用非LTS版本可能提示需要修改sdk最低版本 android\app…
阅读更多...
idea 取消自动格式化代码

idea 取消自动格式化代码

阅读更多...
最新文章

Copyright @ 2022~2023