jquery
下载一个js文件引入即可使用，实现了一些常用的操作，可查看源码。（选取元素+操作）
选择器:
元素选择器
$("p") $("button")
$("p","h1") $("button")
$("#id")
class选择器
$(".classname")
id和元素结合
p.classname
组合选择器：
后台选取器（空格）
div .cl 【div 元素下所有的cl类型的域】
div p 【div 元素下所有的p元素域】
子元素选择器（>）
div>.cl 【div下直接子元素cl类型的域】
div>p div元素中的所有直接子元素
相邻兄弟选择器（+）两个必须相邻，同上
div+p
后续兄弟选择器(~) 选取指定元素之后的相邻兄弟元素
div~p
选择器详解:https://blog.csdn.net/a153375250/article/details/51480126
一：鼠标事件
click()
dbclick()
mouseenter()
mouseleave()
mousedown()
mouseup()
hover()
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
}
);
获得焦点和失去焦点
focus()
blur()
eg：
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
二：效果
1.隐藏和显示：单位毫秒，slow。fast，参数非必填
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback); 切换
2淡入淡出
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$("#div1").fadeToggle();
$("#div1").fadeTo("slow",0.15); 0.15为暗淡比例
3滑动（实际是修改display属性）
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div>
</body>
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed);
三:动画(params是css属性)
默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right
eg:
$(selector).animate({params},speed,callback);
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"500");
div.animate({width:'300px',opacity:'0.8'},"600");
div.animate({height:'100px',opacity:'0.4'},"700");
div.animate({width:'100px',opacity:'0.8'},"800");
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的 </p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
停止动画：
$(selector).stop();
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({left:'100px'},5000);
$("div").animate({fontSize:'3em'},5000);
});
$("#stop").click(function(){
$("div").stop();
});
$("#stop2").click(function(){
$("div").stop(true);
});
$("#stop3").click(function(){
$("div").stop(true,true);
});
});
</script>
</head>
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止动画，但完成动作</button>
<p>点击 "开始" 按钮开始动画。</p>
<p>点击 "停止" 按钮停止当前激活的动画，但之后我们能再动画队列中再次激活。</p>
<p>点击 "停止所有" 按钮停止当前动画，并清除动画队列，所以元素的所有动画都会停止。</p>
<p>点击 "停止动画，但完成动作" 快速完成动作，并停止它。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
回调函数，同上滑动的callback参数
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
四:jQuery链
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
五：jQuery HTML
#获取和设置HTML数据
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr() -设置或返回属性的值
$("#test1").text("Hello world!");
$("#test1").text();
$("#runoob").attr("href");
均有回调函数，方法可以有个函数参数【有两个参数：被选元素列表中当前元素的下标，以及原始值。然后以函数新值返回您希望使用的字符串。】
$("#test1").text(function(i,origText)
{
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
#添加元素
append() - 在被选元素的结尾插入内容
prepend() -在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
区别:append/prepend是在所元素内部操作，after/before是在元素外面追加
#删除元素
remove() -可带选择器
empty()
empty是删除所选元素的所有子元素。
eg:
$("#div1").remove();
$("#div1").empty();
$("p").remove(".italic");
#CSS类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
$("p").css({"background-color":"yellow","font-size":"200%"});
#遍历
祖先
parent()
parents() 可带选择器
$("span").parents("ul").css({"color":"red","border":"2px solid red"});
后代
children()
find() 可带选择器
$("div").find("span").css({"color":"red","border":"2px solid red"});
同胞
$("h2").siblings("p").css({"color":"red","border":"2px solid red"});
前后同胞元素
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
#过滤（eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始）
$("div p").first();
$("div p").last();
$("p").eq(1);
$("p").filter(".url");
$("p").not(".url");
#jQuery AJAX
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
$(selector).load(URL,data,callback);
$("#div1").load("demo_test.txt");
$("#div1").load("demo_test.txt #p1");
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr)
{
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
GET vs. POST
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
$.get(URL,callback);
$.post(URL,data,callback);
$.get("demo_test.php",function(data,status)
{
alert("数据: " + data + "\n状态: " + status);
});
$.post("/try/ajax/demo_test_post.php",
{
name:"name",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
#Ajax
ethod：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
<script>
function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
}
}
xmlhttp.open("GET","cd_catalog.xml",true);
xmlhttp.send();
}
</script>
4644
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
