实例
<!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代码的执行方式
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
