收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1，JQUERY的工作原理</title>
<style type="text/css">
ul{margin:30px;
padding:10px;
overflow:hidden;
background: none;
}
li{
list-style-type:none;
width:40px;
height:40px;
margin-left:10px;
background: #ffc002;
text-align:center;
line-height:40px;
font-size:1.5em;
font-weight:border;
float:left;
border-radius:50%;
box-shadow:2px 2px 2px #00b3ff;
color:#000000;
}
li:first-child{
/* background: #999999;*/
}
li:nth-child(4){
/*background: darkblue;*/
/*color:white*/
}
li:nth-child(4)~*{
/* background: #000000;
color:white;*/
}
</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">
//var li=document.getElementsByTagName('li')[0]
//li.style.backgroundColor='pink'
// var li=document.querySelector('li:nth-child(4)')
//li.style.backgroundColor='pink'
//li.style.color='white'
//queryselector只会返回符合条件的一个
//queryselectorAll 会返回全部
//var li=document.querySelector('li:nth-child(4)~*')
//li.style.backgroundColor='pink'
//li.style.color='white'
var li=document.querySelectorAll('li:nth-child(4)~*')
//alert(li.length)
for(var i=0;i<li.length;i++){
//li[i].style.backgroundColor='pink'
//li[i].style.color='white'}
</script>
<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','white')
$('li:nth-child(4)~*').addClass('red')
</script>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.JQUERY的下载与引用</title>
</head>
<body>
</body>
</html>
<h2>PHP中文网</h2>
JQUERY就是一普通JS的外部文件
JS进官网下载(UNCOMPREEED DEVELOPED 3.3.1)
1,本地引入
2.CDN在线引入 CDN.CODE.BAIDU.COM
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
$('h2').click(function(){
alert('WWW.PHP.CN')
})
</script>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.JUERY的工厂函数$()</title>
</head>
<body>
<ul>
<li>我是列表项1</li>
<li>我是列表项2</li>
<li>我是列表项3</li>
<li>我是列表项4</li>
<li>我是列表项5</li>
</ul>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
//我们的任务将第一个列表项换颜色
//document.getElementsByTagName('li')[0].style.backgroundColor='blue'
//document.getElementsByTagName('li')[0]====$('li:first-child')
// .style.backgroundColor='blue'===css('background-color','blue')
// $('li:first-child').css('background-color','red')
//思考:在JQUERY对象上调用原生的DOM方法
//$('li:first-child'): 将页面中的一个或多个DOM元素打包到一个JQ对象中
//返回的是一个JQERY对象
//$('li:first-child').style.backgroundColor='blue'
//无操作
//在JUERY对象上不能直接调用DOM方法,JQUERRY是一个DOM对象的数组.
//$('li')[0].style.backgroundColor='blue'
//这样可以将JQUERY对象转成DOM对象
//$('li').get(0).style.backgroundColor='red'
//$('li')[0].style.backgroundColor='blue'
//原生对象转JQUERY对象 用$()工厂函数
$('li:eq(4)').css('background-color','red')
</script>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.JQUERY的基本语法</title>
</head>
<body>
<h2>基本语法:<span >$(选择器).方法()</span></h2>
<p>基本流程:使用选择器找到DOM元素并找包成JQUERY对象</p>
<p>调用JQUERY方法找到元素进行操作</p>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
// $('h2 span').css('color','red')
//<h2>基本语法:<span style="color:blue">$(选择器).方法()</span></h2>-->
$('p+p').html( '终于找到你了,开工吧')
// $(selector):用来选择DOM元素并转化成JQUERY对象
//$():它可以创建一个HTML元素
//以下未演示 出不来 待查
//var img=document.createElement('img')
// var img = document.createElement('img')
//img.src='<img src="../image/001.jpg" width="150">'
//img.src = '<img src="../image/001.jpg" width="150">'
//document.getElementsByTagName('h2')[0].appendChild(img)
//var img=$('<img src="../image/001.jpg" width="150">')
//img.insertAfter('h2')
$('<img src="../image/001.jpg" width="150">').insertAfter('h2').css('border-radius','50%')
</script>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.Jquery的执行方式</title>
<style type="text/css">
.horiz{
float:left;
list-style-type:none;
margin:10px;
}
</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(){
// $('#list>li').addClass('horiz')
//alert($(document).length)
// }
//$(document).ready(function(){
// $('#list>li').addClass('horiz')
//}) //window.onload:在页面全部加载完成后会自动调用的事件
//$(function(){$('#list>li').addClass('horiz')})
$(document).ready()==windon.onload
页面渲染顺序
window.onload()全加载完成才能执行
$(document).ready()正常执行 不延迟
</script>
</head>
<body>
<h2>购物清单</h2>
<ul id="list">
<li>生活用品
<ul>
<li><a href="">淘宝</a></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>
<li>玩具</li>
</ul>
</li>
</ul>
</body>
</html>
<!--<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
//</script>
//<script type="text/javascript">
// $('#list>li').addClass('horiz')
//</script>点击 "运行实例" 按钮查看在线实例
本课学习要点
1,如何使用CSS语言来选择元素
2,JQUERY是什么?它是一个JAVA SCRIPT的一个类库,函数库
3,我们为用什么要学习JQUERY
3-1 各个浏览器的兼容
3-2 JQUERY可以写的更少,用最少的内容表达
3-3 可以看懂其它程序员写的代码
4,JQUERY的编程思想
查询+操作,内置循环,迭代
$(选择器)+操作(参数)
$( selector).option(args)
$('li:nth-child(4)~*).css('background-color','red')
$('li:nth-child(r)~*).addclass('red')
5,$()工厂函数的作用
5-1 查询元素
5-2 创建元素(必须输入到页面中才有效
6,JQUERY代码的执行方式
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
