jQuery封装了js（看源码请看jQuery插件 进一步理解js原型链）
|----jQuery加载全称的方式
$(document).ready(function(){ alert("111111"); });
|
简写方式:
$(function(){
alert("1111");
});
|-----如果js自动加载多个？
<html> <head> <meta charset="UTF-8"> <title></title>
<script> function abc(){ alert("11111"); } function efg(){ alert("22222"); } </script> </head> <body onload="abc();efg();"> </body> </html> |
jQuery语法结构:
|-----1：addClass("");
|----css 多个样式的情况 注意格式
$("#mydiv").css({"width":"100px","height":"100px","background-color":"yellow"});
|----show() 和 hide()
<head> <meta charset="UTF-8"> <title></title> <style> #mydiv{ width:200px; height:200px; background-color: yellowgreen; display:none; } </style> <script src="js/jquery-1.8.3.js"></script> <script> $(function(){ $("#btn").click(function(){ $("#mydiv").show(1500); }); $("#btn2").click(function(){ $("#mydiv").hide(1500); }); }); </script> </head> <body> <input type="button" id="btn" value="显示"/> <input type="button" id="btn2" value="隐藏"/><br /> <div id="mydiv"></div> </body> |
|-----链式操作 next();
<script> $(function(){ $("h1").click(function(){ //next():相邻的元素 $("#apple").css("background-color","yellow").next().css("display","none").next().css("background-color","greenyellow"); }); }); </script> </head> <body> <h1>今天没有出太阳</h1> <ul> <li id="apple">苹果</li> <li>桔子</li> <li>黄瓜</li> </ul> |
|----隐式迭代:在css({多个});
|----jQuery如何操作节点？
val() text() html()
|-----jQuery对象转换成js对象
|----命名规范：如果是一个jQuery对象，请在变量前加上$
$(function(){ $("#btn").click(function(){ var $txt=$("#txt");//jQuery对象 //alert($txt); //1:把jQuery对象转成js对象 //alert($txt[0].value); //2:get alert($txt.get(0).value); }); }); |
<script src="js/jquery-1.8.3.js"></script> <style> .cc{ width:200px; height:190px; border:2px red solid; } </style> <script> $(function(){ $("#gg").mouseover(function(){ //当鼠标移至图片上方时 $("#mydiv").addClass("cc");//添加样式 }); $("#gg").mouseout(function(){ $("#mydiv").removeClass("cc");//移除样式 });
}); </script> </head> <body> <div id="mydiv"> <img src="img/pic.gif" id="gg"/> </div> </body> |
setAttribute(); img
<style> span{ width:50px; display:inline-block; position:relative; top:-50px; left:-250px; background-color: yellow; } </style> <script> function abc(count){ var gg=document.getElementById("gg"); gg.setAttribute("src","img/"+count+".gif"); }
</script> </head> <body> <img src="img/1.gif" id="gg"/> <span onclick="abc(1)">1</span> <span onclick="abc(2)">2</span> <span onclick="abc(3)">3</span> <span onclick="abc(4)">4</span> <span onclick="abc(5)">5</span> </body> |
扫一扫
3193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
