jQuery 笔记
来源:互联网 发布:数据错误 循环冗余检查 编辑:程序博客网 时间:2024/06/06 02:50
1. 选择器 http://www.runoob.com/jquery/jquery-selectors.html
2. toggle() 用来切换 hide() 和 show() 方法 http://www.runoob.com/try/try.php?filename=tryjquery_toggle
http://www.runoob.com/jquery/jquery-hide-show.html
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
3. 淡入淡出 fadeIn fadeOut fadeToggle fadeTo http://www.runoob.com/jquery/jquery-fade.html
4. 滑动 slideDown slideUp slideToggle http://www.runoob.com/jquery/jquery-slide.html
5. 动画 http://www.runoob.com/jquery/jquery-animate.html
$("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' });
$("div").animate({ left:'250px', height:'+=150px', width:'+=150px' });
$("div").animate({ height:'toggle' });6. 设置内容和属性 不止是值 可以是函数 http://www.runoob.com/jquery/jquery-dom-set.html
$("#test1").text("Hello world!");$("#test2").html("<b>Hello world!</b>");$("#test3").val("Dolly Duck");
$("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; });$("#test2").html(function(i,origText){ return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; });attr() 方法也允许您同时设置多个属性
$("#w3s").attr({ "href" : "http://www.w3cschool.cc/jquery", "title" : "W3Schools jQuery Tutorial" });jQuery 方法 attr(),也提供回调函数(不止是值也可以是函数)
$("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; });7. 添加元素
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
9. 操作 CSS http://www.runoob.com/jquery/jquery-css-classes.html
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
$("p").css({"background-color":"yellow","font-size":"200%"});
11. 遍历父 http://www.runoob.com/jquery/jquery-traversing-ancestors.html
$("span").parents("ul");//返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素$("span").parentsUntil("div");//返回介于 <span> 与 <div> 元素之间的所有祖先元素12. 遍历子孙 http://www.runoob.com/jquery/jquery-traversing-descendants.html
$("div").children("p.1");//返回类名为 "1" 的所有 <p> 元素,并且它们是 <div> 的直接子元素$("div").find("span");//返回属于 <div> 后代的所有 <span> 元素$("div").find("*");//返回 <div> 的所有后代13. 遍历同胞 http://www.runoob.com/jquery/jquery-traversing-siblings.html
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
$("div p").first();//选取首个 <div> 元素内部的第一个 <p> 元素$("div p").last();//选择最后一个 <div> 元素中的最后一个 <p> 元素$("p").eq(1);//选取第二个 <p> 元素(索引号 1)$("p").filter(".intro");//返回带有类名 "intro" 的所有 <p> 元素$("p").not(".intro");//返回不带有类名 "intro" 的所有 <p> 元素15. toArray
//把 <li> 元素转换为数组,然后输出该数组元素的 innerHTML$("button").click(function(){x=$("li").toArray()for (i=0;i<x.length;i++){alert(x[i].innerHTML);}});
- JQuery 笔记:
- jquery笔记
- jquery笔记
- JQuery 笔记
- JQuery笔记
- JQuery笔记
- JQuery笔记
- jquery 笔记
- jquery 笔记
- jquery笔记
- jquery+笔记
- JQuery笔记
- jquery笔记
- jquery笔记
- JQuery 笔记
- Jquery 笔记
- jQuery笔记
- JQuery笔记
- 将Java对象转换成json字符串,然后客户端接收到字符串后处理变成Javascript对象加载到下拉列框。
- xcode7+ios9 访问网络提示错误解决办法
- 类加载器详解
- 使用JavaScript实现回到顶部功能
- Fregment切换动画
- jQuery 笔记
- iOS学习之iOS沙盒(sandbox)机制和文件操作(一)
- Android中添加常驻通知栏
- 基础学习--调试/intellij快捷键
- 转义字符\(在hive+shell以及java中注意事项):正则表达式的转义字符为双斜线,split函数解析也是正则
- java基础
- 站上历史浪潮的计算机(二)——图灵
- 解决gridview只显示一行的问题
- Rotate