jquery——API

wondow.onload=function(){} 等待页面加载完执行的方法，js入口函数在jquery 入口函数后面。
document.getElementById("div1"); 根据元素id获取当前元素。
document.getElementsByTagName("div"); 根据标签类型获取所有元素。
nextElementSibling(); 获取当前元素的下一个兄弟。
a1.onclick=function(){} 给a1元素添加点击事件。
a1.style.display="block"/"none"；让当前a1元素显示/隐藏。
a1.style.backgroundColor="pink" ；给当前元素添加背景颜色。
a1.setAttribute("name","sex"); 给当前元素设置name属性，值为sex。
a1.innerText="hello"; 给div元素添加内容，底版火狐不支持，支持textContent。
btn.addEventListener 给btn注册事件，不会被覆盖，但存在兼容性。
console.log("haha"); 在页面控制台输出haha。

备注：

jq对象是js对象（Dom对象）的伪数组；

jquery对象可以和dom对象互转。
var $a1=$(a1); Dom对象转Jquery对象。
$a1[0];/$a1.get(0); Jquery对象转Dom对象。

Jquery初体验

<script src="/jquery.js"> </script> 引入Jquery文件。
$(document).ready( function() { } ); 入口函数（写法一）。
$( function() { } ); 入口函数（写法二）。
$("#id") /$("div")/$(".class") 获取当前元素。
$("#id").click( function(){ } ); Jquery注册点击事件。
$("div").show(); Jquery让所有div显示。
$("div").hide(); Jquery让所有div隐藏。
$("div").text("hello");Jquery给所有div添加内容hello,如果括号为空，获取div内容。
$("div").show(3000); 让所有div在3秒内显示，实现横向动画展现效果。
$("div").slideDown(1000);让所有div在1秒内显示，实现纵向向下动画展现效果。
$("div").slideUp(1000);让所有div在1秒内显示，实现纵向向上动画展现效果。
$("div").fadeIn(1000);让所有div在1秒内显示，实现淡入动画展现效果。
$("div").css(name，value); 给div设置样式，name：样式名，value：样式值。
$("div").mouseover(function(event) {}); 鼠标经过事件。
$("div").mouseout(function(event) {}); 鼠标离开事件。
$("div").mouseleave(function(event) {}); 鼠标指针离开事件。
$("div").mouseenter(function(event) {}); 鼠标经过事件。
children(selector)；获取当前元素的所有子元素，selector可以为元素。
find(selector)；相等于后代选择器。
siblings(selector)；查找所有的兄弟节点，不包括自己本身。
parent(); 查找父亲。
eq(index); 查找索引为index的兄弟。索引从0开始。
next(); 找下一个兄弟。
prev()；找上一个兄弟。
index(); 获取jq对象兄弟元素的索引。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>改变图片的亮度</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>

         <br>
         <br>
         <br>
         <div class="container">
         <ul  class="row ">
         	<li  class="col-md-3 col-sm-4 col-xs-6"><a   class="thumbnail" href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529493002977&di=ae892bd76a8e11736515f2c608b32ff4&imgtype=0&src=http%3A%2F%2Fimg5.zdface.com%2F006yCHQygy1fixj8ol7c9j30jg0t6dia.jpg" alt=""></a></li>
         	<li  class="col-md-3 col-sm-4 col-xs-6"><a   class="thumbnail" href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529493002977&di=ae892bd76a8e11736515f2c608b32ff4&imgtype=0&src=http%3A%2F%2Fimg5.zdface.com%2F006yCHQygy1fixj8ol7c9j30jg0t6dia.jpg" alt=""></a></li>
         	<li  class="col-md-3 col-sm-4 col-xs-6"><a   class="thumbnail"href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529493002977&di=ae892bd76a8e11736515f2c608b32ff4&imgtype=0&src=http%3A%2F%2Fimg5.zdface.com%2F006yCHQygy1fixj8ol7c9j30jg0t6dia.jpg" alt=""></a></li>
         	<li  class="col-md-3 col-sm-4 col-xs-6"><a   class="thumbnail" href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529493002977&di=ae892bd76a8e11736515f2c608b32ff4&imgtype=0&src=http%3A%2F%2Fimg5.zdface.com%2F006yCHQygy1fixj8ol7c9j30jg0t6dia.jpg" alt=""></a></li>
         </ul>
         </div>
             <script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.js"></script>
	
	<script>
		$(function(){
                                        $("li").css('list-style'   , 'none ');
			$(".container>ul>li").mouseenter(function() {
				$(this).css("opacity","1").siblings("li").css("opacity","0.2"); 
			});
		        $(".container").mouseleave(function(){  
                        $("li").css("opacity","1");
                   });
		});
	</script>
</body>
</html>

jq对象是js对象（Dom对象）的伪数组 ；

jquery对象可以和dom对象互转。 var $a1=$(a1); Dom对象转Jquery对象。 $a1[0];/$a1.get(0); Jquery对象转Dom对象。

Jquery初体验

猜你喜欢

jq对象是js对象（Dom对象）的伪数组；

jquery对象可以和dom对象互转。
var $a1=$(a1); Dom对象转Jquery对象。
$a1[0];/$a1.get(0); Jquery对象转Dom对象。