Java全栈大数据学习笔记NO.12（jQuery-1）

一、jQuery

• jQuery简介
  jQuery是由美国人John创建于2006年，它是目前最流行的js程序库，它对js的对象和函数进行封装，设计思想是write less,do more。

• jq能干什么

  • 访问和操作DOM对象
  • 控制页面样式
  • 对页面事件进行处理
  • 扩展新的jq插件
  • 与Ajax技术完美结合

• jq的优势

  1. 体积小，压缩后只有100kb大小
  2. 强大的选择器
  3. 出色的DOM封装
  4. 可靠的事件处理机制
  5. 较好的浏览器兼容性
  6. 使用隐式迭代简化编程
  7. 丰富的插件支持

• jq的库文件
  jq的库文件分为两种：

  1. 开发板
     名称一般为：jquery-版本号.js，大小约为270kb左右，完整的无压缩的，主要用于测试，学习和开发(jq本身的插件开发)，可读性高。
  2. 发布版
     名称一般为：jquery-版本号.min.js，大小约为100kb左右，经过工具压缩或者经过服务器开启Gzip压缩，主要用于发布的产品和项目(可读性低)。

  本次学习使用的是发布版
  

二、jq的使用

• 引入方法
  由于jq本身也是js文件，所以与其他js文件引入方式相同，新建js目录，将下面语句放入head中。
  

<script src="js/jquery.min.js">script>

• 使用方法
  jq程序的编写与js相同，都是放入script标签中，并用如下格式

  $(document).ready(function(){
  	// 开始写jq语句
  	alert("hello world!")
  })
  

  下面说一下 $(document).ready() 和 window.onload 的区别

  • $(document).ready()
    1.只需等待网页中的DOM结果加载完毕就可以执行jq语句
    2.可以多次执行，第N次也不会被上一次覆盖
  • window.onload
    1.必须等待网页全部加载完毕(包括图片，视频等)，才执行js语句
    2.只能执行一次，如果再次执行，会把第一次覆盖

  也可以使用简写方法

  $(function(){
  	// 开始写jq语句
  	alert("hello world!")
  })
  

三、jq的基本语法

基础语法：$(选择器).方法()，选择器用来查找和查询html元素，方法是对元素进行的操作。如：

$(this).hide(); //隐藏当前对象
$("p").hide(); //隐藏所有p元素
$("p.test").hide(); //隐藏所有class="test"的p元素
$("#test").hide(); //隐藏id="test"的元素

四、jq的选择器

jq的选择器很多都与CSS相像。

• 基本选择器

  1. 标签选择器

     $("h3").css("background","#000000"); //获取并设置所有的 h3元素的背景颜色
     

  2. class选择器

     $(".title").css("background","#000000");
     

  3. id选择器

     $("#box").css("background","#000000");
     

  4. 枚举选择器

     $("h2,dt,.title").css("background","#000000");
     

• 层次选择器

  1. 并集选择器

     $("h2.title").css("background","#000000");
     //获取并设置所有class为title的h2元素的背景颜色
     

  2. 全局选择器

     $("*").css("background","#000000"); //改变所有元素
     

• 过滤选择器

  1. 基本过滤选择器可以选取第一个元素，最后一个元素，索引是奇偶的元素
     li:first 第一个
     li:last 最后一个
     li:odd 奇数项(index从0开始)
     li:even 偶数项(index从0开始)
  2. 可以根据索引的值选取元素
     :eq(index) 选取索引等于index的元素(index从0开始)
     :gt(index) 选取索引大于index的元素(大于index，不包括index)
     :lt(index) 选取索引小于index的元素(小于index，不包括index)
  3. 支持一些特殊的选择方式
     :not(选择器) 选取去除所有给定选择器匹配的元素
     :header 选取所有标题标签
     :focus 选取当前获得焦点的元素
  4. 可见性过滤选择器
     :visible 选取所有的可见的元素
     :hidden 选取所有不可见的元素
  5. 后代选择器、子选择器、相邻选择器、同辈选择器
     $("#menu span") 选取id为menu下的所有span元素
     $("#menu>span") 选取直接子元素
     $(“h2+p”) 选取身后相邻元素
     $(“h2~p”) 所有身后同辈元素
  6. 属性选择器
     $("[href^=‘en’]") 选取给定属性值开头的元素
     $("[href$=‘en’]") 选取给定属性值结尾的元素
     $("[href=‘en’]") 选取包含给定属性值的元素
     $(" li[id][title=新闻要点]") 选取含有id属性和title属性为新闻要点的元素

五、jq的事件

jq的事件又与js有很多相似，只不过把on都去掉了

• 鼠标事件

  click 单击
  dblclick 双击
  mouseenter 鼠标移入
  mouseleave 鼠标移出
  hover 鼠标悬停

• 键盘事件

  keypress 记录键盘按键的次数
  keydown 当键盘按下某个键时
  keyup 当键盘某个键松开时

• 表单事件

  submit 提交事件
  change 内容改变事件
  focus 获取焦点
  blur 失去焦点

六、jq的效果

• hide()隐藏，hide(时间) 以毫秒为单位
  show()显示，show(时间) 完成效果的时长
  toggle() 会在显示和隐藏中来回切换

  <p>点击隐藏按钮消失，点击显示按钮出现p>
  <button id="hide">隐藏button>
  <button id="show">显示button>
  <button id="toggle">显示/隐藏button>
  		
  <script type="text/javascript">
  	$(function(){
  		$("#hide").click(function(){
  			$("p").hide(1000);
  		})
  		$("#show").click(function(){
  			$("p").show(2000);
  		})
  		$("#toggle").click(function(){
  			$("p").toggle();
  		})
  	})
  script>
  

• 淡入淡出
  fadeIn()：用于淡入已隐藏的元素
  fadeOut()：用于淡出可见的元素
  fadeToggle()：可以在淡入淡出中切换
  fadeTo()：允许渐变为给定的不透明度(值介于0-1之间)，必须加上slow/fast/time，没有默认参数

  <button id="button1">点击渐入div元素button>
  <button id="button2">点击渐入div元素button>
  <button id="button3">点击切换淡入淡出button>
  <button id="button4">点击使颜色变淡button>
  <div id="div1" style="display: none; width: 80px; height: 80px; background-color: red;">div>
  <div id="div2" style="display: none; width: 80px; height: 80px; background-color: green;">div>
  <div id="div3" style="display: none; width: 80px; height: 80px; background-color: blue;">div>
  <script type="text/javascript">
  	$(function(){
  		$("#button1").click(function(){
  			$("#div1").fadeIn();
  			$("#div2").fadeIn("slow");
  			$("#div3").fadeIn(3000);
  		})
  		$("#button2").click(function(){
  			$("#div1").fadeOut();
  			$("#div2").fadeOut("slow");
  			$("#div3").fadeOut(3000);
  		})
  		$("#button3").click(function(){
  			$("#div1").fadeToggle();
  			$("#div2").fadeToggle("slow");
  			$("#div3").fadeToggle(3000);
  		})
  		$("#button4").click(function(){
  			$("#div1").fadeTo("slow",0.15);
  			$("#div2").fadeTo("fast",0.4);
  			$("#div3").fadeTo(3000);
  		})
  	})
  script>
  

七、jq的动画

animate() 用于创建自定义动画
用法：$(选择器).animate({css属性},时长,callback)

callback(可有可无是动画完成后所执行的函数)

该函数有几种用法，下面举例说明：

<input type="button" id="btn1" value="点击开始动画1" />
<input type="button" id="btn2" value="点击开始动画2" />


<div id="div1" style="background-color: green; width: 100px; height: 100px; position: absolute;">div>
<div id="div2" style="background-color: red; width: 200px; height: 100px; position: absolute;">HELLOdiv>
<script type="text/javascript">
	$(function(){
		$("#btn1").click(function(){
			// 单个css样式改变
			$("#div1").animate({left:'250px'},2000);
			
			// 多重css样式改变
			$("#div1").animate({left:'250px',opacity:'0.5',height:'150px',width:'150px'},3000);
			
			// 相对值样式改变
			$("#div1").animate({height:'+=150px',width:'+=150px'});
			
			// 预定值样式改变
			$("#div1").animate({height:'toggle'});
			
			// 使用队列功能 可以编写多个animate函数
			// jq就会创建包含这些方法的队列，逐一调用
			$("#div1").animate({height:'300px'});
			$("#div1").animate({width:'300px'});
			$("#div1").animate({height:'100px'});
			$("#div1").animate({width:'100px'});
		})
		$("#btn2").click(function(){
			$("#div2").animate({left:'100px'});
			$("#div2").animate({fontSize:'3em'});
		})
	})
script>

stop() 用于停止动画
用法：$(选择器).stop(stopAll,goToEnd)

stopAll：可选，参数规定是否清除动画队列，默认值false，即停止当前正在活动的动画，允许之后的动画队列继续执行
goToEnd：可选，参数规定是否立即完成当前的动画，默认值false，即停止在半道

可用下面例子进行展示：

<button id="btn1">停止动画button>
<div id="div1" style="background-color: red; width: 200px; height: 20px;">点击向下滑动面板div>
<div id="div2" style="display: none; background-color: green; width: 200px; height: 200px;">HELLOWORLDdiv>
		 
<script type="text/javascript">
	$(function(){
		$("#btn1").click(function(){
			$("#div2").stop();
		})
		
		$("#div1").click(function(){
			$("#div2").slideDown(5000);
		})
	})
script>

八、jq的回调

Callback函数是在当前动画100%完成后执行的，在应用中如果想要两种效果有先后关系，则常用这种方法

<button id="btn1">隐藏按钮有回调button>
<button id="btn2">隐藏按钮没有回调button>
<p>点击隐藏按钮，段落会消失p>
<script type="text/javascript">
	$(function(){
		$("#btn1").click(function(){
			$("p").hide("slow",function(){
				alert("段落现在被隐藏了");
			});
		})
		$("#btn2").click(function(){
			$("p").hide(2000);
			alert("段落现在被隐藏了");
		})
	})
script>

九、jq方法的链接

jq提供了可以将多个方法链接在一起的功能，即在后面连接多个.方法

1. 方便编写
2. 浏览器不用多次查找相同的元素

<p id="p1">HELLOWORLDp>
<button id="btn1">点我button>
<script type="text/javascript">
	$(function(){
		$("#btn1").click(function(){
			$("#p1").css("color","red")
			.slideUp(2000)
			.slideDown(2000);
			// jq会自动将多余的空格回车换行规避掉
		})
	})
script>

十、jq操作内容和属性

与js中的innerHTML和innerText类似

• text()-设置或返回所选元素的文本内容

• html()-设置或返回所选元素的文档内容

• val()-设置或返回表单字段的值

• attr() 获取标签中某个属性的值

  <p id="p1">这是段落中的<b>粗体b>文本。p>
  <input type="text" value="HELLOWORLD" />
  <a href="http://www.qq.com">腾讯a>
  		 
  <button id="btn1">显示文本button>
  <button id="btn2">显示文档button>
  <button id="btn3">显示文本框中的值button>
  <button id="btn4">显示a标签href的值button>
  		 
  <script type="text/javascript">
  	$(function(){
  		$("#btn1").click(function(){
  			alert($("#p1").text());
  		})
  		$("#btn2").click(function(){
  			alert($("#p1").html());
  		})
  		$("#btn3").click(function(){
  			alert($("input").val());
  		})
  		$("#btn4").click(function(){
  			alert($("a").attr("href"));
  		})
  	})
  script>
  

• 同样也可以用此方法设置属性

  <p id="p1">段落1p>
  <p id="p2">段落2p>
  <p>输入框:<input type="text" id="text1"/>p>
  <button id="btn1">设置文本button>
  <button id="btn2">设置文档button>
  <button id="btn3">设置文本框的值button>
  		
  <script type="text/javascript">
  	$(function(){
  		$("#btn1").click(function(){
  			$("#p1").text("HELLOWORLD");
  		})
  		$("#btn2").click(function(){
  			$("#p2").html("HELLOWORLD");
  		})
  		$("#btn3").click(function(){
  			$("#text1").val("HELLOWORLD");
  		})
  	})
  script>
  

• 添加新的HTML内容
  append 在被选元素的结尾添加，在元素内添加
  prepend 在元素的开头添加，在元素内添加
  after 在被选元素之后插入，在元素外添加
  before 在被选元素之前插入，在元素外添加

   <p>这是一个段落p>
   <p>这是另一个段落p>
   <ol>
   	<li>List 1li>
   	<li>List 2li>
   	<li>List 3li>
   ol>
   <br>
  <button id="btn1">添加文本button>
  <button id="btn2">添加列表项button>
  <button id="btn3">beforebutton>
  <button id="btn4">afterbutton>
  <script type="text/javascript">
   	$(function(){
   		$("#btn1").click(function(){
   			$("p").append("追加文本");
   		})
   		$("#btn2").click(function(){
   			$("ol").append("
  追加列表项
  ");
   		})
   		$("#btn3").click(function(){
   			$("ol").before("之前插入");
   		})
   		$("#btn4").click(function(){
   			$("ol").after("之后插入");
   		})
   	})
  script>
  

• 删除元素
  remove() 删除被选元素(及其子元素)，可以传一个参数，可以对被删除的元素进行过滤，使用时不能设置成父子元素，必须从同级元素中删除

  empty() 从被选元素中删除子元素

  <div id="div1" style="background-color: yellow; width: 200px; 
  height: 150px; border: 1px solid black;">
  	这是div中的文本
  	<p>这是在div中的段落p>
  	<p>这是在div中的另一个段落p>
  	<p class="p1">这是在div中的另一个段落p>
  div><br>
  <button id="btn1">移出div元素button>
  <button id="btn2">清空div元素button>
  		 
  <script type="text/javascript">
  	$(function(){
  		$("#btn1").click(function(){
  			// $("#div1").remove();
  			$("p").remove(".p1");
  		})
  		$("#btn2").click(function(){
  			// 使div1的内部清空，相当于把该元素的html变为空
  			$("#div1").empty();
  		})
  	})
  script>