相关知识点:
- jquery的介绍
- jquery控制css
- jquery控制html
- jquery控制标签属性
- jquery动画
- jquery选择器
1.JQuery简介
JQuery是由美国人John Resig创建的一个js库,普通Dom能做的JQuery也能做。JQuery具有轻量,简单易学易用,兼容性好的特点
2.jquery的书写流程
步骤
1.引入jquery文件;
2.新建一对script标签书写代码分离;
3.按照jquery用谁就选谁的原则绑定事件书写所有代码;
其他
- 过滤指定的元素;
:eq() 表示过滤选中元素当中的第几个,按索引值过滤; - hide() 表示隐藏选中元素;
- show() 表示显示选中元素;
- toggle() 表示切换选中元素;
注意:他们都有一个共同的参数 可以传递一个毫秒值来控制动画的时间。
案例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<!--引入jquery-->
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<!--用什么选什么-->
<script type="text/javascript">
$(function () {
$('button:eq(0)').click(function () {
$('img').hide(1000);
})
$('button:eq(1)').click(function () {
$('img').show(1000);
})
$('button:eq(2)').click(function () {
$('img').toggle(1000);
})
})
</script>
</head>
<body>
<button>隐藏</button>
<button>显示</button>
<button>切换</button>
<div>
<img src="img/20140314114448155.jpg" width="155" height="189">
</div>
</body>
</html>
image.png
3.JQuery控制CSS
核心函数
css(参数1,参数2) 表示修改选中元素的css;
参数1:表示要修改的属性名;
参数2:要修改的值;
单属性修改
一次修改一个属性,当css函数传递两个参数的时候表示单属性修改。
多属性修改
指的就是一次修改多个属性的办法;
基本结构是
.css({k:’v’,k:’v’}) 注释:值是数字的时候可以不加引号。
带有代码提示的书写方式;
.css({‘k’:’v’,’k’:’v’})
4.JQuery控制html
核心函数
.html(参数1) 表示修改选中元素的内部的文本
参数1:表示要修改的值;
单属性修改
如果html()这个函数传递参数表示修改。
即:html(‘aaaaaaaa’)
多属性修改
如果html()函数不填写参数就表示访问。
案例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
div{ width:800px; height:auto; background:#ccc; border:1px solid #000;}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('button:eq(0)').click(function(e) {
$('div').html('<h1>老贺他是一个优秀的设计狮:</h1><p>它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个</p>')
});
$('button:eq(1)').click(function(e) {
alert($('div').html())
});
})
</script>
</head>
<body>
<button>修改</button>
<button>访问</button>
<div>
老贺他是一个优秀的设计狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个狮:它做过很多事例如这个例如那个
</div>
</body>
</html>
4.JQuery动画
- slideUp() 向上滑动隐藏;
- slideDown() 向下滑动显示;
- slideToggle() 滑动切换;
- hide() 隐藏;
- show() 显示;
- toggle() 切换;
案例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<meta content="text/html" charset = "utf-8">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
$('button:eq(0)').click(function () {
$('img').slideDown(1000);
});
$('button:eq(1)').click(function () {
$('img').slideUp(1000);
});
$('button:eq(2)').click(function () {
$('img').slideToggle(1000);
});
})
</script>
</head>
<body>
<button>滑动显示</button>
<button>滑动隐藏</button>
<button>滑动切换</button>
<br>
<img src="img/20140314114448155.jpg" width="155" height="189"/>
</body>
</html>
image.png
5.控制标签属性
核心函数
attr(参数1,参数2) 函数的作用可以修改任何标签的任何属性;
参数1:表示属性名称;
参数2:表示属性值;
如果说只填写一个参数表示单属性访问。
6.选择器
定义:选择器就是用来选择文档当中的标签的。它很好的解决了程序中的访问这个问题。
Jquery当中的选择器一共分为了3种类型;
1.基础选择器;
2.过滤选择器;
3.筛选选择器;
选择函数--$(); 选择函数中只写基础选择器和过滤选择器,筛选选择器是永远写在外面的以函数的形式。
基础选择器
第一原则:原来css怎么选jquery就怎么选。
- '>': 表示选中其后的第一级子代; 注释:他和空格不同,空格是选择所有后代。
- '+': 表示选中当前元素同级其后紧挨着的唯一一个元素;
- '~':表示选中其后所有。 也是同级。
案例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<meta content="text/html" charset="UTF-8">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
$('button:eq(0)').click(function(){
$('p').css('background','red');
});
$('button:eq(1)').click(function () {
$('.left').css('background','red')
});
$('button:eq(2)').click(function () {
$('#box').css('background','red')
});
$('button:eq(3)').click(function () {
$('*').css('background','red')
});
$('button:eq(4)').click(function(){
$('h1,h2,h3').css('background','red')
});
$('button:eq(5)').click(function () {
$('ul li').css('background','red')
});
$('button:eq(6)').click(function () {
$('body>*').css('border','1px solid #000')
});
$('button:eq(7)').click(function(){
$('p+div').css('border','1px solid #000')
});
$('button:eq(8)').click(function(){
$('p~div').css('border','1px solid #000')
});
})
</script>
</head>
<body>
<button>选择所有段落标签</button>
<button>选择class为left的标签</button>
<button>选择id为box的标签</button>
<button>选择所有不分类型标签</button>
<button>选择所有标题标签</button>
<button>选择ul里面的li标签</button>
<button>选择body下的第一级所有标签并添加边框</button>
<button>选择p后的一个div</button>
<button>选择p后的所有div</button>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<div class="left">类选择器</div>
<div class="left">类选择器</div>
<div id="box">id选择器</div>
<h1>标题1标签</h1>
<h2>标题2标签</h2>
<h3>标题3标签</h3>
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
</body>
</html>
过滤选择器
- 我们可以认为所有的过滤器都是以:开头(除个别外)
- 所有的过滤器都是必须要写在选择函数里面的
下面是常用的过滤器的API - :first 过滤第一个;
- :last 过滤最后一个;
- :not() ***在指定的元素内排除某些元素;
- :even 过滤索引值为偶数个;
- :odd 过滤索引值奇数个;
- :gt() 过滤索引值大于某个值的;
- :lt() 过滤索引值小于某个值的;
- :eq() 过滤索引值等于某个值的;
案例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<meta charset = "UTF-8">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
$('button:eq(0)').click(function () {
$('li:first').css('background','red')
});
$('button:eq(1)').click(function() {
$('li:last').css('background','red')
});
$('button:eq(2)').click(function() {
$('li:not(:last)').css('background','red')
});
$('button:eq(3)').click(function() {
$('li:not(:eq(1))').css('background','red')
});
$('button:eq(4)').click(function() {
$('li:even').css('background','red')
});
$('button:eq(5)').click(function() {
$('li:odd').css('background','red')
});
$('button:eq(6)').click(function() {
$('li:gt(4)').css('background','red')
});
$('button:eq(7)').click(function() {
$('li:lt(4)').css('background','red')
});
$('button:eq(8)').click(function() {
$('li:eq(4)').css('background','red')
});
$('button:eq(9)').click(function () {
$('li').css('background','#fff');
});
});
</script>
</head>
<body>
<button>选择第一个li</button>
<button>选择最后一个li</button>
<button>选择所有li排除最后一个</button>
<button>选择所有li排除第二个</button>
<button>选择所有索引值为偶数个li</button>
<button>选择所有索引值为奇数个li</button>
<button>选择大于第5个的li</button>
<button>选择小于第5个的li</button>
<button>选择等于第5个的li</button>
<button>恢复</button>
<ul>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
</ul>
</body>
</html>
筛选选择器
实际上筛选选择器当中主要学的是一种关系。
筛选选择器中的三巨头
- 父-parent()
- 子-children()
- 兄-siblings()
语法:这种选择器不能写在选择函数内部,它的用法遵循函数的用法。他的很大一个价值是经常和$(this)配合使用
案例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<meta content="text/html" charset = "UTF-8">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" >
$(function () {
$('button').click(function () {
$(this).siblings().css('background','#ccc');
$(this).css('background','red');
});
})
</script>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
</html>
案例:下拉框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<meta content="text/html" charset = "UTF-8">
<style type="text/css">
*{ padding:0; margin:0; list-style:none;}
.all{ width:330px; height:30px; margin:100px auto; background:url(img/bg.jpg); padding-left:10px;}
.all li{ width:100px; height:30px; background:url(img/libg.jpg); line-height:30px; text-align:center; float:left; margin-right:10px; _display:inline; position:relative; cursor:pointer;}
.all ul{ position:absolute; left:0; top:30px; display:none;}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
$('.all > li').hover(function () {
<!--绑定事件-->
<!--jquery 中 动画排队机制,触发了多少次就会一直在队列中-->
$(this).children().stop().slideToggle();
})
})
</script>
</head>
<body>
<ul class="all">
<li>一级菜单
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>
</html>
补充知识点:
动画排队机制
Jquery里面所有的动画遵循一个叫做排队机制的原理,也就是说没有执行完的动画会一直等待执行。
如何清空排队,在执行的动画之前添加一个命令 .stop()即可清空所有排队。
hover事件
它表示鼠标移上和鼠标离开的综合体。
基本结构:hover(指令1,指令2)
注意:如果只填写一个指令表示鼠标移上和鼠标离开执行相同的指令。
链式编程
这是jquery里面独有的编程方式,
定义:针对同一个目标的所有修改可以在后面连续书写。
网友评论