jQuery基础学习二 捕获、设置等复杂操作
来源:互联网 发布:模拟加密狗软件 编辑:程序博客网 时间:2024/05/29 12:12
一、jQuery捕获
即:jQuery - 获取内容和属性
jquery拥有 可操作HTML元素和属性的强大方法。
1、DOM操作
1).text() :设置或返回所选元素的文本内容
2).html():设置或返回所选元素的内容(包括HTML标记)
3).val():设置或返回表单字段的值
$("#test").val()4) .attr():获取属性值
$("button").click(function(){ alert($("#w3s").attr("href"));});
1、使用参数的方法,设置元素的文本内容、内容(标记)、表单value
$("#btn1").click(function(){ $("#test1").text("Hello world!");});$("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){ $("#test3").val("Dolly Duck");});2、在DOM操作的参数中加入回调函数,通过回调函数返回相应的值
$("#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 + ")"; });});3、设置标签元素的属性值:
可同时设置多个属性的值
$("button").click(function(){ $("#w3s").attr({ "href" : "http://www.w3cschool.cc/jquery", "title" : "W3Schools jQuery Tutorial" });});
4、通过回调函数设置元素的属性值:
$("button").click(function(){ $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; });});
通过jQuery,可以很容易的添加新元素/内容
下面介绍四个jQuery方法:
1、append()方法
此方法可在被选的元素结尾处插入内容
$("p").append("Some appended text.");
2、prepend()方法
此方法可在备选的元素的前面插入内容
$("p").prepend("Some prepended text.");3、append和prepend可以批量添加,用逗号隔开即可
$("p").append(txt1,txt2,txt3);4、after()和before()方法,以前两个想似。在所选的元素之前或之后添加内容。
四、删除元素
通过jQuery可以很容易的删除HTML已有的元素。一般有以下两个方法:
1、remove():删除被选元素,以及其子元素
可以接受一个参数,过滤要删除的元素,该参数可以是任何jQuery选择器的语法。
$("p").remove(".italic"); 意思为:删除class=italic的p标签。
2、empty():清空被选元素的子元素
五、获取并设置CSS类
jQuery操作css的方法:
1、addClass: 向被选元素添加一个或多个类,添加类时,还可以选取多个元素
1)选取多个元素添加类
$("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important");});2)添加多个类:
$("button").click(function(){ $("#div1").addClass("important blue");});
$("button").click(function(){ $("h1,h2,p").removeClass("blue");});
3、toggleClass:实现对被选元素的的添加类/删除类的切换操作
$("button").click(function(){ $("h1,h2,p").toggleClass("blue");});
4、css:方法用于设置或返回被选元素的一个或者多个样式属性
1)返回指定的css属性值:
css("propertyname");
<pre name="code" class="javascript">$("p").css("background-color");
语法:css("propertyname","value");
使用:
$("p").css("background-color","yellow");
语法:css({"propertyname":"value","propertyname":"value",...});
使用:
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery提供了多个处理大小的方法:
1、宽:width() 设置或返回元素的宽度(不包括内边距、边框、外边距)
2、高:height() 设置或返回元素的高度(不包括内边距、边框、外边距)
$("button").click(function(){ var txt=""; txt+="Width: " + $("#div1").width() + "</br>"; txt+="Height: " + $("#div1").height(); $("#div1").html(txt);});
4、innerheight():返回元素的高度(包括内边距)
$("button").click(function(){ var txt=""; txt+="Inner width: " + $("#div1").innerWidth() + "</br>"; txt+="Inner height: " + $("#div1").innerHeight(); $("#div1").html(txt);});
5、outerWidth():返回元素的宽度(包括内边距和边框)
6、outerHeight():返回元素的高度(包括内边距和边框)
$("button").click(function(){ var txt=""; txt+="Outer width: " + $("#div1").outerWidth() + "</br>"; txt+="Outer height: " + $("#div1").outerHeight(); $("#div1").html(txt);});
七、jQuery 的DOM树(父节点)
1、parent():返回被选元素的直接父元素; 该方法只会向上一级对DOM树进行遍历
$(document).ready(function(){ $("span").parent();});
2、parents():返回被选元素的所有祖先父辈,它一路向上直到文档的根元素(html)
$(document).ready(function(){ $("span").parents();});
还可以对结果过滤,得到自己想要的父辈元素。
$(document).ready(function(){ $("span").parents("ul");});
3、parentsUntil()返回所有父辈的过滤方法,返回到参数节点之间的所有节点
$(document).ready(function(){ $("span").parentsUntil("div");});
八、jQuery的DOM树(子节点)
1、children():返回被选元素的所有直接子节点。
下面的例子返回每个<div>元素的所有直接子节点
$(document).ready(function(){ $("div").children();});
可以使用参数来过滤返回结果:
下面的例子返回class=“1”的所有<p>元素,并且他们是<div>的直接子节点
$(document).ready(function(){ $("div").children("p.1");});
2、find():返回被选元素的所有子节点;也可以通过参数过滤返回结果
$(document).ready(function(){ $("div").find("span");});
如想返回所有子节点,用*做参数,表示全选
$(document).ready(function(){ $("div").find("*");});
九、jQuery中的过滤
三个基本过滤方法
1、first():返回被选元素的首个元素
选取首个<div>元素内部的第一个<p>元素
$(document).ready(function(){ $("div p").first();});
2、last():返回被选元素的最后一个元素
选取首个<div>元素内部的最后一个<p>元素
$(document).ready(function(){ $("div p").last();});
3、eq():返回被选元素 中带有指定索引号的元素
选取第二个元素:
$(document).ready(function(){ $("p").eq(1);});
两个不常用的过滤方法
4、filter():规定一个标准,不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
返回带有类名“intro”的所有<p>标签
$(document).ready(function(){ $("p").filter(".intro");});
5、not():返回不匹配标准的的所有元素;与filter相反
返回不带有类名"intro"的所有<p>标签
$(document).ready(function(){ $("p").not(".intro");});
- jQuery基础学习二 捕获、设置等复杂操作
- jQuery学习二-捕获
- jQuery学习二-设置
- jquery学习基础(二)
- jQuery基础二DOM操作
- jQuery的DOM操作之捕获和设置
- Jquery学习之旅之捕获和设置
- jQuery基础学习(二)
- jQuery基础学习笔记二
- jQuery基础学习(二)
- jQuery基础学习(二)
- JQuery学习二: DOM操作
- 二、Cocoapods复杂操作
- [jQuery学习系列二 ]2-JQuery学习二-数组操作
- jQuery基础----11jQuery HTML-捕获
- 10012---jQuery--jQuery DOM 操作-捕获
- Jquery的学习(二)基础核心
- jQuery学习笔记(二)基础事件
- Android XML文件链接错误
- CentOS下安装Git
- 周赛-Toy Cars
- js 中文乱码
- Android控件详解之惰性装载控件
- jQuery基础学习二 捕获、设置等复杂操作
- LintCode-旋转链表
- Python之Window环境搭建
- C语言中内存分布及程序运行中(BSS段、数据段、代码段、堆栈)
- 本田车载系统
- MarkDown
- Calendar日历类,Date类
- 字符串处理
- Poj 3253 Fence Repair (贪心加优先队列的应用)