1、问候Jquery
功能: 在文本框输入Hello Jquer!~,然后点击Button时就alert文本框里面的内容。
关键字:获取Dom节点对象,编写Js函数。
以下是三种办法:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Jquery</title>
//引入Jquery,必须
<script type="text/javascript" src="Js/jquery-1.11.0.js"></script>
<script type="text/javascript">
//获取节点的传统的方法,在input按钮控件上添加onclick属性触发函数。
/* function getContent () {
var content = document.getElementById("content").value;
alert (content);
} */
//body onload属性,在文档加载完以后执行方法。关键字:1、body οnlοad="init()"属性 2、function对象
/* function init () {
document.getElementById("actionButton").οnclick=function (){
var content = document.getElementById("content").value;
alert (content);
}
} */
//第三种方法,原理跟第二种一样,在文档加载完成后执行函数,这次用Jquery库完成。获得DOM节点的方式:$("# id")==根据id获取节点对象,
//js内置对象直接$()套上即可,区分jsp的EL表达式(${}大括号)与内置对象(document是Js的内置对象)。
//Js很多函数都是嵌套着执行。比如下面,执行了ready方法就会执行function1,执行了function1就会执行click,然后
//执行了click后就会执行function2,要牢记
$(document).ready(function () {
$("#actionButton").click(function () {
alert ($("#content").val());
});
});
</script>
</head>
<body>
<input type="text" id="content" /><input type="button" value="submit" id="actionButton">
</body>
</html>
2、Jquery 选择节点的方法详解。
PS:选出来的节点不一定是一个,很有可能是多个DOM节点,这时候可以方便的同时操作多个节点。
当然也可以巧妙的根据需要选择文档中指定的DOM节点。
<script type="text/javascript" src="Js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//在Jquery中选出来的节点不一定只有一个,可能是多个。
//普通选择器:根据id,类别,标签名选择DOM节点。
// $("#a2").css("background-color","red");
// $(".c1").css("background-color","red");
// $("a").css("background-color","red"); //选出多个标签为<a>的DOM节点.
// 属性选择器:根据[属性]来选择DOM节点。[href$='com']表示选择尾字符为com的节点。
// $("[href='#']").css("background-color","red");
// $("[href$='net']").css("background-color","red");
// 其他选择器 选择列表中指定位置的节点: ul li:first && ul li:last
$("ul li:first").css("background-color","red");
$("ul li:last").css("background-color","red");
});
</script>
3、Jquery操作DOM节点
<script type="text/javascript" src="Js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//一、节点的CRUD
//查找节点。
/* var li=$("ul li:eq(0)").text();
alert(li);*/
//创建节点 : 1、直接在尾端创建节点 2、在任意节点下方创建节点。
/* $("ul").append("<li><font title=\"这是恩格斯\" color=\"red\" size=\"5\">恩格斯</font></li>"); */
/* var li2=$("<li title='我是李彦宏'>李彦宏</li>")
var li22=$("ul li:eq(1)");
li2.insertAfter(li22); */
//删除节点:关键:得到要删除的节点的对象调用remove()方法即可。
/* var li=$("ul li:eq(2)");
li.remove(); */
//二、DOM属性的操作。
//获取指定属性(key)的值(value)。 关键:先获取属性所在的DOM节点对象,再通过 domObject.attr("attribute")方法获取属性值
/* var li=$("ul li:eq(1)");
var li_attr=li.attr("title");
alert(li_attr); */
//设置属性,还是用 DOM对象的 attr()的重载方法attr("key","value")。
/* var li=$("ul li:eq(1)");
li.attr("title","我是马化腾"); */
//删除属性
/* var li=$("ul li:eq(1)");
li.removeAttr("title"); */
//三、获取与设置节点的HTML,文本或者输入值。
//获取HTML,关键字 : html()的重载方法,既可以获取又可以设置。
/* var li=$("ul li:eq(0)");
alert(li.html()); */
//设置HTML
/* var li=$("ul li:eq(1)");
li.html("<font size='10'>呵呵</font>"); */
//获取节点文本。关键字 :text()的重载方法,既可以获取又可以设置。
/* var li=$("ul li:eq(1)");
alert(li.text()); */
//设置节点文本。
/* var li=$("ul li:eq(1)");
li.text("Hello Jquery!~"); */
//遍历节点 (重要!重要!)
//先得到DOM节点对象,用children()方法得到其下的所有节点的集合。
/* var body=$("body").children();
alert(body.length); */
//先得到某个DOM节点对象,用next()方法得到下一个节点对象。
/* var li=$("ul li:eq(1)").next();
alert(li.text()); */
//先得到某节点对象,用prev()方法得到前一个节点的对象。
/* var li=$("ul li:eq(1)");
alert(li.prev().text()); */
});
</script>
4、Jquery事件机制控制
PS:主要为控件的事件,如单击、双击控件,移入、移出控件等。
<script type="text/javascript" src="Js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#button").click(function (){
//$("#p1").html("我是html");
//$("#p1").text("我是text");
$("#text").val("我是value");
});
$("#button").dblclick(function() {
$("#p1").html("我被点两次啦");
});
//鼠标点击控件,就说控件获取了鼠标焦点。
/* $("#text").focus(function () {
$("#text").val("获取了鼠标焦点。");
}); */
//失去焦点。
/* $("#text").blur(function () {
$("#text").val("失去了鼠标焦点");
}); */
//鼠标移入。
$("#text").mouseover (function () {
$("#text").val("鼠标移入");
});
//鼠标移出。
$("#text").mouseout (function() {
$("#text").val("鼠标移出");
});
//鼠标事件总结:操作Jquery事件,最重要的还是先获取DOM节点对象,调用对象的事件机制相关的方法即可对事件进行监听与控制。
//关键:1.获取DOM节点对象 2.相关函数:click(),dblclick(),focus(),blur(),mouseover(),mouseout().
});