zoukankan      html  css  js  c++  java
  • 《锋利的jQuery》读书笔记

    jQuery理念:write less, do more!

    第 一 章
    一:jQuery简介
    a:轻量级
    b:强大选择器
    c:DOM封装
    d:ajax封装
    e:不污染顶级变量 只建立一个jQuery对象:所有的方法都在这个对象下!
    f:解决了浏览器的兼容性问题
    g:行为和结构的分离
    h:丰富的插件

    二:语言环境的配置
    a:在页面中导入即可!

    三:jquery对象和DOM对象
    jquery对象——》DOM对象: 将jquery对象看成一个数组!
    DOM对象——》jquery对象: $(dom对象) 包装下即可
    $():jquery对象的制造工厂


    第 二 章 jQuery选择器

    四:选择器 (jquery的重中之重) 超NB
    a:css选择器找到元素添加样式,jquery选择器找到元素添加行为!
    b:在jquery中使用的css选择器拥有跨浏览器的兼容性!
    c:过滤选择器
    1.基本过滤选择器
    2.内容过滤选择器
    3.可见性过滤选择器
    4.属性过滤选择器
    5.子元素过滤选择器
    6.表单对象属性过滤选择器

    五: $('#id\#b') // 转义特殊字符 “#”

    六:a标签的href属性跳转可以用jquery覆盖掉! 就是说jquery执行的优先级比a标签默认的href属性高!

    七:jquery选择器是可以扩展的! 给jquery装插件!


    第 三 章 jQuery中的DOM操作

    八:DOM
    a:是一种与浏览器、平台、语言无关的接口。
    b:分为DOM Core、HTML-DOM、CSS-DOM
    c:节点:文档节点、元素节点、文本节点、属性节点、注释节点
    DOM操作
    a:增 先创建节点,再插入节点。
    clone()复制节点,再插入! 若要复制节点具备原来节点的事件(clone()方法参数里写true)。
    b:删 remove()方法、empty()方法
    c:改 替换 包裹 移动
    d:查
    f:替换 replaceWith() replaceAll()
    g:包裹 wrap() wrapAll() wrapInner()
    f:属性的设置、获取、删除 attr() attr('','') removeAttr('');
    h:样式的操作 addClass() removeClass() toggleClass() hasClass()
    i:html() text() val()
    j:遍历 children() next() prev() siblings() closest()

    CSS-DOM
    a: css() offset() position() scrollTop() scrollLeft() (这里需要强化)


    第 四 章 jQuery中的事件和动画

    1.合成事件:hover() toggle()
    2.冒泡 和 捕获
    (3).事件对象event的属性:event.type event.preventDefault() event.stopPropagation()
    event.target event.pageX event.pageY event.which
    4.bind() unbind() one()
    5.模拟操作: 直接激活事件 $('元素').trigger('事件名')
    $('元素').click()
    6.触发自定义事件:
    <script>
    $('#btn').bind('myClick',function(){
    $('#test').append('<p>我的自定义事件</p>');
    })
    $('#btn').trigger('myClick'); // 触发这个事件
    </script>



    第 五 章 jQuery对表格和表单的操作

    1.is(":animated") 判断是否处于动画队列. jQuery操作的都是jQuery对象!

    2.each() 和each(i)

    3.表单验证:阻止非法的提交! 安全吧!
    所以一般怕用户无视输入框的错误提醒,执意提交表单,所以可以在submit按钮上设置判断; 若输入不合法,则表单不应该被提交哦!
    So,输入框输入的时候有判断,点击提交button的时候也有判断! 两次前段验证哦!
    就那几种事件:keyup focus blur


    第六章 AJAX
    1. 传统模式:数据提交是通过表单来实现的。数据获取是全页面刷新。 锁住浏览器。
    ajax模式: 数据按需发送, 页面局部刷新。 异步。数据的渲染到了前端,减轻服务器负担。

    XMLHttpRequest对象:javascript内置对象; 发送异步请求、接受响应、执行回调。
    浏览器:渲染引擎和js引擎。

    封装:$.ajax() (最底层)
    $.load() $.get() $.post()
    $.getScript() $.getJSON() 第三层
    get方法:无参数 post有参数 data

    xml:web服务领域的世界语!

    get:参数在url后进行传递。
    数据传输大小有限制。
    请求的数据会被浏览器缓存。 不安全。

    post:参数作为http消息的实体内容。
    数据传输大小没有限制。

    $.each(): 不同于jquery对象的each()方法。 全局函数!

    JSONP:ajax跨域!

    序列化:存储和传输!

    全局ajax事件:ajaxComplete ajaxError ajaxSend ajaxSuccess

    Cookie: 是网站设计者放置在客户端的小文本文件。 浏览器关闭不删除的。
    session cookie:浏览器关闭后删除。


    第七章

    1. ;(function($){
        // 代码
    })(jQuery);

    2. 多用人家的插件,不要自己再去发明轮子了,除非你有大把的时间哦!



    第八章

    1.图片合并:减少http请求!
    2.stop(true,true): (动画队列清空,正在执行动画跳至末状态)



    末尾:

    1. 调试程序:alert
    2. console.log

    Ajax:XMLHttpRequest对象。

    jQuery加载并解析XML。

















  • 相关阅读:
    JSOIWC2019游记
    基础网络流题单
    【题解】Luogu P2472 [SCOI2007]蜥蜴
    【题解】Luogu P2057 [SHOI2007]善意的投票
    凸包略解
    【题解】Luogu P4324 [JSOI2016]扭动的回文串
    【题解】Luogu P4054 [JSOI2009]计数问题
    kruscal重构树略解
    【题解】bzoj 4478 [Jsoi2013]侦探jyy
    【题解】4465 [Jsoi2013]游戏中的学问
  • 原文地址:https://www.cnblogs.com/njqa/p/5953886.html
Copyright © 2011-2022 走看看