之前书写了jquery的核心函数和选择器，关于jquery还有一些内容:
1、jquery获取HTML、文本和值：
innerHTML==html()；innerText==text（）；outerHTML：展现标签全文内容
读取和设置某个元素中 HTML内容：
html() 获取一个元素中html内容；html(val) 设置一个元素中html内容；这个函数不能用于XML文档。但可以用于XHTML文档
读取和设置某个元素中的文本内容：
text() 获取一个元素中 文本内容；text(val) 设置一个元素中 文本内容；该方法既可以用于 XHTML 也可以用于 XML 文档
文本框、下拉列表框、单选框 选中的元素值：
val() 获取文本框、下拉列表框、单选框 value值；val(val) 设置文本框、下拉列表框、单选框 value值
// 设置或获取HTML、文本和值
<script type="text/javascript">
$(function(){
// <div><p>欢迎光临</p></div> 获取div中 html和text 对比
alert($("<div><p>欢迎光临</p></div>").html());
alert($("<div><p>欢迎光临</p></div>").text());
alert(document.getElementById("myDiv").innerHTML);
alert(document.getElementById("myDiv").innerText);
alert($("#myDiv").html());
alert($("#myDiv").text());
//click点击事件
$("#mybutton").click(function(){
// 使用val() 获得文本框、下拉框、单选框选中的value
alert($("#username").val());
alert($("#city").val());
alert($("input[name='gender']").val()); // 只能获得第一个值
alert($("input[name='gender']:checked").val()); // 获取所选的值
});
});
</script>2、DOM节点操作
添加节点：
创建元素:
使用工厂函数 jQuery(html, [ownerDocument]) --- jQuery可以写为$
例如： $(“<div>你好，jQuery</div>”);
内部插入（父子关系）:
$node.append($newNode)向每个匹配的元素内部的结尾处追加结尾处
$newNode.appendTo($node)将新元素追加到每个匹配元素内部的结尾处
$node.prepend($newNode) 向每个匹配的元素内部的追加开始处
$newNode.prependTo($node)将新元素追加到每个匹配元素内部的开始处
外部插入（兄弟关系）:
$node.after($newNode) 向每个匹配的元素的之后插入内容，是并列兄弟
$newNode.insertAfter($node) 将新元素插入到每个匹配元素之后
$node.before($newNode) 向每个匹配的元素的之前插入内容
$newNode.insertBefore($node) 将新元素插入到每个匹配元素之前
<script type="text/javascript">
$(function () {
//内部插入（父子关系）:
// 在 id=“edu”下增加 <option value="大专">大专^^^^^</option>
$("#edu").append($('<option value = "大专">大专</option>'));
$('<option value = "大专">大专</option>').appendTo($("#edu"));
//外部插入（兄弟关系）:
//<option value="幼儿园">幼儿园^^^^^</option> 之前添加 <option value="中学生">中学生^^^^^</option>
$("#edu option[value='幼儿园']").before('<option value="中学生">中学生^^^^^</option>');
$('<option value="中学生">中学生</option>').insertBefore($("#edu option[value='幼儿园']"));
});
</script>删除节点：
$(“p”).remove(“.hello”)：删除所为 class属性值为 hello 的 p元素，还有它下面的所有元素；
该方法返回被删除节点的引用
该方法删除节点后，连同节点的事件也删除了
$(“p”).empty()：清除所有 p元素，还有它下面的所有元素
$("p").detach()： 被删除的节点，会保留原有的事件
<script type="text/javascript">
// 节点删除
$(function(){
// remove后的元素 事件 也删除了
// $("#mybutton").click(function(){
// $p = $("p").remove();
// $("body").append($p);
// });
// 采用1.4版本新提供的 detach方法，可以保留原有事件
$("#mybutton").click(function(){
$p = $("p").detach();
$("body").append($p);
});
});
</script>复制与替换节点：
复制节点：
$(“p”).clone(); 返回节点克隆后的副本，但不会克隆原节点的事件
$(“p”).clone(true); 克隆节点，保留原有事件
替换节点：
$(“p”).replaceWith(“<b>大世界</b>"); 将所有p元素，替换为"<b>大世界</b>“
$(“<b>大世界</b>”).replaceAll(“p”); 与replaceWith相反
<script type="text/javascript">
$(function () {
$("#toRight").click(function () {
// $("#rightSelect").append($("#leftSelect option:selected"));
$("#rightSelect").append($("#leftSelect option:selected").clone());//克隆
});
$("#allToRight").click(function () {
// $("#rightSelect").append($("#leftSelect option"));
$("#rightSelect").append($("#leftSelect option").clone());
});
})
</script>3、事件机制：jQuery 提供的事件与传统 JS 相同，只是采用jQuery语法操作更为方便
绑定事件：
$("#mybutton").click(function(){alert(1);})
$("#mybutton").on("click",function(){alert(2);});
解除绑定：$(“#mybutton”).off(“click”);
<script type="text/javascript">
$(function(){
// 传统js
document.getElementById("mybutton").onclick = function(){alert(1);};
// 传统方式只能绑定一个事件
document.getElementById("mybutton").onclick = function(){alert(11);};
// jquery 允许同时绑定多个事件
$("#mybutton").click(function(){alert(2)});
// 通过bind函数绑定
$("#mybutton").bind("click",function(){alert(3)});
$("#mybutton").on("click",function(){alert(33)});
});
</script>点击事件：
一次性事件 one(type, [data], fn)：为对象绑定一次性事件，只有一次有效；
触发事件 trigger(type, [data]) ：触发目标对象指定的事件执行
<script type="text/javascript">
// 一次性事件和 自动触发事件
$(function(){
// 为页面内所有p 元素绑定 一次性事件，点击打印p元素中内容
$("p").one("click",function(){
alert($(this).html());
});
// 页面内有两个按钮，点击按钮1， 触发按钮2的 click事件执行
$("#mybutton2").click(function(){
alert("按钮二 被点击了");
});
$("#mybutton1").click(function(){
alert("按钮一 被点击了");
// 触发按钮二 点击事件
// $("#mybutton2").trigger("click");//已经不使用了，底层原理
$("#mybutton2").click;
});
});
</script>鼠标操作事件：
hover()： 模拟光标悬停时间。当光标移动到元素上时，会触发指定的第一个函数，当光标移出这个元素时，会触发指定的第二个函数；
toggle()：用于模拟鼠标连续单击事件。第一次单击元素，触发指定的第一个函数，当再一次单击同一个元素时，则触发指定的第二个函数，如果有更多个函数，则依次触发，直到最后一个
<script type="text/javascript">
// 事件切换 效果 ---- 合成事件
$(function(){
// 编写一个div元素，光标移动上去 字体变为红色，移开后 变为蓝色
$("div").hover(function(){
$(this).css("color","red");
},function(){
$(this).css("color","blue");
});
});
</script>默认事件动作和取消事件冒泡：
preventDefault()： 取消可能引起任何语意操作的事件. 比如<a>元素的href链接加载, 表单提交以及click引起复选框的状态切换
stopPropagation()： 取消事件冒泡
<script type="text/javascript">
// 阻止事件的冒泡传播 和 默认事件动作
$(function(){
$("#mylink").click(function(event){
alert("a");
// 阻止事件冒泡(事件的向下蔓延) ，兼容浏览器
event.stopPropagation();
});
// 阻止默认事件发生
$("#delLink").click(function(event){
alert("del");
// 阻止默认href事件的发生 ，兼容浏览器
event.preventDefault();
});
//通常使用此方法
$("#delLink2").click(function(event){
alert("#");
event.preventDefault();
});
});
</script>
297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
