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入门基础