收藏
批改状态：合格
老师批语：
jQuery的引入方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.jquery的工作原理</title>
</head>
<body>
<h2>基本语法：<span>$(选择器).方法()</span></h2>
<h2>基本流程：使用选择器找到DOM元素并进行打包成jquery对象</h2>
<h2>调用jquery中的方法找到元素进行操作</h2>
<button>总结：找到元素，然后操作</button>
</body>
</html>
<script type="text/javascript">
// document.querySelector('button').style.backgroundColor='red'
// var button = document.querySelector('button')
// button.style.color = 'white'
// 1.querySeletor只获取一个元素
// 2.querySelectorAll返回的是一个数组，需要用循环遍历
// var h2 = document.querySelectorAll('h2')
// for(var i=0; i<h2.length;i++){
// h2[i].style.color='red'
// }
</script>
<!-- 本地引入js外部文件：离线操作 -->
<!-- <script type="text/javascript" src="../jquery-3.3.1.js"></script> -->
<!-- cnd在线引入：在线操作 （百度静态资源公共库）-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('h2').css('color','#ccc')
$('button').click(function(){
$('h2').hide()
$('button').hide()
})
$('h2+h2+h2').html('变了吗')
// $(selector)用来选择DOM元素并转为jquery对象
// $():还可以创建一个html元素.addClass()
var img = $('<img src="images/k.jpg" alt="图片" width="100">')
img.insertBefore('button')
// 将jQuery对象转为DOM对象
$('h2')[0].style.color='red'
$('h2').get(1).style.color='lightgreen'
// 将原生转jquery? $():工厂函数
$('h2:eq(2)').css('color','skyblue')
</script>点击 "运行实例" 按钮查看在线实例
运行效果图：
![6F0%O{]_7`0DP93IGL@[C(X.png](https://img.php.cn//upload/image/459/258/188/1522734575324547.png "1522734575324547.png")
jQuery的执行方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery执行方式</title>
<style type="text/css">
.horiz{
float: left;
list-style-type: none;
margin: 20px;
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
// window.onload = function(){
// $('.table > li').addClass('horiz')
// }
//window.onload：在页面元素全部加载完成后会自动调用的事件
// $(document).ready(function(){
// $('.table > li').addClass('horiz')
// })
$(function(){
$('.table > li').addClass('horiz')
})
// $(document).ready() ========== window.onload()
// //页面的渲染顺序
// 1.第一步生成DOM结构
// 2.加载资源：图片，文件
// window.onload():必须要等到加载资源全部完成才会触发
// $(document).ready():只要生成DOM结构就会触发
</script>
</head>
<body>
<h2>一季度成绩表</h2>
<ul class="table">
<li>语文
<ul>
<li>96</li>
<li>97</li>
<li>98</li>
</ul>
</li>
<li>数学
<ul>
<li>99</li>
<li>98</li>
<li>100</li>
</ul>
</li>
<li>英语
<ul>
<li>96</li>
<li>97</li>
<li>98</li>
</ul>
</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
