jQuery核心函数详解(JavaScript基础)
【辰兮要努力】:hello你好我是辰兮,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行!
博客来源于项目以及编程中遇到的问题总结,偶尔会有读书分享,我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结,感谢你的阅读和关注,希望我的博客能帮助到更多的人,分享获取新知,大家一起进步!
吾等采石之人,应怀大教堂之心,愿你们奔赴在各自的热爱中…
一、文章序言
最近一段时间会陆续整理前端相关的基础知识,分享给初学者,愿共同进步,感兴趣的可以参考:JavaScript前端专栏
本篇主要介绍一下JQuery核心函数,并附上案例。
JQuery核心函数:接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素(主要用于获取HTML DOM元素并将其封装为jQuery对象)
jQuery 的核心功能都是通过这个函数实现的
jQuery()函数的返回值是jQuery类型,返回一个jQuery对象。
// 选择当前文档中所有的p标签DOM元素
$("p");
// 选择id属性为username的DOM元素
$("#username");
// 选择所有包含test样式的DOM元素,(例如:class="test")
$(".test");
// 选择所有p标签中带test样式的DOM元素
$("p .test");
二、实践案例
jQuery核心函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery核心函数</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
// $();/jQuery原理();就代表调用jQuery的核心函数
// 1.接收一个函数
$(function () {
// 2.接收一个字符串
// 2.1接收一个字符串选择器
// 返回一个jQuery对象, 对象中保存了找到的DOM元素
var $box1 = $(".box1");
var $box2 = $("#box2");
console.log($box1);
console.log($box2);
// 2.2接收一个字符串代码片段
// 返回一个jQuery对象, 对象中保存了创建的DOM元素
var $p = $("<p>段落:辰兮要努力</p>");
console.log($p);
//添加一个p标签
$box1.append($p);
// 3.接收一个DOM元素
// 会被包装成一个jQuery对象返回给我们
var span = document.getElementsByTagName("span")[0];
//js原生获取的dom是一个对象
console.log(span,1);
var $span = $(span);
//jQuery对象就是一个数组对象,其实就是选择出来的元素的数组集合
console.log($span,2);
});
</script>
</head>
<body>
<div class="box1"></div>
<div id="box2"></div>
<span>我是span标签</span>
</body>
</html>
控制台打印效果:能明显看到js和jQuery获取打印出来的效果是不一样的,jQuery对象就是一个数组对象
jQuery获取的dom对象和原生的dom对象有何区别?
js原生获取的dom是一个对象,jQuery对象就是一个数组对象,其实就是选择出来的元素的数组集合
拓展:两者之间的相互转换
原生DOM对象转jQuery对象
var box = document.getElementById('box')
var $box = $(box)
jQuery对象转原生DOM对象
var $box = $('#box')
var box = $box[0]
我们下期文章再见!
非常感谢你阅读到这里,如果这篇文章对你有帮助,希望能留下你的点赞👍 关注❤️ 分享👥 留言💬thanks!!!
2021年3月9日21:30:34 愿你们奔赴在自己的热爱里!
文章来源: blessing.blog.csdn.net,作者:辰兮要努力,版权归原作者所有,如需转载,请联系作者。
原文链接:blessing.blog.csdn.net/article/details/114602417
- 点赞
- 收藏
- 关注作者
评论(0)