实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.min{
width: 400px;
height: 400px;
margin: 100px auto;
text-align: center;
}
li{
list-style: none;
display:inline-block;
width: 96px;
background: #ccc;
}
.box{
width: 400px;
height:300px;
}
span{
width: 400px;
height:300px;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="">红色</a></li>
<li><a href="">绿色</a></li>
<li><a href="">黄色</a></li>
<li><a href="">蓝色</a></li>
</ul>
<div>
<span style="background: red;">1</span>
<span style="background: green;">2</span>
<span style="background: yellow;">3</span>
<span style="background: blue;">4</span>
</div>
</div>
<script type="text/javascript">
var span_a = document.getElementsByTagName('span');
var li_a = document.getElementsByTagName('li');
function cl(num){
for (var i = 0; i< span_a.length; i++) {
span_a[i].style.display="none"
li_a[i].style.background="#ccc"
}
span_a[num].style.display="block"
li_a[num].style.background="#ff9d00"
}
for (var c = 0; c<li_a.length; c++) { //遍历出所有li_a
li_a[c].index=c; //获取当前li_a下标 这里用到了一个index（）方法
li_a[c].onclick=function(){
cl(this.index) //对当前下标出发点击cl()函数
}
}
</script>
</body>
</html>
//感谢同学Paul_广州_133114和GT_云南_376980的指导运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{
width: 200px;
height: 200px;
}
.box1{
width: 200px;
height: 200px;
}
ul li{
height: 40px;
margin-top: 20px;
list-style: none;
border: 1px solid #ccc;
text-align: center;
line-height: 40px;
}
.kk{
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- 引入方法:
1.本地:将下载的文件放在网页的同一目录下，就可以使用jQuery (外部引入js);
-->
</head>
<body>
<div id="box">1</div>
<div class="box1">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><br>
<span><a href="">html</a></span>
</p>
<button class="bg1">点击粉色</button>
<button class="bg2">点击红色</button>
<button class="bg3">点击蓝色</button>
<button class="bg4">400*400颜色黑色</button>
<p class="kk"></p>
<script>
//测试jq有没有引入成功
// if (typeof $=='undefined') {
// alert('未加载')
// }else{
// alert('已加载')
// }
//
// 基本语法：（jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作）
// $(选择器).action()
//文档就绪函数 ready() (也称为jQuery入口函数) 作用: 为了防止文档在完全加载（就绪）之前运行 jQuery 代码
// $(document).ready(function(){
// //执行的代码块
// })
// //简写:
// $(function(){
// //执行的代码块
// })
//jQuery 中所有选择器都以美元符号开头：$(),它基于已经存在的 CSS 选择器;
// //元素选择器
// $('body').css('background','pink');
//id选择器
// $('#box').css('border','1px solid red');
// //class选择器
// $('.box').css('background','#ff6500');
// //匹配到页面中多个选择器
// $('.box,#box').css('color','#fff')
// //类型
// // $('li.list').css('background','green')
// //属性
// $('[href]').css('color','red')
// //属性值
// $("a[target='_blank']").css('fontSize','30px')
// //层级选择器（相当于父类和子类的元素关系）:
// // $('父级元素 > 子级元素')给定的父级元素下匹配所有的子元素
// //$('p>a').css('fontSize','30px')
// // $('祖先元素 后代元素')给定的祖先元素下匹配所有的后代元素
// $('p a').css('fontSize','30px')
// //比较(x的顺序是从0开始)
// // $(':gt(x)')表示大于值x的元素
// $('li:gt(2)').css('background','#f00')
// //$(':lt(x)')表示小于值x的元素
// //$(':eq(x)')表示等于值x的元素
// $('li:eq(2)').css('background','green')
// jQuery事件:
// JS JQ 描述
// onfocus focus 元素获得焦点。
// onblur blur 元素失去焦点。
// onclick click 当用户点击某个对象时调用的事件句柄。
// onkeydown keydown 某个键盘按键被按下。
// onkeyup keyup 某个键盘按键被松开。
// onmouseover mouseover 鼠标移到某元素之上。
// jQuery事件的使用:
// $(document).ready()当文档完成加载时;
// $(selector).click()被选元素的点击事件;
//jQuery事件原理：当事件被触发时会调用一个函数我们称之为事件方法;（及事件处理函数);
$(function() {
$('button.bg1').click(function(){
$('.kk').css('background','pink')
})
$('button.bg2').click(function(){
$('.kk').css('background','green')
})
$('button.bg3').click(function(){
$('.kk').css('background','blue')
$('.kk').css('width','300px')
$('.kk').css('height','300px')
})
$('button.bg4').click(function(){
$('.kk').css({'background':'black','width':'400px','height':'400px'})//谢谢同学哥特_山东_170760解决方案
})
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例