jquery的事件总结实用篇

1、jquery监听radion被选中的事件:

页面: <td class="infradio" width="230"><input type="radio" name="infprice" checked="checked" value="134,34,23"/></td><br>

js: $(".adtradio :radio").change(function(){

console.log($("input[name='adtprice']:checked").val() );--获取到被选中的radio的值

});

2、jquery each事件跳出循环的方式为return false,采用break会报错。

3、拿到当天的日期

+ 1)

// 得到前N天或后N天的日期 function showdate(n) { var d = new Date(); var uom = new Date(d- 0 + n * 86400000); uom = uom.getFullYear() + "-" + (uom.getMonth() } return uom; + "-" + uom.getDate();

4、

function selectInsurance(obj){

var va =$(obj).find("option:selected").val();

$.each($("#passengerDiv > .passBox"), function(n, value){ $(value).find("#insuranceCodeselect").val(va); });

}

5、 jQuery获取Select选择的Text和Value:

选择一项试试看

语法解释:

1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发

2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text

3. var checkValue=$("#select_id").val(); //获取Select选择的Value

4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值

5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值

jQuery设置Select选择的Text和Value:

$('input[name="test"]:checked').val();//获取checkbox值

语法解释:

1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中

2. $("#select_id ").val(4); //设置Select的Value值为4的项选中

3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中

jQuery添加/删除Select的Option项:

点击一次,Select将追加一个Option

点击将在Select第一个位置插入一个Option

点击将删除Select中索引值最大Option(最后一个)

语法解释:

1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)

2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)

3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)

4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)

5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option

5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option

6、

jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如

$("span").parent()或者$("span").parent(".class")

jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素

jQuery.children(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点

jQuery.contents(),返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个

jQuery对象返回,children()则只会返回节点

jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点

jQuery.prevAll(),返回所有之前的兄弟节点

jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点

jQuery.nextAll(),返回所有之后的兄弟节点

jQuery.siblings(),返回兄弟姐妹节点,不分前后

jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分,而jQuery.find()<br> //jQuery解决

var a1 = $("#dom").children();//全部子节点;

var b2 = $("#dom").parent();//父节点;

var c3 = $("#dom").next();//下一个兄弟节点

var d4 = $("#dom").prev();//上一个兄弟节点

var e5 = $("#dom").children(":first");//第一个子节点 var f6 = $("#dom").children(":last");//最后一个子节点 <br>

 

第二篇:网站开发常用jQuery插件总结

网站开发常用jQuery插件总结(二)弹出层插件Lightbox_me

网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆、注册、设置等窗口。而这些窗口就是层,弹出的窗口就是弹出层。jQuery中弹出层插件很多,但有些在html5+css3浏览器下,支持完美。而在例如ie8一下的浏览器下显示不出应有的效果。例如jquery.avgrund插件在ie8下就无法显示。

本文介绍的插件Lightbox_me可以完美的支持chrome,firefox和ie7,ie8,ie9等主流浏览器。

1.Lightbox_me插件功能

实现弹出层操作

2.Lightbox_me官方地址

http://buckwilson.me/lightboxme/

在网页的下面有演示地址和常用属性。

3.Lightbox_me使用方法

1.首先引用jquery.js与jquery.lightbox_me.js

<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.lightbox_me.js"></script>

2.使用的代码

<script type="text/javascript">
$(function() {
    $('#login').click(function(e) {
        $('#loginbox').lightbox_me({
            centered: true, 
            onLoad: function() { 
                $('#loginbox').find('input:first').focus()
            }
        });
        e.preventDefault();
    });
    $('#cancel').click(function(){
        $('#loginbox').trigger('close');
        //alert('aaa');
    });
});
</script>

4.Lightbox_me修改样式

弹出层的样式修改非常简单,只需要会使用css就可以了。例如一下代码:

#loginbox{
    width:400px;
    display:none;
    background:white;
    border:1px solid #ccc;
}
body {
    font-size:12px;
    font-family:微软雅黑;
}
.loginbox-title {
    background: #eef2f7;
border-bottom: 1px solid #ccc;
    margin-bottom:10px;
    padding:8px 0;
    font-size:14px;
    text-align:center;
    
}
.loginbox-footer{
    padding:8px 0;
    border-top:1px solid #ccc;
    text-align:center;
    background:#eef2f7;
}
table {
    width:98%;
    margin:0 8px;
}
th, td {
    padding:8px 0;
}
th {
    text-align:left;
}
.big {
    padding:5px 18px;
}

显示结果:

演示地址:

http://www.1100w.com/wp-content/uploads/2013/09/index-2.html

相关推荐