收藏
批改状态：未批改
老师批语：
jQuery引用方式：
1：jQuery官网下载jquery-3.3.1.min.js，通过<script src="插入jQuery目录"></script>
2：通过cdn连接引入 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
引入后进行测试引入是否正确
通过tepyof检测$符号是否有效，$定义jQuery
<!DOCTYPE html>
<html>
<head>
<title>JQ1</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
// 测试JQ是否引入成功
typeof 运算符用于判断对象的类型
if (typeof $=='undefined') {
alert('jq未加载');
美元符号定于jQuery
}else{
alert('jq已加载')
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
jQuery基本语法：
1.基本语法：（jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作）
$(选择器).action()
文档就绪函数 ready() 也称为jQuery入口函数
作用：为了防止文档在完成加载（就绪）之前运行jQuery代码 -- JS为window
<!DOCTYPE html>
<html>
<head>
<title>JQ1</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function){
//执行代码块
}
//简写
$(function(){
//执行代码块
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
jQuery之css选择器：
jQuery中所有选择器都以美元符号开头:$(),他基于已经存在的Css选择器
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
*{
margin:0;
padding: 0;
}
#box{
width:200px;
height: 200px;
}
.box{
width:200px;
height: 200px;
}
ul li{
height: 40px;
margin-top: 20px;
list-style: none;
border:1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<div id="box">1</div>
<div class="box">2</div>
<ul>
<li>1</li>
<li class="list">2</li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#" target="_blank">5</a></li>
<li>6</li>
</ul>
<p><a href="#">php</a><span><a href="">html</a></span></p>
<script>
jQuery中所有选择器都以美元符号开头:$(),他基于已经存在的Css选择器
$(function(){
//元素选择器
$('body').css('background',"skyblue");
$('#box').css('border','1px solid red');
// class选择
$('.box').css('background','green');
// 匹配页面多个选择器
$('.box,#box').css('color','#fff');
//类型
//$('li.list').css('background','green');
//属性
$('[href]').css('text-decoration','none');
});
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
jQuery操作属性值：
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
*{
margin:0;
padding: 0;
}
#box{
width:200px;
height: 200px;
}
.box{
width:200px;
height: 200px;
}
ul li{
height: 40px;
margin-top: 20px;
list-style: none;
border:1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<div id="box">1</div>
<div class="box">2</div>
<ul>
<li>1</li>
<li class="list">2</li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#" target="_blank">5</a></li>
<li>6</li>
</ul>
<p><a href="#">php</a><span><a href="">html</a></span></p>
<button>点击</button>
<script>
// //属性值
$(function(){
$("a[target='_blank']").css('font-size','30px');
//层级选择器(相当于父类和字类元素关系)
$('p>a').css('font-size','35px');
// $('祖先元素 后代元素')给定的祖先元素下匹配所有的后代元素
$('p a').css('fontSize','30px');
// 比较（x的顺序从0开始）
// $(':gt(x)')表示大于值x的元素
$('li:gt(2)').css('background','green');
// lt表示小于
$('li:lt(2)').css('background','red');
// eq(x)表示等于值x的元素
$('li:eq(2)').css('background','blue');
});
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
jQuery事件：
JS JQ 描述
onfocus focus 元素获得焦点。
onblur blur 元素失去焦点。
onclick click 当用户点击某个对象时调用的事件句柄。
onkeydown keydown 某个键盘按键被按下。
onkeyup keyup 某个键盘按键被松开。
onmouseover mouseover 鼠标移到某元素之上。
jquery事件使用
$(document).ready()当文档加载时
$(selector).click()被选元素的点击事件
jQuery事件原理：当事件被触发时会调用一个函数，我们称为事件方法（及事件处理函数）
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
*{
margin:0;
padding: 0;
}
#box{
width:200px;
height: 200px;
}
.box{
width:200px;
height: 200px;
}
ul li{
height: 40px;
margin-top: 20px;
list-style: none;
border:1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<div id="box">1</div>
<div class="box">2</div>
<ul>
<li>1</li>
<li class="list">2</li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#" target="_blank">5</a></li>
<li>6</li>
</ul>
<p><a href="#">php</a><span><a href="">html</a></span></p>
<button>点击</button>
<script>
jQuery中所有选择器都以美元符号开头:$(),他基于已经存在的Css选择器
$(function(){
$('selector').click(function(){
// 当事件触发时，被执行的代码块
});
$('button').click(function(){
$('body').css('background','pink')
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
