CQ-CSER

计算机爱好者

jquery自学笔记1

Posted on | 二月 24, 2010 | No Comments

注释是我加的，可能有误
$(function(){
3 var $comment = $(‘#comment’); //获取评论框
4 $(‘.bigger’).click(function(){ //放大按钮绑定单击事件
5 if( $comment.height() < 500 ){
6 $comment.height( $comment.height() + 50 ); //重新设置高度，在原有的基础上加50
7 }
8 })
9 $(‘.smaller’).click(function(){//缩小按钮绑定单击事件
10 if( $comment.height() > 50 ){
11 $comment.height( $comment.height() – 50 ); //重新设置高度，在原有的基础上减50
12 }
13 });
14 });
//直接用的.height()，没用.val
 
$(‘.up’).click(function(){ //向上按钮绑定单击事件
5 if(!$comment.is(“:animated”)){//判断是否处于动画
6 $comment.animate({ scrollTop : “-=50″ } , 400);
7 }
8 })

 

$(function(){
3 //全选
4 $(“#CheckedAll”).click(function(){
5 $(‘[name=items]:checkbox’).attr(‘checked’, true);
6 });
7 //全不选
8 $(“#CheckedNo”).click(function(){
9 $(‘[type=checkbox]:checkbox’).attr(‘checked’, false);
10 });
11 //反选
12 $(“#CheckedRev”).click(function(){
13 $(‘[name=items]:checkbox’).each(function(){
14 //此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。
15 //$(this).attr(“checked”, !$(this).attr(“checked”));
16
17 //直接使用JS原生代码，简单实用
18 this.checked=!this.checked;
19 });
20 });
21 //输出值
22 $(“#send”).click(function(){
23 var str=”你选中的是：\r\n”;
24 $(‘[name=items]:checkbox:checked’).each(function(){
25 str+=$(this).val()+”\r\n”;
26 })
27 alert(str);
28 });
29 })

 

$(“#CheckedAll”).click(function(){
5 if(this.checked){ //如果当前点击的多选框被选中
6 $(‘input[type=checkbox][name=items]‘).attr(“checked”, true );
7 }else{
8 $(‘input[type=checkbox][name=items]‘).attr(“checked”, false );

 

$(function(){
3 //全选
4 $(“#CheckedAll”).click(function(){
5 //所有checkbox跟着全选的checkbox走。
6 $(‘[name=items]:checkbox’).attr(“checked”, this.checked );
7 });
8 $(‘[name=items]:checkbox’).click(function(){
9 //定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提升程序效率。
10 var $tmp=$(‘[name=items]:checkbox’);
11 //用filter方法筛选出选中的复选框。并直接给CheckedAll赋值。
12 $(‘#CheckedAll’).attr(‘checked’,$tmp.length==$tmp.filter(‘:checked’).length);
13
14 /*
15 //一行做过多的事情需要写更多注释。复杂选择器还可能影响效率。因此不推荐如下写法。
16 $(‘#CheckedAll’).attr(‘checked’,!$(‘[name=items]:checkbox’).filter(‘:not(:checked)’).length);
17 */
18 });
19 //输出值
20 $(“#send”).click(function(){
21 var str=”你选中的是：\r\n”;
22 $(‘[name=items]:checkbox:checked’).each(function(){
23 str+=$(this).val()+”\r\n”;
24 })
25 alert(str);
26 });
27});

 

$(function(){
3 //移到右边
4 $(‘#add’).click(function() {
5 //获取选中的选项，删除并追加给对方
6 $(‘#select1 option:selected’).appendTo(‘#select2′);
7 });
8 //移到左边
9 $(‘#remove’).click(function() {
10 $(‘#select2 option:selected’).appendTo(‘#select1′);
11 });
12 //全部移到右边
13 $(‘#add_all’).click(function() {
14 //获取全部的选项,删除并追加给对方
15 $(‘#select1 option’).appendTo(‘#select2′);
16 });
17 //全部移到左边
18 $(‘#remove_all’).click(function() {
19 $(‘#select2 option’).appendTo(‘#select1′);
20 });
21 //双击选项
22 $(‘#select1′).dblclick(function(){ //绑定双击事件
23 //获取全部的选项,删除并追加给对方
24 $(“option:selected”,this).appendTo(‘#select2′); //追加给对方
25 });
26 //双击选项
27 $(‘#select2′).dblclick(function(){
28 $(“option:selected”,this).appendTo(‘#select1′);
29 });
30});
注意appendTo用法，用id传递的，应该能传到input里面吧
表单验证：

$(“tr:contains(‘王五 ‘)”).addClass(“selected”); //通过contains选择 
// $(‘table :radio:checked’).parent().parent().addClass(‘selected’);

 //简化:
$(‘table :radio:checked’).parents(“tr”).addClass(‘selected’);
 //再简化:  //$(‘tbody>tr:has(:checked)’).addClass(‘selected’); //has，精辟啊，再看下面这个
 
 
var hasSelected=$(this).hasClass(‘selected’);
 //如果选中，则移出selected类，否则就加上selected类
 $(this)[hasSelected?"removeClass":"addClass"](‘selected’)
//查找内部的checkbox,设置对应的属性。
.find(‘:checkbox’).attr(‘checked’,!hasSelected);
用？：语句，awesome
 

 

// 如果单选框默认情况下是选择的，则高色.

 

 

$(function(){
4 //如果是必填的，则加红星标识.
5 $(“form :input.required”).each(function(){
6 var $required = $(“<strong class=’high’> *</strong>”); //创建元素
7 $(this).parent().append($required); //然后将它追加到文档中
8 });
9 //文本框失去焦点后
10 $(‘form :input’).blur(function(){ // 为表单元素添加失去焦点事件
11 var $parent = $(this).parent();
12 //验证用户名
13 if( $(this).is(‘#username’) ){
14 if( this.value==”" || this.value.length < 6 ){
15 var errorMsg = ‘请输入至少6位的用户名.’;
16 $parent.append(‘<span>’+errorMsg+’</span>’);
17 }else{
18 var okMsg = ‘输入正确.’;
19 $parent.append(‘<span>’+okMsg+’</span>’);
20 }
21 }
22 //验证邮件
23 if( $(this).is(‘#email’) ){
24 if( this.value==”" || ( this.value!=”" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
25 var errorMsg = ‘请输入正确的E-Mail地址.’;
26 $parent.append(‘<span>’+errorMsg+’</span>’);
27 }else{
28 var okMsg = ‘输入正确.’;
29 $parent.append(‘<span>’+okMsg+’</span>’);
30 }
31 }
32 })
33})

 

$(function(){
3 $(“tr:odd”).addClass(“odd”); /* 奇数行添加样式*/
4 $(“tr:even”).addClass(“even”); /* 偶数行添加样式*/
5 })
odd奇数，even偶数，gt大于lt小于eq等于，还有#~^+>这些符号的用法你还记得么

相关文章:

  1. jquery自学笔记2
  2. jquery学习笔记3
  3. jQuery方法大全
  4. create-an-options-page-for-your-WordPress-theme
  5. 26JQUERY-SKILLS
Category: JS
Tags: >

评论|Comments

留言|Leave a Reply





  • Archives

  • SUNSHINE

    • About

    本博客采用创作共用版权协议,要求署名、非商业用途和保持一致. 转载本博客内容也遵循“署名-非商业用途-保持一致”的创作共用协议.

    订阅

    Search

    Admin