jQuery学习笔记

来源：互联网发布：java开源社区编辑：程序博客网时间：2024/06/15 16:17

1：hide() show()
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(0,alertInfo());
});
});
function alertInfo(){
alert("hello world");
}
</script>
注解：在所有的按钮点击的时候隐藏所有的p标签（只需要0秒钟，但是在隐藏之前需要执行alertInfo方法，是先执行，在隐藏。）
2：toggle()
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
注解：在按钮点击的时候p标签在隐藏与显示状态切换。 callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行；
3：jQuery链式表单
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
注解：按钮点击时id是p1的颜色变为红色，向上滑动2000，再向下2000。
或者
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
注解：jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行。
4：text() html() val()
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());//输出id是test的文本内容
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());//会输出里面的HTML标签
});
});
5：
$(document).ready(function(){
$("button").click(function(){
alert("值为: " + $("#test").val());//获取输入字段的值
});
});
6：attr()
$(document).ready(function(){
$("button").click(function(){
alert($("#runoob").attr("href"));//根据id获取标签中某个属性的值 alert()输出href属性中的链接
});
});
7：first() last() eq()
<script>
$(document).ready(function(){
$("div p").first().css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎访问我的主页</h1>
<div>
<p>这是 div 中的一个段落。</p> //first()是该段是黄色
</div>

<div>
<p>这是另外一个 div 中的一个段落。</p> //last()时该段是黄色
</div>

<p>这是一个段落。</p>

</body>

$(document).ready(function(){
$("p").eq(1); //索引从0开始故第二个p标签是黄色
});
8：filter() 选择匹配的元素
$(document).ready(function(){
$("p").filter(".url").css("background-color","yellow");//p标签中class等于url的p标签里的文字背景颜色设置为黄色。
});
9：not()与8相反选择不匹配的
$(document).ready(function(){
$("p").not(".url");
});
10：jquery遍历遍历祖先
<script>
$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});//设置直接父元素
});
</script>

<script>
$(document).ready(function(){
$("span").parents().css({"color":"red","border":"2px solid red"});//获取所有span元素的父标签
});
</script>

$(document).ready(function(){
$("span").parents("ul").css({"color":"red","border":"2px solid red"});//获取span元素的所有祖先并且他是ul元素
});

$(document).ready(function(){
$("span").parentsUntil("div");//返回给定两个元素之间的所有祖先元素。
});

11：jquery遍历后台
$(document).ready(function(){
$("div").children();//返回div元素的直接子元素
});

$(document).ready(function(){
$("div").children("p.1");//满足三个条件 div的直接子元素是p元素并且class=1
});

$(document).ready(function(){
$("div").find("span");//找到div元素后代的所有span元素
});

$(document).ready(function(){
$("div").find("*");//返回div元素的所有后代
});

12：jquery使用$作为简写，如果其他的框架也使用$怎么办？
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍然在工作!");
});
});

13：jquery的ajax方法
$("button").click(function(){
$.post("demo_test.html",function(data,status){
alert("Data: " + data + "nStatus: " + status);
});
});
14：jquery同胞在DOM树中水平遍历

$(document).ready(function(){
$("h2").siblings(); //返回H2标签的所有同胞元素
});

$(document).ready(function(){
$("h2").siblings("p");//需要满足两个条件 h2的同胞元素而且必须是p元素
});

$(document).ready(function(){
$("h2").next();//h2标签同胞的下一个元素
});

$(document).ready(function(){
$("h2").nextAll();//返回h2后面所有的同胞元素
});

$(document).ready(function(){
$("h2").nextUntil("h6");//返回两个给定参数之间的所有同胞元素
});

同理以下则是由此处向之前的位置寻找同胞 prev(), prevAll() prevUntil()

15：jquery设置
$("#test1").text("Hello world!");
$("#test2").html("<b>Hello world!</b>");
$("#test3").val("RUNOOB");
$("#runoob").attr("href","http://www.runoob.com/jquery");
//这种方法可以设置多个属性
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
});
16：jquery添加元素
$("p").append("追加文本");
$("p").prepend("在开头追加文本");

添加多条内容
function appendText(){
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); // 追加新元素
}
//在图片之后或之前添加文本
$("img").after("在后面添加文本");

$("img").before("在前面添加文本");

//在图片后添加文本
function afterText(){
var txt1="<b>I </b>"; // 使用 HTML 创建元素
var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素
var txt3=document.createElement("big"); // 使用 DOM 创建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在图片后添加文本
}
17：jquery删除元素与清空内容
$("#div1").remove();
$("#div1").empty();

18：jquery css方法
$("p").css("background-color");
$("p").css("background-color","yellow");
//设置多个css属性
$("p").css({"background-color":"yellow","font-size":"200%"});

19：JQUERY获取并设置CSS 类
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
$("body div:first").addClass("important blue"); body标签中的第一个div标签

$("h1,h2,p").removeClass("blue");

$("h1,h2,p").toggleClass("blue");切换样式 blue的变为非blue 非blue变为blue

阅读全文

0 0