Web前端——JQuery的进阶(测试使用 jQuery进行指定的操作)
2015-09-09 20:45
781 查看
案例1:
需求描述:测试使用 jQuery 操作文本节点, 属性节点.。相关代码:
<script type="text/javascript">
//测试使用 jQuery 操作文本节点, 属性节点.
//及查找元素节点
$(function
() {
//1. 操作文本节点: 通过 jQuery 对象的 text() 方法
alert($("#bj").text());
$("#bj").text("画骨峰");
//2. 操作属性节点: 通过 jQuery 对象的 attr() 方法.
//注: 直接操作 value 属性值可以使用更便捷的 val() 方法.
alert($(":text[name='username']").attr("value"));
$(":text[name='username']").attr("value",
"画骨峰");
})
</script>
案例2:
需求描述:创建节点并插入节点到指定的节点中。相关代码:
<script type="text/javascript">
//测试使用 jQuery 创建节点并插入节点到指定的节点中
/*
1. 创建节点: 使用 $(html) 方式即可, 元素节点, 文本节点, 属性节点可以一网打尽
返回对应节点的 jQuery 对象:
$("<li id='atguigu'>画骨峰</li>")
2. 添加节点:
1). appendTo 和 append: 主语和宾语的位置不同:
$("<li id='atguigu'>画骨峰</li>").appendTo($("#city"));
$("#city").append("<li id='atguigu'>[画骨峰]</li>");
2). prependTo 和 prepend: 主语和宾语的位置不同:
$("<li id='atguigu'>画骨峰</li>").prependTo($("#city"));
$("#city").prepend("<li id='atguigu'>[画骨峰]</li>");
*/
$(function(){
//1. 创建一个 <li
id="atguigu">画骨峰</li>
//2. 并把其加入到 #city 的子节点
//$("<li id='atguigu'>画骨峰</li>").appendTo($("#city"));
//$("#city").append("<li id='atguigu'>[画骨峰]</li>");
//$("<li id='atguigu'>画骨峰</li>").prependTo($("#city"));
$("#city").prepend("<li id='atguigu'>[画骨峰]</li>");
alert($("#atguigu").text());
})
</script>
<script type="text/javascript">
//测试使用 jQuery 插入节点
$(function(){
//1. 创建一个 <li id="atguigu">画骨峰</li>
//2. 并把其加入到 #bj 的后面
//$("<li id='atguigu'>画骨峰</li>").insertAfter($("#bj"));
//$("#bj").after("<li id='atguigu'>[画骨峰]</li>");
//$("<li id='atguigu'>画骨峰</li>").insertBefore($("#bj"));
$("#bj").before("<li id='atguigu'>[画骨峰]</li>");
})
</script>
案例3:
需求描述:测试使用 jQuery 删除节点。相关代码:
<script type="text/javascript">
//测试使用 jQuery 删除节点
$(function(){
//1. 为 #city 的每一个 li 添加 click 响应函数: 点击时,
li 被删除
//$("#city li").click(function(){
// $(this).remove();
//});
//jQuery 对象的 remove() 方法: 将把 jQuery 对象对应的
//DOM 节点直接删除.
$("#bj").remove();
$("#city > li").last().remove(); //id为city的里面的li的最后一个
//2. 清空 #game 节点
//jQuery 对象的 empty() 方法: 清空 jQuery 对象对应的
//DOM 对象的所有的子节点.
alert("要清空了!");
$("#game").empty();
})
</script>
案例4:
需求描述:测试使用 jQuery 克隆节点。相关代码:
<script type="text/javascript">
//测试使用 jQuery clone 方法: 复制节点
$(function(){
$("li").click(function(){
alert($(this).text());
});
//复制 #bj 节点, 并添加到 #rl 节点的后面
/*
1. clone 节点时需要注意克隆后的节点的 id 属性. 若原节点有 id
属性, 则克隆后, 会出现在一个文档中有两个 id 相同的节点的情况.
2. clone(true): 在克隆节点的同时, 克隆节点包含的事件.
*/
$("#bj").clone(true)
.attr("id", "bj2")
.insertAfter($("#rl"));
})
</script>
案例4:
需求描述:测试使用 jQuery 替换 节点。相关代码:
$(function(){
//1. 创建一个 <li>画骨峰</li> 节点, 替换 #city 的最后一个 li 子节点
$("<li>画骨峰</li>").replaceAll($("#city
li:last"));
//2. 创建一个 <li>[画骨峰]</li> 节点,
//替换 #city 的第二个 li 子节点
$("#city li:eq(1)").replaceWith($("<li>[画骨峰]</li>"));
//3. 互换以下两个节点: #rl 和 #bj. 还有移动的功能.
//$("#bj").replaceWith($("#rl"));
//节点互换需要先克隆节点.
alert(1);
var $bj2 = $("#bj").clone(true);
var $rl = $("#rl").replaceWith($bj2);
alert(2);
$("#bj").replaceWith($rl);
})
案例4:
需求描述:测试使用 jQuery 替换 节点。相关代码:
<script type="text/javascript">
//测试使用 jQuery wrap, wrapAll, wrapInner
$(function(){
//包装 li 本身
$("#game li").wrap("<font color='red'></font>");
//包装所有的 li
$("#city li").wrapAll("<font color='red'></font>");
//包装 li 里边的文字.
$("#language li").wrapInner("<font color='red'></font>");
})
</script>
$(function(){
alert($("#city").html());
$("#city").html("<li id='atguigu'>尚硅谷</li>");
})
案例5:
需求描述:测试使用 jQuery 替换 节点。相关代码:
<script type="text/javascript">
$(function(){
//1. 点击所有的 p 节点, 能够弹出其对应的文本内容
/*
1. jQuery 对象可以进行隐式迭代: $("p").click(function(){...});
为选取的所有的 p 节点都添加了 click 响应函数.
jQuery 对象本身就是一个
DOM 对象的数组
2. 在响应函数中, this 是一个 DOM 对象. 若想使用 jQuery 对象的方法
需要把其包装为 jQuery 对象: 使用 $() 把 this 包起来.
3. text() 方法时一个读写的方法: 不加任何参数, 读取文本值; 加参数为
属性节点添加文本值(文本节点)
(和 text() 类似的方法: attr(), val())
*/
$("p").click(function(){
alert($(this).text());
alert($(this).text("^^" + $(this).text());
//alert(this.firstChild.nodeValue);
});
//2. 使第一个 table 隔行变色
$("table:first tr:even").css("background",
"#ffaacc");
//3. 点击 button, 弹出 checkbox 被选中的个数
$("button").click(function(){
alert($(":checkbox:checked").length);
});
});
</script>
共同进步。
需求描述:测试使用 jQuery 操作文本节点, 属性节点.。相关代码:
<script type="text/javascript">
//测试使用 jQuery 操作文本节点, 属性节点.
//及查找元素节点
$(function
() {
//1. 操作文本节点: 通过 jQuery 对象的 text() 方法
alert($("#bj").text());
$("#bj").text("画骨峰");
//2. 操作属性节点: 通过 jQuery 对象的 attr() 方法.
//注: 直接操作 value 属性值可以使用更便捷的 val() 方法.
alert($(":text[name='username']").attr("value"));
$(":text[name='username']").attr("value",
"画骨峰");
})
</script>
案例2:
需求描述:创建节点并插入节点到指定的节点中。相关代码:
<script type="text/javascript">
//测试使用 jQuery 创建节点并插入节点到指定的节点中
/*
1. 创建节点: 使用 $(html) 方式即可, 元素节点, 文本节点, 属性节点可以一网打尽
返回对应节点的 jQuery 对象:
$("<li id='atguigu'>画骨峰</li>")
2. 添加节点:
1). appendTo 和 append: 主语和宾语的位置不同:
$("<li id='atguigu'>画骨峰</li>").appendTo($("#city"));
$("#city").append("<li id='atguigu'>[画骨峰]</li>");
2). prependTo 和 prepend: 主语和宾语的位置不同:
$("<li id='atguigu'>画骨峰</li>").prependTo($("#city"));
$("#city").prepend("<li id='atguigu'>[画骨峰]</li>");
*/
$(function(){
//1. 创建一个 <li
id="atguigu">画骨峰</li>
//2. 并把其加入到 #city 的子节点
//$("<li id='atguigu'>画骨峰</li>").appendTo($("#city"));
//$("#city").append("<li id='atguigu'>[画骨峰]</li>");
//$("<li id='atguigu'>画骨峰</li>").prependTo($("#city"));
$("#city").prepend("<li id='atguigu'>[画骨峰]</li>");
alert($("#atguigu").text());
})
</script>
<script type="text/javascript">
//测试使用 jQuery 插入节点
$(function(){
//1. 创建一个 <li id="atguigu">画骨峰</li>
//2. 并把其加入到 #bj 的后面
//$("<li id='atguigu'>画骨峰</li>").insertAfter($("#bj"));
//$("#bj").after("<li id='atguigu'>[画骨峰]</li>");
//$("<li id='atguigu'>画骨峰</li>").insertBefore($("#bj"));
$("#bj").before("<li id='atguigu'>[画骨峰]</li>");
})
</script>
案例3:
需求描述:测试使用 jQuery 删除节点。相关代码:
<script type="text/javascript">
//测试使用 jQuery 删除节点
$(function(){
//1. 为 #city 的每一个 li 添加 click 响应函数: 点击时,
li 被删除
//$("#city li").click(function(){
// $(this).remove();
//});
//jQuery 对象的 remove() 方法: 将把 jQuery 对象对应的
//DOM 节点直接删除.
$("#bj").remove();
$("#city > li").last().remove(); //id为city的里面的li的最后一个
//2. 清空 #game 节点
//jQuery 对象的 empty() 方法: 清空 jQuery 对象对应的
//DOM 对象的所有的子节点.
alert("要清空了!");
$("#game").empty();
})
</script>
案例4:
需求描述:测试使用 jQuery 克隆节点。相关代码:
<script type="text/javascript">
//测试使用 jQuery clone 方法: 复制节点
$(function(){
$("li").click(function(){
alert($(this).text());
});
//复制 #bj 节点, 并添加到 #rl 节点的后面
/*
1. clone 节点时需要注意克隆后的节点的 id 属性. 若原节点有 id
属性, 则克隆后, 会出现在一个文档中有两个 id 相同的节点的情况.
2. clone(true): 在克隆节点的同时, 克隆节点包含的事件.
*/
$("#bj").clone(true)
.attr("id", "bj2")
.insertAfter($("#rl"));
})
</script>
案例4:
需求描述:测试使用 jQuery 替换 节点。相关代码:
$(function(){
//1. 创建一个 <li>画骨峰</li> 节点, 替换 #city 的最后一个 li 子节点
$("<li>画骨峰</li>").replaceAll($("#city
li:last"));
//2. 创建一个 <li>[画骨峰]</li> 节点,
//替换 #city 的第二个 li 子节点
$("#city li:eq(1)").replaceWith($("<li>[画骨峰]</li>"));
//3. 互换以下两个节点: #rl 和 #bj. 还有移动的功能.
//$("#bj").replaceWith($("#rl"));
//节点互换需要先克隆节点.
alert(1);
var $bj2 = $("#bj").clone(true);
var $rl = $("#rl").replaceWith($bj2);
alert(2);
$("#bj").replaceWith($rl);
})
案例4:
需求描述:测试使用 jQuery 替换 节点。相关代码:
<script type="text/javascript">
//测试使用 jQuery wrap, wrapAll, wrapInner
$(function(){
//包装 li 本身
$("#game li").wrap("<font color='red'></font>");
//包装所有的 li
$("#city li").wrapAll("<font color='red'></font>");
//包装 li 里边的文字.
$("#language li").wrapInner("<font color='red'></font>");
})
</script>
$(function(){
alert($("#city").html());
$("#city").html("<li id='atguigu'>尚硅谷</li>");
})
案例5:
需求描述:测试使用 jQuery 替换 节点。相关代码:
<script type="text/javascript">
$(function(){
//1. 点击所有的 p 节点, 能够弹出其对应的文本内容
/*
1. jQuery 对象可以进行隐式迭代: $("p").click(function(){...});
为选取的所有的 p 节点都添加了 click 响应函数.
jQuery 对象本身就是一个
DOM 对象的数组
2. 在响应函数中, this 是一个 DOM 对象. 若想使用 jQuery 对象的方法
需要把其包装为 jQuery 对象: 使用 $() 把 this 包起来.
3. text() 方法时一个读写的方法: 不加任何参数, 读取文本值; 加参数为
属性节点添加文本值(文本节点)
(和 text() 类似的方法: attr(), val())
*/
$("p").click(function(){
alert($(this).text());
alert($(this).text("^^" + $(this).text());
//alert(this.firstChild.nodeValue);
});
//2. 使第一个 table 隔行变色
$("table:first tr:even").css("background",
"#ffaacc");
//3. 点击 button, 弹出 checkbox 被选中的个数
$("button").click(function(){
alert($(":checkbox:checked").length);
});
});
</script>
共同进步。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- easyui------显示隐藏列功能
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Flex字符串比较 还有Flex字符串操作
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法