JQuery入门学习笔记(全)
jQuery
语法
- $(this).hide() - 隐藏当前元素
- $("p").hide() - 隐藏所有
元素
- $("p.test").hide() - 隐藏所有 class="test" 的
元素
- $("#test").hide() - 隐藏所有 id="test" 的元素
- $(".test").hide()隐藏所有的class规定的元素
- $("[href]")选取带有href属性的元素
- 文档就绪事件
$(document).ready(function(){});
$(function(){});
- 点击就会失踪
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
事件
-
click点击
-
dblclick双击
-
mouseenter鼠标移入
-
keypress
统计按键的次数并显示在span元素中 i=0; $(document).ready(function(){ $("input").keypress(function(){ $("span").text(i+=1); }); }); -
submit 提交 只适用于form元素
-
focus 选中input元素时
-
$("input").keydown(function (event) { $("div").html('Key: '+event.which); }); 判断具体是哪个键，回车的数字键是13
//demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<title>Title</title>
<script>
$(function () {
$("p").click(function () {
$(this).hide();
});
$("h1").mouseenter(function () {
//alert('fuck');
});
$("input").keydown(function (event) {
$("div").html('Key: '+event.which);
});
})
</script>
</head>
<body>
<p>竹林的故事</p>
<p id="mark">5.0</p>
<p class="123">123类</p>
<h1>移过来</h1>
<input type="text">
<div></div>
</body>
</html>
效果
-
hide
-
show
-
$(selector).hide(speed,callback); $(selector).show(speed,callback); speed可以取值slow或者fast，也可以是数字比如1000 -
toggle 先隐藏，再点击再显示
-
fadeIn 淡入
-
fadeOut 淡出
-
fadeToggle
-
fadeTo 颜色变淡
-
slideDown
-
slideUp
-
slideToggle
动画
-
默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute! -
div.animate({left:'100px'},"slow");//修改位置 div.animate({fontSize:'3em'},"slow");//修改字体 div.animate({width:'100px',opacity:'0.8'},"slow");//修改高度和颜色深浅 -
stop 停止动画
-
下滑面板https://www.runoob.com/try/try.php?filename=tryjquery_slide_down
DOM
-
text() html() var()
-
$("#runoob").attr("href") 获取属性
-
$("button").click(function(){ $("#runoob").attr({ "href" : "http://www.runoob.com/jquery", "title" : "jQuery 教程" }); }); -
回调函数举例
$("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; }); }); $("button").click(function(){ $("#runoob").attr("href", function(i,origValue){ return origValue + "/jquery"; }); }); -
input里面不是text，而是val()
-
添加文本和列表项
$("#btn1").click(function(){ $("p").append(" <b>追加文本</b>。"); }); $("#btn2").click(function(){ $("ol").append("<li>追加列表项</li>"); }); -
prepend()在开头处追加内容
-
三种追加文本的方法
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本 var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本 var txt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素 -
before() after() 在之前之后插入文本
-
remove()删除元素
-
empty()清空元素的内容而不是删除之
-
$("p").remove(".italic"); 删除class="italic"的元素
-
$("p").css("background-color","yellow"); 改变颜色
-
$("p").css({"background-color":"yellow","font-size":"200%"});设置多个属性
-
往div里面输入文本https://www.runoob.com/try/try.php?filename=tryjquery_dim_width_height
jQuery遍历
-
parent()返回父亲元素，parents()返回所有祖先
-
$("span").parentsUntil("div") 返回span与div之间所有的祖先元素
-
children() 返回下一级DOM树的所有儿子
-
$("div").find("span"); 选择div后代的所有span后代,可以是孙子
-
$("div").find("*"); 返回所有后代
-
siblings() 选择所有同胞
-
siblings("p") 所有同胞中的p元素
-
next() 下一个同胞
-
nextAll() 之后所有的同胞
-
$("h2").nextUntil("h6"); h2与h6之间所有的同胞元素,不包含h2与h6
-
prev(),prevAll(),prevUntill()
-
$("div p").first() 选择div中第一个p元素
-
last()
-
eq(),返回被选元素中带指定索引号的元素,首元素的下标为0 $("p").eq(1);取第二个
-
$("p").filter(".url"); 返回带有类名 "url" 的所有
元素
-
$("p").not(".url"); 返回不带有类名 "url" 的所有
元素
jQuery-Ajax
AJAX=异步的JavaScript和XML,通过后台加载数据,在网页上显示
-
$("#div1").load("demo_test.txt");可以把URL中的文件直接加载到页面上来
-
$("#div1").load("demo_test.txt #p1"); 从txt中选择id="p1"的内容加载进来
-
get方法
$("button").click(function(){
$.get("/try/ajax/demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
- post方法
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
