收藏
批改状态：合格
老师批语：
jQuery的基本语法：
$(selector).action()
美元符$定义jQuery
选择符（selector）“查询”和“查找” HTML 元素
action()执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
$('h2 >span').css('color','#fff') 选择页面中h2标签下面的span子元素，将字体颜色变成白色
jQuery的引入方式
本地引用
<script type="text/javascript" src="js文件"></script>
cdn引用
<script type="text/javascript" src="http://jQuery库在线地址"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的基本语法和引入</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// alert($(document).length)
// window.onload=function(){
// $('h2 > span').css('color','red')
// }
// $(document).ready(function(){
// $('h2 > span').css('color','red')
// })
// 简写方式
$(function(){
$('h2 > span').css('color','red')
})
</script>
</head>
<body>
<h2>你好：<span>你在哪里？</span></h2>
</body>
</html>
<!-- 本地引用 -->
<!-- <script type="text/javascript" src="jquery-3.3.1.js">
</script>
<script type="text/javascript">
// alert($(document).length)
$('h2 > span').css('color','red')
</script> -->
<!-- cdn引用
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
<!--
页面的渲染顺序：1生成dom结构 2.加载资源（图片，文件，音频等等）
$(document).ready(function(){
})
——————————————————————————————————————————————————————————————————————
上面的简写是$(function(){
})
上面和下面二个的区别：前者只要生产dom结构就会触发，或者必须等到资源全部加载完后才触发
window.onload=function(){}
-->点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style type="text/css">
ul {
margin: 10px;
padding: 10px;
}
li {
width: 100px;
height: 100px;
text-align: center;
float: left;
list-style-type: none;
border: 1px solid pink;
margin-right: 20px;
background-color: red;
line-height: 100px;
font-size: 25px;
border-radius: 50%;
box-shadow: 5px 5px 12px 8px pink;
}
/* li:first-child{
background-color: #fff;
}*/
/* li:nth-child(5) {
background-color: #888;
color:#fff;
}*/
li:nth-child(4) ~ *{
/*background-color: #888;
color:#fff;*/
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
<script type="text/javascript">
// document.getElementsByTagName('li')[0].style.backgroundColor ='pink'
// 原生的js选择元素的方式不能使用css选择器,下面是错误的实例
// document.getElementsByTagName('li:first-child').style.backgroundColor ='pink'
// querySelector() 这个方法可以用css选择器来选择元素,哪怕是有多个元素符合条件，只会返回满足条件的第一个！！！
// document.querySelector('li:first-child').style.backgroundColor ='pink'
// var li = document.querySelector('li:nth-child(4)')
// li.style.backgroundColor ='#888'
// li.style.color = '#fff'
// querySelectorAll()
// querySelector()只会返回满足条件的一个元素，尽管有多个，但只返回一个！！！
// var li = document.querySelector('li:nth-child(4) ~ *')
// li.style.backgroundColor ='#888'
// li.style.color = '#fff'
// querySelectorAll()
// var li = document.querySelectorAll('li:nth-child(4) ~ *')
// // 获取当前li的长度 alert(li.length)
// for (var i=0; i<li.length; i++) {
// li[i].style.backgroundColor ='#888'
// }
// 小结：querySelectorAll()与querySelector()的区别：：：：
// querySelector()获取到一个元素，哪怕是有多个元素符合条件，只会返回满足条件的第一个
// 当我们要获取一个结果集的时候（对象），使用 querySelectorAll()一次性获取所有满足条件的对象或元素，然后对元素循环也叫迭代，
</script>
<!-- cdn在线引入jquery -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('li:nth-child(4) ~ *').css('background-color','#999')
</script>
<!-- 在jq对象上不能直接调用DOM方法
jQuery 语法 ：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作 -->点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
