jQuery的链式操作：
- $(this)
.addClass("highlight").children("li").show().end()
.sibilings().removeClass("highlight").children("li").hide();
jQuery对象和DOM对象：
- var $cr = $("cr"); // jQuery对象
- var cr = $cr[0]; // DOM对象
- var dr = $cr.get(0) // DOM对象
- var $dr = $(dr) // jQuery对象
jQuery的选择器：
- 备忘
- Query的选择器是和css选择器类似的
- $("tt").css("color","red"); 无需判断tt元素是否存在
- if($("tt").length>0) …; 判断tt存在
- 基本选择器
- $("#selector")
- #(".select")
- $("div")
- $("*")
- $("div,span,p.class")
- 层次选择器
- $("div span") // div下所有的span
- $("div > span") // div的span子元素
- $(".one + div") // 紧挨class为.one的下一个元素 = $(".one").next("div")
- $("#two~div") // id为two后面所有的div元素 = $("#two").nextAll("div") << $("#two").siblings("div")
- 过滤选择器
- 基本过滤选择器
- $("div:first")
- $("div:last")
- $("div:not(.one)") or $("div:not(#two)") //not(selector)
- $("div:even")
- $("div:odd")
- $("div:eq(3)") or $("div:gt(3)") or $("div:lt(3)")
- $(":header).css("color","red"); //改变所有h1,h2…标题
- $("animated") //正在执行动画的元素
- 内容选择过滤器
- $("div:contains('匹配内容')") //含有文本“匹配内容”的div
- $("div:empty") //空元素
- $("div:has(selector)") // 含有selector的元素
- $("div:parent") //匹配div的父元素
- 可见性过滤选择器
- $("div:visible")
- $("div:hidden") //包括display : none、input : hidden、visibility : hidden这样的元素
- 属性过滤器
- $("div[title]") //匹配有title的div
- $("div[title=test]")
- $("div[title!=test]")
- $("div[title^=te]") //以te开头的title
- $("div[title$=est") //以est收尾的title
- $("div[title*=te]") //title包含te
- $("div[id][title*=es]") //div中有id属性且title包含es字符
- 子元素过滤选择器
- $("div.one :nth-child(2)") //div（class=one）下第二个子元素
- $("div.one :nth-child(even)") or $("div.one :nth-child(odd)") or $("div.one :nth-child(3n)")
- $("div.one :first-child") //第一个子元素
- $("div.one :last-child") //最后一个子元素
- $("div.one :only-child") //div中只有一个子元素才能匹配
- 表单对象属性过滤选择器
- $("#form1 :enabled") //form1中所有可用元素
- $("#form1 :disabled") //form1中所有不可用元素
- $("input :checked") //单选框、复选框
- $("select :selected") //下拉列表
- 表单选择器
- :input、:text、:password、:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden;
- 分别对应于表单各类元素
- 选择器的注意事项
- 选择器中含有*,#,(,[等字符，使用\\双斜线转义：$("id\\#b")转义id#b、$("id\\[1\\]")转义id[1]
- $(".test :hidden") 和 $(".test:hidden")是不同的，第一个选择的是class=test元素包含的hidden的子元素，第二个是hidden的class=test的元素。前一个是后代选择器、后一个是过滤选择器
- 一个生动的选择器的例子： $("ul li:gt(5):not(:last)").hide(); 在一个列表（ul）中隐藏第5个以后，但不包括最后一个（显示更多）的li，这个就是精简显示。
- 基本过滤选择器
jQuery中的DOM操作：
- DOM操作的分类
- DOM Core
- HTML DOM
- CSS DOM
- jQuery中的DOM （使用jQuery的选择器）
-
- 查找节点
- 查找元素节点 $("ul li:eq(1)")
- 查找属性节点 $("p").attr('title')
- 创建节点
- 创建元素节点
- var $li_1 = $("<li></li>");
- $("ul").append($li_1).append($li_2);
- 创建文本节点
- var $li_1 = $("<li>这里的文字就是你创建的文本节点，不能脱离元素节点单独存在</li>");
- 创建属性节点
- var $li_1 = $("<li title="这里是属性节点，同样不能独立存在">文本节点</li>");
- 创建元素节点
- 插入节点
- $("p").append("<b>你好</b>"); //在p内追加内容
- $("<b>你好</b>").appendTo("p");
- $("p").prepend("<b>你好</b>"); //在p内前置内容
- $("<b>你好</b>").prependTo("p");
- $("p").after("<b>你好</b>"); //在p后插入内容
- $("<b>你好</b>").insertAfter("p");
- $("p").before("<b>你好</b>"); //在p前插入内容
- $("<b>你好</b>").insertBefore("p");
- 删除节点
- $("ul li:eq(2)").remove();
- $li_1 = $("ul li:eq(1)").remove();
- $li_1.appendTo("ul");
- $("ul li:eq(2)").empty(); //清空选择的li节点
- $("ul li:eq(2)").remove();
- 复制节点
- $("li:eq(3)").clone(true).appentTo("ul"); //把li节点复制到ul中，clone的参数true表示同时复制元素绑定的事件。留空表示不复制事件
- 替换节点
- $("p").replaceWith("<strong>替换文本</strong>");
- $("<strong>替换文本</strong>").replaceAll("p");
- 节点替换以后，绑定在原来节点上的事件消失
- 包裹节点
- $("strong").wrap("<b></b>"); //把匹配的strong每个用b包裹起来
- $("strong").wrapAll("<b></b>"); //同时包裹所有匹配的strong
- $("strong").wrapInner("<b></b>"); //把匹配的strong的内容用b包裹起来
- 属性操作
- var p_txt = $("p").attr("title");
- $("p").attr("title","设置的标题");
- $("p").attr({"title":"设置的标题","name":"设置的名字"});
- $("p").removeAttr("title"); // 删除title
- 样式操作
- var p_class = $("p").attr("class");
- $("p").attr("class","pclass");
- $("p").addClass("otherclass");
- 合并多个class
- 最后边出现的相同css内容覆盖前面的
- $("p").removeClass(); // 删除p所有的样式
- $("p").removeClass("otherclass") // 删除p中的otherclass样式
- $("p").addClass("class").toggleClass("otherclass"); // 切换样式
- $("p").hasClass("another"); // 是否含有another样式
- 等价于 $("p").is(".another")
- 设置和获取html、文本和值
- var p_html = $("p").html();
- $("p").html("<strong>设置的html的内容</strong>");
- html方法可以用于html文档，不适用于xml
- var p_text = $("p").text(); // 获取p中的文本内容。和html不同的是，html返回p中的html代码，其中包括文本
- $("p").text("你最喜欢的内容是？");
- text方法对html和xml都有效
- var input_val = $("input").val();
- val方法获取文本框，下拉列表，单选框,多选框的值
- $("input").val("这里是设置的新值");
- var p_html = $("p").html();
- 遍历节点
- var ul_length = $("ul").children().length; // children方法取得匹配元素的子元素集合
- var ul_the_next = $("p").next(); // next方法取得和匹配元素紧挨着的下一个同辈元素
- var p_the_prev = $("ul").prev(); // prev方法取得和匹配元素紧挨着的前一个同辈元素
- var li_the_siblings = $("ul li:eq(1)").siblings(); // 取得匹配元素的同辈元素（不限元素类别）
- 除此之外jQuery还有很多遍历节点的方法，如closest(), find(), nextAll(), prevAll(), parent(), parents()等。
- CSS-DOM方法
- var p_color = $("p").css("color");
- $("p").css("color","red");
- $("p").css({"color":"red","font-size":"14px"});
- $("p").css("opacity","0.5");
- jQuery已经处理好了透明度的兼容问题，所以在这里这样使用是最为方便快捷的
- $("p").css("height") or $("p").height(); // jQuery的css快捷方法
- jQuery还有几个经常用的方法：
- offset() 方法，获取元素在当前视窗的相对偏移
- var p_offset = $("p").offset();
- var p_left = p_offset.left;
- var p_top = p_offset.top;
- position()方法 ， 获取元素相对于最近的被relative或者absolute的父祖级节点的相对偏移
- var p_position = $("p").position();
- var p_left = p_position.left;
- var p_top = p_position.top;
- scrollTop()和scrollLeft() , 获取元素的滚动条距顶端的距离和距左侧的距离
- var scrollTop = $("p").scrollTop();
- var scrollLeft = $("p").scrollLeft();
- $("textarea").scrollTop(300); // 设置元素的垂直滚动条滚动到相应的位置
- $("textarea").scrollLeft(300); // 设置元素的水平滚动条滚动到相应的位置
- offset() 方法，获取元素在当前视窗的相对偏移
- var p_color = $("p").css("color");
- 查找节点
jQuery中的事件和动画：
- jQuery中的事件
- 加载DOM
- $(document).ready(); // DOM树解析完毕即执行
- $(window).load(); // 在所有内容准备好时触发
- $(function(){//代码}); // 简写方式 = $(document).ready();
- 事件绑定
- bind(type[,data],fn) //type为jQuery的事件类型，如blur,focus,click,keyup,resize,load,scroll,unload,mousedown,mouse up,change,select等。data可选，作为event.data传给fn。fn为绑定的数据处理函数
- $("#panel h5.head").bind("click",function(){$(this).next("div.content").show()}); //点击标题显示下面隐藏的div（class=content）中的内容。
- 合成事件
- hover(enter,leave)
- jQuery用于模拟鼠标悬停事件。当移动到元素上面时，触发第一个事件。当移出元素时，触发第二个事件
- $(function(){$("#panel h5.head").hover(function(){$(this).next("div.content").show},function(){$(this).next("div.content").hide();});});
- toggle(fn1,fn2,fn3,fn4…);
- 第一次单击触发fn1，第二次单击触发fn2….
- toggle()还有个作用是，切换元素的可见状态
- hover(enter,leave)
- 事件冒泡
- 定义冒泡
- 举例来说，点击了一个span，触发了一个click事件，但这个同时依次触发了span外的div，body的click事件。这就是js定义的事件冒泡。
- 阻止冒泡
- 事件对象
- $(element).bind("click",function(event){ // event就是事件对象}); //当element单击时，event就被创建了，但是事件处理函数执行完毕后，event即被销毁。
- 停止事件冒泡
- event.stopPropagation(); // 停止事件冒泡
- 阻止元素的默认行为
- event.preventDefault(); // 如果event在button上，则阻止button的submit
- return false;更为简洁，但其同时达成2和3。具体情况下要辨证使用。
- 事件捕获
- 事件捕获和事件冒泡是刚好完全相反的两个过程 // 顺序是 body -> div -> span
- 不是所有浏览器都支持事件捕获
- jQuery不支持事件捕获
- 事件对象
- 定义冒泡
- 事件对象的属性
- event.type()方法获取事件的类型
- event.preventDefault()方法阻止事件对象的默认行为
- event.stopPropagation()方法阻止事件冒泡
- event.target属性 获取到触发事件的元素 // 元素为event.target
- event.relatedTarget属性 // 元素为event.relatedTarget
- 对于mouseout事件，得到的是mouseout后即将进入的元素。对于mouseover，得到的是mouseout后即将离开的元素。
- event.pageX , event.pageY 属性
- 获取到光标相对于整个页面的x坐标和y坐标
- event.which属性
- 在鼠标单击事件中获取鼠标的左中右键，值分别是1，2，3
- event.metaKey属性
- 在键盘事件中获取ctrl按键
- event.orginalEvent
- 指向原始的事件对象
- 移除事件
- event.unbind([type][,data]);移除绑定
- $("a.unbind").unbind(); // 移除所有绑定事件
- $("a.unbind").unbind("click"); // 移除所有绑定的点击事件
- 单独移除一个绑定事件
- $("a.bind").bind("click",myfun1 = function(){ // 事件处理 });
- $("a.bind").unbind("click",myfun1);
- $("a.unbind").one();
- 这个方法适用于只触发一次，之后就要立即解除绑定的情况
- one(type[,data],fn) // 和bind的用法一样
- 模拟操作
- jQuery使用trigger()方法完成模拟操作
- $("#btn").trigger("click"); // 当页面装载完毕后就会立刻输出想要的结果
- $("#btn").trigger("myclick"); // 可以触发自定义事件
- $("$btn").triggerHandler("click"); // 不会触发浏览器默认事件
- 其他用法
- 绑定多个事件类型
- $("div").bind("mouseover mouseout",function(){$(this).toggleClass("over");});
- 添加事件命名空间
- $("div").bind("click.plugin",function(){.....});
- $("div").bind("mouseover.plugin",function(){......});
- $("div").bind("dbclick",function(){.......});
- $("div").unbind(".plugin"); // 移除plugin命名空间中的事件
- 相同事件名称，不同命名空间执行方法
- $("div").bind("click.plugin",function(){.....});
- $("div").bind("click",function(){......});
- $("div").trigger("click!"); // 仅执行不包含在命名空间中的方法
- $("div").trigger("click"); // 执行所有click事件
- 绑定多个事件类型
- 加载DOM
- jQuery中的动画
- show() 和 hide() 方法
- 要求工作在xhtml标准模式下，否则会引起抖动
- show("slow") 和 show(1000) 触发动画事件
- 同时改变元素的高、宽和不透明度，最后设置display=none
- fadeIn() 和 fadeOut() 方法
- 只改变不透明度，最后设置display=none
- 同样可以设置动画时间
- slideUp() 和 slideDown() 方法
- 只改变元素的高度，且分别是由下到上隐藏和由上到下显示
- slow、normal、fast参数分别代表 0.6、0.4、0.2秒
- 自定义动画方法animate()
- 语法： animate(params, speed, callback) params：样式属性和值的映射 speed：速度 callback：回调函数
- $("#panel").animate({left:"500px"}, 3000); // panel元素3秒向右移动到距左边界500px的位置
- params = {left:"+=50px"} // 表示在当前位置累加或累减
- params = {left:"500px",height:"200px"} // 多重动画
- $("#panel").animate({left:"500px"},3000).animate({height:"200px"},3000); // 按顺序执行动画
- $("#panel").click(function(){$(this).animate({left:"300px",height:"200px",opacity:"1"},3000).animate({top:"200px",width:"200px",300}).fadeOut(300);});
- 使用动画回调函数对非动画方法进行排队，原因是如果写在动画方法队列里面并不能保证按顺序执行，有可能一开始就执行了。
- 停止动画和判断是否处于动画状态
- stop([clearQueue][,gotoEnd]) // 停止动画的状态
- clearQueue 表示清空未执行完的动画队列，gotoEnd表示直接将正在执行的动画跳转到末状态
- stop()不带参数会结束当前执行的动画，并立即执行队列中的下一个动画
- 等同于stop(false,true);
- jQuery只能设置正在执行的动画的最终状态，没有提供直接到达未执行动画队列的最终状态的方法
- $(element).is(":animated") 元素是否正处于动画状态
- stop([clearQueue][,gotoEnd]) // 停止动画的状态
- 其他动画方法
- toggle(speed[,callback])
- slideToggle(speed[,callback]) 通过元素高度的变化
- fadeTo(speed,opacity[,callback])
- 撒旦发射
- <pre></pre>
- show() 和 hide() 方法
$(
'tbody>tr'
).click(
function
(){
if
($(
this
).hasClass(
"highlight"
)) {
$(
this
)
.removeClass(
"highlight"
)
.find(
":checkbox"
).attr(
"checked"
,
false
);
}
else
{
$(
this
)
.addClass(
"highlight"
)
.find(
":checkbox"
).attr(
"checked"
.
true
);
}
});
-
- 撒旦法
- 表单应用
- 单行文本框应用
- $(":input").focus(function(){$(this).addClass("focus")});
- 多行文本框应用
- 高度变化
var $comment = $("#comment");
$comment.height($comment.height() +- 50);
if($comment.is(":animated"))
$comment.animate({height : "+=50"},300); - 滚动条变化
- $comment.animate({scrollTop : "+=50"},400);
- 高度变化
- 复选框应用
- // 全选是
- 单行文本框应用
$("CheckAll").click(function() {
$("[name=items]:checkbox").attr("checked",true);
});
-
- //反转选择项
- $("CheckRev").click(function(){
$("[name=items]:checkbox).each(function(){
$(this).attr("checked",!$(this).attr("checked"));
// 或者也可以这样写
}); - });
-
-
-
$("CheckRev").click(function() {
$("[name=items]:checkbox").each(function(){
$(this).attr("checked",!$(this).attr("checked"));
//或者
this.checked != this.checked;
});
});
- //输出选中项
$("#send").click(function() {
var str = '';
$("[name=items]:checkbox").each(function() {
str += $(this).val();
});
});
- //用checkbox控制
$("#checkbox").click(function() {
$("[name=items]:checkbox").attr("checked",this.checked);
});
-
- 下拉框应用
-
-
var $options = $("#select1 option:selected");
$options.appendTo("#select2"); // 追加和删除可以直接用appendTo完成
-
$("#select").dblclick(function(){
$("option:selected",this).appendTo("#select2");
});
-
- 表单验证
-
- // blur , keyup , focus 实现表单实时验证
$("form :input").blur(function(){
//处理代码
}).keyup(function(){
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});
- // 一个表单验证示例（form验证的骨架代码）
$("form :input").blur(function(){
var $parent = $(this).parent(); // 用于附加提示信息
if( $(this).is('#username') ) {
// 处理代码…..
}
if( $(this).is('#password') ) {
// ……..
}
});
- // blur , keyup , focus 实现表单实时验证
-
- 表格应用
-
- // 隔行变色
$(function(){
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
});
- // 单击tr高亮
$(function(){
$("tbody>tr").click(function(){
$(this)
.addClass("highlight")
.silibings().removeClass("highlight");
});
});
- // 复选框，tr高亮
- // 隔行变色
-
-
$("tr.parent").click(function(){
$(this)
.toggleClass("selected")
.sibilings(".child_"+this.id).toggle(); //隐藏用id划分的子行，形成开闭效果。
});
$('tbody>tr').click(function(){if($(this).hasClass("highlight")) {$(this).removeClass("highlight").find(":checkbox").attr("checked",false);} else {$(this).addClass("highlight").find(":checkbox").attr("checked".true);}});
-
扫一扫
748
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
