锋利的jquery 学习笔记

Menu

第1章 认识jQuery

1.3 jQuery代码的编写
1.4 jQuery对象和DOM对象
  • 1.4.1 DOM对象和jQuery对象简介
  • 1.4.2 jQurey对象和DOM对象的相互转换
  • 1.5 解决jQuery和其他库的冲突

第2章 jQuery选择器

  • 2.1 jQuery选择器是什么
  • 2.2 jQuery选择器的优势
  • 2.3 jQuery选择器
  • 2.5 选择器中的一些注意事项
  • 2.7 其他选择器

第3章 jQuery中的DOM操作

  • 3.1 DOM操作的分类
  • 3.2 jQuery中的DOM操作

第4章 jQuery中的事件和动画

  • 4.1 jQuery中的事件
  • 4.2jQuery中的动画
    • JQuery中animate的一些坑Script

第5章 jQuery对表单、表格的操作及更多应用

  • 5.1表单应用
  • 5.2表格应用
  • 5.3其他应用

第一章 认识jQuery

1.3 jQuery代码的编写
  • 在页面中引入jQuery
  • 放在HTML页面的head之间;

    

  • 1.3.2 编写简单的jQuery代码
  • $ 等价于 jQuery
  • 编写第1个jQuery程序

  • 等待Dom元素加载完毕 简写形式

锋利的jquery 学习笔记_第1张图片
window.onload 和 $(document).ready的区别
  • 1.3.3 jQuery代码风格
  1. 链式操作风格

  • (1)对于同一个对象不超过3个操作的,可以直接写成一行。代码如下:
$("li").show().unbind("click");
  • (2)对于同一个对象的较多操作,建议每行写一个操作。代码如下:

  • (3)对于多个对象的少量操作,可以每个对象写一行,如果涉及子元素,可以考虑适当地缩进。例如上面提到的代码:
$(this).addClass("highlight")
.children("li").show().end()
.siblings().removeClass("highlight")
.children("li").hide();
  • (4)程序块严格采用缩进风格书写,能保证代码清晰易读,风格一致。
  1. 为代码添加注释

1.4 jQuery对象和DOM对象
  • 1.4.1 DOM对象和jQuery对象简介
  1. DOM对象
var someElement = document.getElementById("id")
  1. jQuery对象
$("#foo").html();  //获取id为foo的元素内的html代码。.html()是jQuery里的方法
  • 这段代码等同于:
document.getElementById("foo").innerHTML;

  • 1.4.2 jQurey对象和DOM对象的相互转换
  • 如果获取的对象是jQuery对象,那么在变量前面加上$,例如:
var  $variable   =   jQuery对象;
  • 1.jQuery对象转成DOM对象
  • jQuery提供了两种方法将一个jQuery对象转换成DOM对象,即[index]和get(index)。
    • (1)jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象。

    • (2)另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象。

// [index]
var  $cr   =   $("#cr");                     //jQuery对象
var  cr    =   $cr[0];                       //DOM对象
alert( cr.checked )                          //检测这个checkbox是否被选中了

// get(index)
var $cr   =    $("#cr");                     //jQuery对象
var cr    =    $cr.get(0);                   //DOM对象
alert(cr.checked)                             //检测这个checkbox是否被选中了

  • 2. DOM对象转成jQuery对象
  • 对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。方式为$(DOM对象)。
var cr  =  document.getElementById("cr");      //DOM对象
var $cr  =  $(cr);                             //jQuery对象
  • 转换后,可以任意使用jQuery中的方法。通过以上方法,可以任意地相互转换jQuery对象和DOM对象。
  • 注意:平时用到的jQuery对象都是通过$()函数制造出来的,$()函数就是一个jQuery对象的制造工厂。

  • 1.5 解决jQuery和其他库的冲突
  • 1. jQuery在其他库之后导入
  • 在其他库和jQuery 库都被加载完毕后可以在任何时候调用 noConflict() 方法。noConflict() 方法会释放对 $ 标识符的控制权,这样其他脚本就可以使用它了。






    1. 利用自定义快捷方式
var $j = jQuery.noConflict();           //自定义一个快捷方式
$j(function(){                            //使用jQuery,利用自定义快捷方式—$j
    $j("p").click(function(){
        alert( $j(this).text() );
        })
    })
$("pp").style.display = 'none';         //使用prototype.js隐藏元素

    1. 定义匿名函数并设置形参为$
jQuery.noConflict();                     //将变量$的控制权让渡给prototype.js
(function($){                             //定义匿名函数并设置形参为$
    $(function(){                       //匿名函数内部的$均为jQuery
        $("p").click(function(){          //继续使用 $()方法
            alert($(this).text() );
        });
    });
})(jQuery);                               //执行匿名函数且传递实参jQuery
$("pp").style.display = 'none';           //使用prototype

  • 2. jQuery在其他库之前导入
  • 只能使用jQuery() 了吧。

第2章 jQuery选择器

  • 2.1jQuery选择器是什么
$("#myP").click(function () {
    alert("click on paragraph!")
})

  • 2.2 jQuery选择器的优势
  • 根据返回的数组的长度来判断是否获取到元素
if ($("#tt").length > 0 ) {
//do something
}
  • 或者转化成DOM对象来判断,代码如下:
if ($("#tt")[0]) {
//do something
}

  • 2.3 jQuery选择器

  • jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

  • 2.3.1 基本选择器

    $("#one").css("background","cyan");
    $(".mini").css("background", "cyan");
    $("div").css("background", "cyan");
    $("*").css("background", "cyan");
    $("span,#two").css("background", "cyan")

  • 2.3.2 层次选择器
    $("body div").css("background", "cyan"); // 选择body内所有div元素的背景色
    $("body>div").css("background", "cyan"); // 选择body内所有div子元素的背景色
    $(".one+div").css("background", "cyan"); // 选择class为one的后面div同辈元素
    $(".one").next("div").css("color", "red") // 等价于$(".one+div")
    $("#two~div").css("background", "cyan"); // 选择id为two后面的所有同辈元素为div的元素;
    $(".one").nextAll("div").css("color", "red")  // 等价于 $("#two~div")
    $(".one").siblings("div").css("color", "red")  // 选择于.one 同辈的所有div元素;

  • 2.3.3 过滤选择器
  • 过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与 CSS中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
  1. 基本过滤选择器
    // $("div:first").css("color", "red")   // 选择第一个div元素
    // $("div:last").css("color", "red")    // 选择最后一个div元素
    // $("div:not(.one)").css("color", "red")   // 选择class不是one的所有div元素
    // $("div:even").css("background", "pink")  // 选择下标为双数的div元素
    // $("div:odd").css("background", "pink") // 选择下标为单数的div元素
    // $("div:eq(6)").css("background", "pink")  // 选择下标为6的div元素
    // $("div:gt(6)").css("background", "pink")  // 选择下标大于6的div元素(不包含6)
    // $("div:lt(6)").css("background", "pink") // 选择下标小于6的div元素(不包含6)
    // $(":header").css("color", "pink"); //选择所有head元素
    // $(":animated")  // 选择正在执行动画的所有元素;
    // $(":focus") // 选择当前获取焦点的所有元素;

  1. 内容过滤选择器
  • 内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。
    $("div:contains(di)").css("color", "pink") // 选择含有“di”文本的div元素
    $(":empty").css("background", "cyan")  // 选择空元素
    $("div:has(.mini)").css("background", "pink") // 选择含有class为mini元素的div元素
    $("div:parent").css("background", "pink")  // 选择不为空的div元素

  1. 可见性过滤选择器
  • 可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。
  • 在可见性选择器中,需要注意选择器:hidden,它不仅包括样式属性display为“none”的元素,也包括文本隐藏域()和visibility:hidden之类的元素。
// show()是jQuery的方法,它的功能是显示元素,3000是时间,单位是毫秒。
    $("div:visible").hide(3000) // 选择所有可见的div元素
    $("div:hidden").show(3000) // 选择所有隐藏的div元素 

  1. 属性过滤选择器
  • 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
    $("div[title]").css("background", "pink"); // 选择属性有title的div元素
    $("div[title=test]").css("background", "pink"); // 选择属性title的值为test的div元素
    $("div[title!=test]").css("background", "pink"); // 选择属性title的值不为test的div元素(没有title属性的也会被选择)
    $("div[title^=en]").css("background", "pink"); // 选择属性title的值以en开头的div元素
    $("div[title$=en]").css("background", "pink"); // 选择属性title的值以en结尾的div元素
    $("div[title*=st]").css("background", "pink"); // 选择属性title的值含有st的div元素
    $("div[class][id=two]").css("background", "pink"); // 选择有class属性并且id属性值为two的div元素
    $("div[title|=en]").css("background", "pink")   // 选择title属性的值为en 或 以en为前缀的(en-)div元素
    $("div[title~=en]").css("background", "pink")    // 选择title属性用空格分隔的值中含有en的div元素;
  1. 子元素过滤选择器
    :nth-child(n|even|odd|formula)
    //  匹配第几个子元素。从1开始索引。
    $("div:nth-child(n)")

    //  匹配偶数,:nth-child(even)第一行算1。element:even第一行算0;
    $("div:nth-child(even)")

    //  匹配奇数,:nth-child(odd)第一行算1。element:odd第一行算0;
    $("div:nth-child(odd)")

    // 规定哪个子元素需通过公式 (an + b) 来选取。(2n+1)= 频率是2,+1是从第一个元素开始;+1可以省略。
    $("div:nth-child(2n+1)").css("background", "yellow") // 选择div子元素

    // 选择父元素里的第一个p子元素;
    $("p:first-child")

    // 选择父元素里的最后一个p子元素;
    $("p:last-child")

    // 选择的元素为父元素里的唯一的子元素,如果父元素里有其他的子元素则不匹配;
    $("div:only-child").css("background", "yellow")

  1. 表单对象属性过滤选择器
  • 此选择器主要是对所选择的表单元素进行过滤,例如选择被选中的下拉框,多选框等元素
    // 选中form元素下面的所有 可用 的input元素
    $("#form input:enabled").val("input here")

    // 选中form元素下面的所有 不可用 的input元素
    $("#form input:disabled").val("disabled")

    // 选择input所有checked的元素
    $("input:checked").length

    // 选择select 下面所有选中的元素
    $("select :selected").css("color","red")

  • 2.3.4 表单选择器
  • 为了使用户能够更加灵活地操作表单,jQuery中专门加入了表单选择器。利用这个选择器,能极其方便地获取到表单的某个或某类型的元素。
 // 选择所有的, 
        
// jQuery代码 $(function(){ var $comment = $('#comment'); //获取评论框Obj $('.bigger').click(function(){ //“放大”按钮绑定单击事件 if( $comment.height() < 500 ){ //重新设置高度,在原有的基础上加50 if(!$comment.is(":animated")){ // $comment.animate({height:"-=50"},400); // element高度的变化 $comment.animate({scrollTop:"-=50"},400); // element滚动条高度变化 } } }); $('.smaller').click(function(){ //“缩小”按钮绑定单击事件 if( $comment.height() > 50 ){ //重新设置高度,在原有的基础上减50 if(!$comment.is(":animated")){ $comment.animate({scrollTop:"+=50" },400); } } }); });
  • 对复选框最基本的应用,就是对复选框进行全选、反选和全不选等操作。复杂的操作需要与选项挂钩,来达到各种级联反应效果。
你爱好的运动是?
足球 篮球 乒乓球 羽毛球
添加选中项> >
添加全部项> >
删除选中项> >
删除全部项到左边> >

  • 5.1.5 表单验证

    


    

  • 5.2表格应用
  • 5.2.1 表格变色
    1.普通的隔行变色
// Html 代码
姓名性别暂住地
张山浙江宁波
李四浙江杭州
王五湖南长沙
赵六浙江温州
Rain浙江杭州
MAXMAN浙江杭州
// jQuery 代码

2.单击控制表格行高亮

$("tbody>tr").click(function () {
    $(this).addClass("selected").siblings().removeClass("selected");
})
// 当初始化表格的时候,默认已经选中的行将被高亮显示
$('tbody>tr:has(:checked)').addClass('selected');

3.复选控制多行表格行高亮

$("tbody>tr").click(function () {
    if($(this).hasClass("selected")){
        $(this).removeClass("selected")
    }
    else{
        $(this).addClass("selected")
    }
})

//可以简化成以下格式
$('tbody>tr').click(function() {
    var hasSelected=$(this).hasClass('selected');
    $(this)[hasSelected?"removeClass":"addClass"]('selected');
})

  • 5.2.2 表格展开关闭
// Html 代码
姓名性别暂住地
前台设计组
张山浙江宁波
李四浙江杭州
前台开发组
王五湖南长沙
赵六浙江温州
后台开发组
Rain浙江杭州
MAXMAN浙江杭州
// jQuery 代码
  • 如果当用户刚进入页面时,默认需要收缩起来,也是很简单的。只要触发click()事件即可。
$("tr[class=parent]").click(function () {
    var classv = $(this).prop("id")
    $(this).siblings(".child_"+classv).toggle()
}).click()

  • 5.2.3 表格内容筛选
  • 首先在表格上方添加一个文本框,用于根据用户输入的内容来筛选表格内容,然后为文本框绑定blur事件
$("input#myi").ready(function () {
    $("tr").css("display","none").removeClass("selected")
    $("input#myi").blur(function () {
        $("tr").css("display","none").removeClass("selected")
        var value = $(this).val();
        $("tr:contains('"+value+"')").addClass("selected").show()
    })
})

  • 5.3其他应用
  • 5.3.1 网页字体大小

放大 缩小

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.


5.3.2 网页选项卡

   
    



  • 时事
  • 体育
  • 娱乐
时事
体育
娱乐

  • 5.3.3 网页换肤



你可能感兴趣的:(锋利的jquery 学习笔记)