JQuery详细教程一介绍了JQuery的简介,安装,语法,选择器,事件;JQuery详细教程二简单介绍了JQuery的效果,比如淡入,淡出,尤其感兴趣的是动画,还有经典的回调函数 请关注博客: http://blog.csdn.net/qq_37022150
这篇我们直奔主题,老司机要上车了,请各位做好,系好安全带,准备发车
jQuery 拥有可操作 HTML 元素和属性的强大方法.
JQuery获取内容 三板斧,获取属性 屠龙刀
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn3").click(function(){
alert("Value: " + $("#test").val());
});
屠龙刀
$("button").click(function(){
alert($("#w3s").attr("href"));
});
JQuery设置内容与回调函数,还是原来的配方,原来的味道,继续挥舞 三板斧,戏耍 屠龙刀
设置内容
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
回调函数
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});
测试的时候这个i 的值没有具体显示
解锁屠龙宝刀的三大技能
第一技能与第二技能 设置单个属性与设置多个属性
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
宝刀也可以回调
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
JQuery添加 追风四侠 append(),prepend(),after(),before()
引领时尚的前侠与叠罗汉的后侠
技能一:
$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");
二者的风骚珠联璧合
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
function appendText()
{
var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p");
txt3.innerHTML="Text."; // 通过 DOM 来创建文本
$("body").append(txt1,txt2,txt3); // 追加新元素
}
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button οnclick="appendText()">追加文本</button>
</body>
</html>
山水画中的NO1侠与LAST1侠
技能一:
$("img").after("Some text after");
$("img").before("Some text 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); // 在 img 之后插入新元素
}
JQuery删除必杀技,你也值得拥有
通过 jQuery,可以很容易地删除已有的 HTML 元素
remove()---斩草除根法
$("#div1").remove();
empty()--隔山杀牛法
$("#div1").empty();
remove() 方法是否过于残暴,那好派个人监督一下,设置过滤条件,比如
$("p").remove(".italic");
更多文章,请关注: http://blog.csdn.NET/qq_37022150?viewmode=list