jQuery入门基础
- jQuery是什么
- jQuery的安装
- 语法
- jQuery 语法
- jQuery对象转换成原生的Dom对象
- 通过get方法
- 通过下标的形式
- 原生Dom对象转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/jquery-2.1.1.min.js"></script>
2.使用本地化的文档
把文档放入到本地文件夹中,然后导入。
<script src="js/jquery.min.js"> </script>
语法
通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions)。
jQuery 语法
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法: $(selector).action()
美元符号定义 jQuery
选择符(selector)“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
jQuery对象转换成原生的Dom对象
通过get方法
console.log($('#d1 span').get(0).innerText)
通过下标的形式
console.log($('#d1 span')[0].innerText)
原生Dom对象转jQuery对象
使用$()包裹,即可转换成jQuery对象
console.log($(d1).text())
样例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../../js/jquery.min.js"></script>
<!-- <script src="http://libs.baidu/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>
效果截图:
文档就绪事件
为了防止文档在完全加载(或就绪)之前运行 jQuery 代码(即在 DOM 加载完成后才可以对 DOM 进行操作)我们可以把所有 jQuery 函数位于一个 document ready 函数中。
因为如果在文档没有完全加载之前就运行函数,操作可能失败。
写法一:
$(document).ready(function(){ // 开始写 jQuery 代码... });
写法二(简洁写法):
$(function(){ // 开始写 jQuery 代码... });
样例代码:
<!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>
效果截图:
alert属于阻塞函数,所以会先弹出提示框,此时也证明文档已经准备就绪了,此时由于被阻塞所以修饰并没有生效。
当我们点击确认后,修饰生效。
看完如果对你有帮助,感谢点赞支持!
如果你是电脑端,看到右下角的 “一键三连” 了吗,没错点它[哈哈]
加油!
共同努力!
Keafmd
更多推荐
jQuery入门基础
发布评论