'''

2019.4.1

（1）jquery容错机制

（2）jq中的$('#id')和js中document.getElementById()的区别

（3）jquery事件（键盘事件）

（4）隐藏和显示

（5）滑动效果

（6）jquery动画animate（）方法

2019.4.2

（1）动画停止

（2）jquery链式调用

（3）获取内容和属性（text，val，html，attr）

'''

正文：

（1）jquery即使没有找到元素也不会报错，可以用length属性来判断是否找到了元素，length等于0就是没有找到

（2）$('id')和getElementby 的区别：

$(“#it1”)是jquary等框架的对象，他实际是一个数组对象
document.getElementById( “it1” ) ，它是一个DOM对象，可进行DOM操作。

var id = $('#it')[0];

（3）事件

基本语法$('#id').action(function(){})

1.键盘事件：事件顺序

keydown --键按下的过程

keypress --键被按下

keyup ---键被松开

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
i=0;
$(document).ready(function(){
  $("input").keypress(function(){
    $("span").text(i+=1);
  });
});
</script>
</head>
<body>

输入你的名字: <input type="text">
<p>按键的次数: <span>0</span></p>

</body>
</html>

2，鼠标事件

hover（）方法用于模拟光标悬停事件，当光标移动到元素上时，会触发指定的第一个函数，当鼠标移除这个元素，会触发第二个函数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").hover(function(){
    $("p").css("background-color","yellow");
    },function(){
    $("p").css("background-color","pink");
  });
});
</script>
</head>
<body>

<p>鼠标移动到该段落。</p>

</body>
</html>

3，表单事件

focus()获取焦点事件，blur（）失去焦点事件

change（）当元素值发生改变时，发生change事件

（4）隐藏和显示可以添加参数

语法：

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

都是可选的speed参数规定速度，可以取：slow，fast，或毫秒。callback参数是完成后所执行的函数名称

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>

<script>
$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});
</script>
</head>
<body>
	
<div>隐藏及设置回调函数</div>
<button class="hidebtn">隐藏</button>
	
</body>
</html>

其中第二个参数是一个字符串，表示过度使用哪种缓动函数（自身提供linear和swing）

（5）滑动效果

语法

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback) #该方法可以在slideDown和slideUp之间切换

（6）animate动画

语法

$(selector).animate({params},speed,callback)

必须params参数定义形成动画的css属性。

可选speed规定效果时长，可以取slow，fast，毫秒

可选callback是动画完成后执行的函数

<!DOCTYPE html>
<html>
<head>
	<title>jquery</title>
	<script src='js/jquery.1.12.4.min.js'></script>
	<script >
		$(function(){
		//animate动画
		$('#btn1').click(function(){
			$('#div3').animate({left:"100px"});
		});


		});
		

	</script>
</head>
<body>

<h1>animate</h1>
<button id="btn1">动画按钮</button>
<div id="div3" style="background: #98bf21;height: 100px;width: 100px;position:fixed;" ></div>
<p>这是最后一行</p>
</body>
</html>

注：关于position中fixed，absolute和relative不同值得区别（见图）

注解：几乎所有的css属性，animate都能操作，但是必须使用camel标记法书写（例如padding-left应写成paddingLeft）。同时色彩动画不包含在核心jquery库中，需要从http://plugins.jquery.com/color/下载

2，使用相对值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

注：每点击一次按钮，长和宽都增加150px

3，使用队列功能，会根据顺序逐一运行这些animate

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

2019/4/2

(1)动画停止：语法 $(selector).stop(stopAll,goToEnd)

参数都是可选，stopAll参数规定应该清除的动画队列，默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行（也就是仅停止当前动画，之后的动画还会继续）。goToEnd参数规定是否立即完成当前动画，默认是false

（2）链式调用，允许我们在相同的元素上运行多条jquery命令，一条接一条

$('#div3').slideDown(1000).animate({height:"200px"})

注：会先调用slidedown然后调用animate

（3）获取内容和属性,设置内容和属性

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

html（）设置或返回所选元素的内容（包括HTML标记）

val（）设置或返回表单字段的值

attr（）方法用于获取属性值

$('#a1').attr('href');

设置内容和属性，使用同样的方法。

设置内容：text（），html（），val（），他们拥有回调函数。回调函数有两个参数：

被选元素列表中当前元素的下标，以及原始值，然后以函数新值返回希望使用的字符串

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text(function(i,origText){
      return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
  });

  $("#btn2").click(function(){
    $("#test2").html(function(i,origText){
      return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
  });

});
</script>
</head>

<body>
<p id="test1">这是一个有 <b>粗体</b> 字的段落。</p>
<p id="test2">这是另外一个有 <b>粗体</b> 字的段落。</p>
<button id="btn1">显示 新/旧 文本</button>
<button id="btn2">显示 新/旧 HTML</button>
</body>
</html>

设置属性

设置多个属性

$('#a').attr({
    'href':'http://',
    'height':'100px'
});

设置带返回函数

$('#a').attr('href',function(i,origText){
    return origText+'/jquery'                 //返回的链接是原始链接加上jquery
})

jquery知识点（一）

正文：

2019/4/2

猜你喜欢