jQuery入门基础
jQuery是什么
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
除此之外，Jquery还提供了大量的插件。
jQuery的安装
所谓安装就是使用script标记引入jquery类库。
1 使用CDN
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
- 1
2.使用本地化的文档
把文档放入到本地文件夹中，然后导入。
<script src="js/jquery.min.js"> </script>
- 1
语法
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。
jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
jQuery对象转换成原生的Dom对象
通过get方法
console.log($('#d1 span').get(0).innerText)
- 1
通过下标的形式
console.log($('#d1 span')[0].innerText)
- 1
原生Dom对象转jQuery对象
使用$()包裹，即可转换成jQuery对象
console.log($(d1).text())
- 1
样例代码：
<!DOCTYPE html>
<html> <head> <meta charset="utf-8" /> <title></title> <script src="../../js/jquery.min.js"></script> <!-- <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> --> <style> #d1 span{ color: red; } </style> </head> <body> <div id="d1">div1 <span>这是一句话</span> </div> <script> function getEl(){ console.log($('#d1 span').get(0).innerText) console.log($('#d1 span')[0].innerText) console.log($(d1).text()) console.log($('#d1 span').text()) } </script> <button onclick="getEl()">根据id获取元素的文本</button> </body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
效果截图：
文档就绪事件
为了防止文档在完全加载（或就绪）之前运行 jQuery 代码（即在 DOM 加载完成后才可以对 DOM 进行操作）我们可以把所有 jQuery 函数位于一个 document ready 函数中。
因为如果在文档没有完全加载之前就运行函数，操作可能失败。
写法一：
$(document).ready(function(){ // 开始写 jQuery 代码... });
- 1
写法二（简洁写法）:
$(function(){ // 开始写 jQuery 代码... });
- 1
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../js/jquery.min.js" ></script>
<script > $(function(){ alert('文档加载成功了。') $('h1').css({ 'color':'red' }) })
</script> <title></title>
</head>
<body>
<div> <h1>Keafmd</h1> <p>牛哄哄的柯南</p>
</div> </body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
效果截图：
alert属于阻塞函数，所以会先弹出提示框，此时也证明文档已经准备就绪了，此时由于被阻塞所以修饰并没有生效。
当我们点击确认后，修饰生效。
看完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看到右下角的 “一键三连” 了吗，没错点它[哈哈]
加油！
共同努力！
Keafmd
文章来源: keafmd.blog.csdn.net，作者：牛哄哄的柯南，版权归原作者所有，如需转载，请联系作者。
原文链接：keafmd.blog.csdn.net/article/details/109842992
- 点赞
- 收藏
- 关注作者
评论（0）