Collection
Collection
基本语法:
$(元素).操作（参数）
$(selector).option()
jquery代码的执行方式
$(document).ready(function () {}
插入元素
$('<img src="../images/zly.jpg" width="150">').insertAfter('h2').css('border-radius','50%')
一、如何用css语法来获取元素? querySelector(),querySelectorAll()
二、jQuery是什么? 一个JavaScirpt类库
三、为什么要用jQuery?
1.各个浏览器之间存在兼容性
2.原生js语法复杂,代码过多
3.jQuery可做到:写得更少,而做得更多
4.我要看懂其它程序员写的jquery代码
四、jQuery的基本编程思想是什么?
1.查询 + 操作
2.基本语法: $(selector).option()
五、工厂函数$()的作用?
创建jQuery对象
六、jQuery的获取方式? 静态资源
1.官网:jquery.com
2.cdn: 官网,谷歌,百度...
$('li')[0].style.backgroundColor = 'coral'
$('li').get(2).style.backgroundColor = 'cyan'
<script type="text/javascript">
$('h2').click(function(){
alert('www.php.cn')
})
</script>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.jquery的基本语法</title>
</head>
<body>
<h2>基本语法: <span>$(选择器).方法()</span></h2>
<p>基本流程:1-使用选择器找到DOM元素并打包生成jQuery对象<br>调用jQuery方法对找到的元素进行操作</p>
<p>总结: 找到元素,然后操作</p>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// 选择到<span>标签中的文本,将它的前景色设置为红色
$('h2 span').css('color','red')
//我们还可以修改一个元素的内容
$('p+p').html('终于找到你了,开工吧')
//补充知识: $()还可以创建一个新元素
$('<img src="../images/zly.jpg" width="150">')
//为什么看不到呢?因为你还没有把这个元素添加到当前页面中
//insertAfter(元素):插入到指定元素的后面
// $('<img src="../images/zly.jpg" width="150">').insertAfter('h2')
//我们还可以对新插入的元素进一步的处理:例如修剪成圆形
$('<img src="../images/zly.jpg" width="150">').insertAfter('h2').css('border-radius','50%')
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.jquery代码的执行方式</title>
<style type="text/css">
.horiz {
float:left;
list-style: none;
margin: 10px;
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// $('#list > li').addClass('horiz')
//放在这里,这样写就会无效,为什么呢?
//因为此时代码执行到js脚本的时候,body中的页面还没有渲染,$('#list>li')根本无法获取到元素
//所以要放在页面渲染结束,DOM树生成再执行才会有效
//那么如何才能做到在head中也可以执行呢?有二种方法:
//1. 使用window对象的onload事件:在页面元素加载完成,再调用这个js脚本(延迟调用)
// window.onload = function () {
// $('#list > li').addClass('horiz')
// }
// 那么在jquery中有没有同样功能的方法呢?当然有,不仅有,而且效率更高:ready()
// $(document).ready(function () {
// $('#list > li').addClass('horiz')
// })
// 简写:
$(function(){
//jq代码
$('#list > li').addClass('horiz')
})
// 当然,如果将jquery代码写在html文档的底部,就不这样麻烦了,但还是推荐将代码用$(function(){})封装
/*
为什么说:$(document).ready()方法比window.onload事件更高效呢?
html页面生成分为二步:
1. 生成DOM树: 告诉浏览器html文件中有多少元素以及他们之间的关系
2. 加载外部资源: 例如图像,外部文件等
window.onload事件必须要在dom树生成,外部资源全部加载完毕才可以触发
$().ready()事件:只要DOM创建完成就可以触发,不必等到元素全部加载完成,特别是有较大图片或文件时,效果非常明显
*/
</script>
</head>
<body>
<h2>购物清单</h2>
<ul id="list">
<li>生活用品
<ul>
<li><a href="">淘宝</a></li>
<li>箱包</li>
<li>衣服</li>
<li>鞋子</li>
</ul>
</li>
<li>数码产品
<ul>
<li><a href="">京东</a></li>
<li>笔记本电脑</li>
<li>显示器</li>
</ul>
</li>
<li>食品保健
<ul>
<li><a href="">拼多多</a></li>
<li>奶粉</li>
<a href="">玩具</a>
</ul>
</li>
</ul>
<!-- <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> -->
<script type="text/javascript">
// $('#list > li').addClass('horiz')
// $(document).ready(function(){
// //这里放jQuery代码:将列表水平摆放
// $('#list > li').addClass('horiz')
// })
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
