• 【原】《锋利的JQuery》读书笔记(一)


    《锋利的JQuery》是一本国内非常不错的JQuery入门书,基本上通读本书后对JQuery的精髓都能掌握了,稍后再通过多加实践应该能对Jquery有比较好的理解了。下面是笔者对整本书的读书笔记,也算是对全书主要内容的一个总结吧。

    一、JQuery的环境配置

    1、JQuery分为压缩版和非压缩版

    2、$=JQuery

    3、$(document).ready(funtion(){});  相当于 $(function(){});

    4、注释用//

    5、DOM对象与JQuery对象的相互转换

        var $variable (jquery对象) =$(variable)(Dom对象);

        var variable(Dom对象)=$variable[0]或$variable.get(0)  (JQuery对象)

    6、与其他JS库冲突的解决(主要是$符号谁生效的问题)

       [1]、在其他库之后导入

              使用前:先调用jQuery.noconflict(); ————$会被释放给jQuery库, 就是说在使用jquery库之前先声明一下 "我下面要用的是jquery的用法,$符号代表jquery了"

       [2]、在其他库之后导入

             不必调用jQuery.noconflict(); ,直接用就行了

    二、JQuery选择器

    1、CSS是找到元素后添加样式,jQuery是找到元素后添加行为

    2、jQuery选择器的优势:

         [1]简洁的写法

         [2]支持CSS1到CSS3的选择器

         [3]完善的处理机制,即使元素不存在也不会像JS一样报错

    3、判断某元素是否存在的方法

         if($("#tt").length>0)或者 if($("#tt")[0])            而不要用if($("#tt")!=null),因为永远不为空。

    4、原生js中查找或获取元素的方法

         getElementById("id")  如 id="one"

         getElementByName("name") 如多选按钮的 name="check"

         getElementByTag("tagname")  如<a>、<span>等html标签

    5、选择器的分类

    基本选择器

    层次选择器

    过滤选择器

    表单选择器

    6、基本选择器

    <1> $("#test")  id选择器

    <2> $(".test")  类选择器

    <3> $("p") 标签选择器

    <4>$("*") 选择所有元素

    <5>$("div,span,.myclass") 组合

    7、层次选择器

    <1>$("div span")  选择div中  span后代元素

    <2>$(“div >span”) 选择div中span的子元素

    <3>$(“.one + div”)选one的下一个div元素————相当于$(“.one”).next("div")

    <4>$("#two ~ div") 选id为two的后面所有<div>兄弟元素————相当于$(“#two”).nextAll("div");

    8、过滤选择器

    <1>$(" div:first") 所有div元素中第一个div
    <2>$(" div:last") 所有div元素中最后一个div
    <3>$(" input:not(.myclass)") 不是 class为myclass 的<input>元素
    <4>$(" input:even") 索引为偶数的input
    <5>$(" input:odd")索引为奇数的input
    <6>$("input:eq(1)") 索引为1的input——————index从0开始
    <7>$("input:gt(1)")  索引大于1的input
    <8>$("input :lt(1)") 索引小于1的input
    <9>$(":header")  所有的<h1> <h2> <h3>......
    <10>$("div:animated") 正在执行动画的<div>
    <11>$("div:contains('我')")   含有文本‘我’的div
    <12>$("div:empty")  空的div
    <13>$(" div :has(p)")   含有<p>的<div>
    <14>$("div:parent")       含有子元素的<div>
    <15> $(":hidden")    所有不可见元素
    <16>$("div:visible")   所有的可见的<div>
    <17>$(" div[id]")      拥有id属性的<div>
    <18>$(" div[title=test]")    title为test的<div>
    <19> $ ("div [title!=test]") title不为test的<div>
    <20> $(" div[title^=test]")    title以“test”开头的div
    <21>$ ("div [title$=test]")    title以“test”结束的div
    <22>$(" div[title*=test]")          title含有test的div
    <23>$("div[id][title$=test]")     组合多条件选择

    <24>:nth-child(index/even/odd/equation)  ————————index从1开始
    <25>:first-child
    <26>:last-child
    <27> :only-child
    <28> $("#form1 :enabled")            id为“form1”的表单内所有可用的元素
    <29>$("#form2:disable")
    <30>$("input:checked")         所有被选中的<input>元素
    <31>$("select:selected")       所有被选中的<select>元素
    <32>$(":input")                   所有<input> <textarea><select><button> 元素
    <33>$(":text")                    所有单行文本框
    <34>$(":password")           所有密码框
    <35>$(":radio")                   所有单选框
    <36>$(":checkbox")             所有复选框
    <37>$(":submit")               所有的提交按钮
    <38>$(":image")          所有图像按钮
    <39>$(":reset")              所有重置按钮
    <40>$(":button")    所有按钮
    <41>$(":file")            所有上传域
    <42>$(":hidden")            所有不可见元素

     9、.click()事件中添加return false 可以使链接不跳转

    10、添加与去除样式

           removeClass()

           addClass()

           这两个可以用一个toggleClass()来代替

    11、要时刻记住,如果用户禁用了javascript后,你的页面是不能正常处理

    12、toggle()方法交替一组鼠标点击的动作

          hover()方法交替一组鼠标滑过的动作

    13、end() 方法可以返回到上一个可以操作的元素

    作者:Tony zhao 欢迎访问:找与淘网

    本文出处:http://www.cnblogs.com/ytaozhao    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    iOS 简单获取当前地理坐标
    iOS 企业账号申请证书和打包ipa
    iOS 代码片段的添加!
    iOS 扩展类方法之category!
    iOS 数组和字典排序
    iOS 字符串NSString 的一些常用方法
    iOS 一些常见问题
    iOS 数据库sqlite完整增删改查操作
    iOS pch文件的创建
    iOS 通过网络请求获取图片的下载歌曲
  • 原文地址:https://www.cnblogs.com/ytaozhao/p/2567629.html
Copyright © 2020-2023  润新知