• JQuery的学习笔记


      为了简化JavaScript的开发,诞生了一些JavaScript库。jQuery是一个快速、简洁的JavaScript框架,是一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

    1. 发展历程:Javascript到jQuery:
    1) Javascript弊端:
    1.复杂的文档对象模型(DOM)
    2.不一致的浏览器实现等
    2) Javascript库
    为了简化Javascript的开发,Javascript库封装了很多预定义的对象和使用函数。
    3) jQuery
    JQuery就是js的一个库(其实就是别人给我们封装好的js文件,简化我们平时的js中的代码操作)。jQuery 简洁的语法和跨平台的兼容性,极大的简化了Javascript开发人员遍历HTML文档,操作DOM,处理事件,执行动画和开发AJAX,其理念:write less,do more
    jQuery优势:
    1 轻量级
    2 强大的选择器
    3 出色的DOM操作的封装
    4 可靠的事件处理机制
    5 完善的Ajax,$.ajax()无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用
    6 不污染顶级变量,只建立一个名为jQuery对象,其所有函数方法都在这个对象之下. $("") jQuery("")
    7 出色的浏览器兼容性
    8 链式操作方式,发生在同一个jquery对象上的一组动作,可以直接连写而不用重复获取对象
    jqnode.css(,).attr(,).css()
    jsnode.style....=
    jsnode.value=...
    jQuery官网
    http://jquery.com/
    jQuery API中文文档
    http://www.css88.com(注意,使用哪个版本看哪个版本的API)
    jquery库类型
    一般jquery库都有两个,一个为学习版,一个为项目版
    完整版本 : jquery.js 主要用于测试,学习和开发
    mini版本 : jquery.min.js 主要用于产品和项目
    2. jQuery的使用
    jQuery不需要安装,想要在某个页面上使用jQuery时,只需要在相关的html中引入jQuery的库文件即可。
    例如:

    <html>
    <head>
    <!--导入jquery库-->
    <script type="text/javascript" src="js/jquery-2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        //书写js代码
    </script>
    </head>
    <body>
    
    </body>
    </html>

    3. jQuery函数
    jQuery库只提供了一个叫jQuery的函数,该函数中预定义了大量的方法,方便jQuery对象和jQuery函数调用。jQuery/$(参数).
    jQuery函数具有四种参数:
    1) 参数为选择器(字符串)
    jQuery函数通过该选择器获取对应的DOM,然后将这些DOM封装到一个jQuery对象中并返回(选择器)
    2) 参数为DOM对象(即Node的实例)
    jQuery函数将该DOM封装成jQuery对象并返回。
    3) 参数为HTML文本字符串
    jQuery函数会根据传入的文本创建好HTML元素并封装成jQuery对象返回
    $("<div class='one'>one<div>");
    4) 参数为一个匿名函数
    $(function(){

    });
    当文档结构加载完毕之后jQuery函数调用匿名函数

    4.jQuery 语法
    jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。

    基础语法是:$(selector).action()

    美元符号定义 jQuery
    选择符(selector)“查询”和“查找” HTML 元素
    jQuery 的 action() 执行对元素的操作


    5. jQuery选择器
    (查找节点,jQuery的选择机制构建于Css的选择器,它提供了快速查询DOM文档中元素的能力,而且大大强化了
    JavaScript中获取页面元素的方式,另外,它还有一些自定义的选择器。)
    $("字符串(选择器)")
    1) 基本选择器
    所有选择器 *
    标签选择器 标签名
    ID选择器 #ID
    类选择器 .className
    群组选择器 selector1,selector2
    多个选择器使用,分割,取并集
    复合选择器 selector1selector2
    多个选择器组合使用,取交集
    2) 层次选择器
    后代选择器 selector1 selector2
    两个选择器使用空格隔开,表示可以获取当前元素的子代以及孙子代等后代元素
    子代选择器 selector1>selector2
    两个选择器使用>隔开,表示只能获取当前选中元素的子代元素
    3) 兄弟选择器
    下一个兄弟选择器 selector1+selector2
    两个选择器使用+隔开,表示可以获取当前元素下一个兄弟元素,下一个兄弟元素要能符合selector2
    之后所有兄弟选择器 selector1~selector2
    两个选择器使用~隔开,表示可以获取当前元素之后的所有兄弟元素,之后所有兄弟元素要能符合selector2

  • 相关阅读:
    四则运算试题生成,结对
    3 词频统计
    20190912-1 每周例行报告
    20190912-2 命令行
    每周例行报告
    作业要求 20190919-1 每周例行报告
    作业要求20190919-4 单元测试,结对
    作业要求 20190919-6 四则运算试题生成,结对
    作业要求20190919-5 代码规范,结对要求
    作业要求20190919-2 功能测试
  • 原文地址:https://www.cnblogs.com/wsyblog/p/8438117.html
Copyright © 2020-2023  润新知