学习心得--JS、Jquery

JavaScript

javascript概述

  • JavaScript是一门脚本语言
  • 不需要编译,直接就可以被浏览器解析执行
  • 由ECMAScript、BOM、DOM组成

ECMAScript之数据类型

  • 原始数据类型:
  • Number
    • 整数、小数、NaN(not a number)
  • string
    • 字符串(“abc”、‘abc’)
  • boolean
    • true、false
  • null
    • 空对象
  • undefined
    • 定义一个变量,但是没有赋初值
  • 引用数据类型:
    • js对象

ECMAScript运算

  • 一元运算符:++、–、+
  • 算数运算符:+、-、/、*
  • 赋值运算符:=、+=、-=
  • 比较运算符:>、<、>=、<=、==
  • 逻辑运算符:&&、||、!
  • 三元运算符

ECMAScript基本对象

Function对象

  • var 方法名 = new Function("形式参数列表","方法体");
  • 不需要返回值类型
  • 形参不需要参数类型
  • 如果方法定义了形参,调用时,可以不传递实际参数

Array对象

  • var arr1 = new Array("a","b","c"); var arr2 = ["a","b","c"];
  • join
    • 用于把数组中的所有元素放入一个字符串。
  • pop
    • 用于删除并返回数组的最后一个元素。
  • push
    • 可向数组的末尾添加一个或多个元素,并返回新的长度。

Date对象

  • toLocaleString
    • 获取本地的当前时间
  • getFullYear
    • 获取年份
  • genMonth
    • 获取月份,范围:0~11
  • getDate
    • 获取天
  • getHours
    • 获取小时
  • getMinutes
    • 获取分钟
  • getSeconds
    • 获取秒钟
  • getTime
    • 获取对应的毫秒值

RegExp对象

  • var reg1 = /^[a]{3}$/; console.log(reg1.test("aaaa"));

全局对象

  • parseInt
    • 将数字字符串转换成数字
  • isNaN
    • 判断变量是否是一个NaN
  • eval
    • 将json字符串转换成js对象,方便调用属性

ECMAScript之事件

  • 事件源:发生事件的源头
  • 监听器:发生事件后触发的组件
  • 事件绑定:将事件源和监听器关联
  • 事件:能够触发监听器的事

onload事件

  • 某个页面或图像被完成加载

onfocus、onblur事件

  • 监听元素获取焦点、失去焦点

onkeydown、onkeyup事件

  • 监听键盘按下、键盘松开

onmousedown、onmousemove、onmouseup事件

  • 监听鼠标按下、鼠标移动、鼠标松开

onchange事件

  • 用户改变域的内容

onsubmit事件

  • 监听表单提交

Json

Json介绍

  • JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
  • 它基于ECMAScript的 一个子集。
  • JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习 惯。这些特性使JSON成为理想的数据交换语言。
  • 易于人阅读和编写,同时也易于机器解析 和生成(网络传输速率)

Json语法

  • 单一对象
    • {“属性名1”:“属性值1” , “属性名2”:“属性值2”}
  • 多个对象
    • [{“属性名1”:“属性值1” , “属性名2”:“属性值2”} , {“属性名1”:“属性值1” , “属性名2”:“属性值2”}]

Jackson使用

  • 将对象转换为json字符串
  • 将json字符串转换为对象

Ajax

Ajax概述

  • 概述
    • ajax:Asynchronous javascript and xml,异步JavaScript和Xml
  • 作用
    • 局部刷新页面
    • 发起异步请求
  • 和同步请求区别
    • 同步请求:当一个页面中的内容发生改变时,需要全部刷新。当一个请求发起时,其他的请求不能发起
    • 异步请求,当一个页面中的内容发生改变时,可以局部刷新。当一个请求发起时,其他的请求也能发起

XMLHttpRequest对象概述

  • 常用属性
    • onreadystatechange
      • 用于监听异步请求对象状态(readyState)改变
    • status
      • 服务器响应状态码
    • readyState
      • 异步请求对象的状态
        • 0:异步请求对象还没有初始化完成
        • 1:开始发起请求
        • 2:发起请求完成
        • 3:开始读取服务器的响应
        • 4:读取服务器响应完成
    • responseText
      • 响应正文
  • 常用方法
    • open(请求方式,请求路径,flag)
      • flag:为true就是异步请求;否则为同步请求
    • send
      • 发送参数
    • setRequestHeader
      • 设置请求头

Ajax之get请求

  • 创建异步请求对象
  • 监听异步请求对象状态改变
    • 判断服务器响应状态码为200
    • 判断异步请求对象状态为4
  • 打开连接
    • 设置请求方式
    • 设置请求路径
    • 设置异步请求
  • 发送参数
function createXMLHttpRequest() {
            var xmlHttp;
            try { // Firefox, Opera 8.0+, Safari,Google
                xmlHttp = new XMLHttpRequest();
            } catch (e) {
                try {// Internet Explorer
                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {

                    }
                }
            }
            return xmlHttp;
        }
		var xhr = createXMLHttpRequest();
		xhr.onreadystatechange = function () {
            //当异步请求对象状态发生改变就会执行本方法
            console.log("异步请求对象,状态发生改变" + xhr.readyState);
            //主要是监听readyState属性改变
            //判断请求是否成功?
            //首先判断服务器响应状态码status,再判断异步请求对象是否读取服务器响应成功?readyState
            if (xhr.status == 200 && xhr.readyState == 4) {
                //获取的服务器传输过来的json字符串
                var responseText =xhr.responseText;
                //将json字符串 -> js对象
                var jsObj = eval("("+responseText+")");
                console.log(jsObj.flag);
                console.log(jsObj.msg);
            }
        }
        xhr.open("get","${pageContext.request.contextPath}/demo01?username=root&password=root",true);

Ajax之post请求

  • 创建异步请求对象
  • 监听异步请求对象状态改变
    • 判断服务器响应状态码为200
    • 判断异步请求对象状态为4
  • 打开连接
    • 设置请求方式
    • 设置请求路径
    • 设置异步请求
  • 设置请求头Content-Type
  • 发送参数
        function createXMLHttpRequest() {
            var xmlHttp;
            try { // Firefox, Opera 8.0+, Safari,Google
                xmlHttp = new XMLHttpRequest();
            } catch (e) {
                try {// Internet Explorer
                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {

                    }
                }
            }
            return xmlHttp;
        }

        //1,创建异步请求对象
        var xhr = createXMLHttpRequest();
                xhr.onreadystatechange = function () {
            //当异步请求对象状态发生改变就会执行本方法
            console.log("异步请求对象,状态发生改变" + xhr.readyState);
            //主要是监听readyState属性改变
            //判断请求是否成功?
            //首先判断服务器响应状态码status,再判断异步请求对象是否读取服务器响应成功?readyState
            if (xhr.status == 200 && xhr.readyState == 4) {
                //获取的服务器传输过来的json字符串
                var responseText =xhr.responseText;
                //将json字符串 -> js对象
                var jsObj = eval("("+responseText+")");
                console.log(jsObj.flag);
                console.log(jsObj.msg);
                var ele = document.getElementById("div");
                if (jsObj.flag) {
                    //用户名可用
                    ele.innerHTML = "<font color='blue'>"+jsObj.msg+"</font>";
                } else {
                    //用户名不可用
                    ele.innerHTML = "<font color='red'>"+jsObj.msg+"</font>";
                }
            }
        }
     xhr.open("post","${pageContext.request.contextPath}/demo01",true);
     xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
     xhr.send("username=root1&password=root");

JavaScript之BOM对象

BOM概述

  • BOM对象
    • bom : browser object model,浏览器对象模型
  • 分类
    • window
    • Navigator
    • Screen
    • History
    • Location

window对象

  • 作用

    • 跳转页面
    • 获取其他bom对象
    • 显示警告框
    • 显示确认框
    • 显示输入框
    • 关闭页面
  • 常用属性

    • location
      • 设置跳转页面路径
  • 常用方法

    • alert
      • 显示警告框
    • confirm
      • 显示确认框
    • prompt
      • 显示输入框
    • close
      • 关闭页面
    • setInterval
    • setTimeout
    • clearInterval
    • clearTimeout

window对象之setInterval、setTimeout

  • 方法说明
    • setInterval(code,millisec):设置重复动作
      • code:重复调用的代码
      • millisec:重复间隔时间,单位为毫秒
      • 返回值是重复对象
    • clearInterval(id_of_setinterval):清除重复动作
      • id_of_setinterval:重复对象的id
    • setTimeout(code,millisec):设置延迟动作
      • code:延迟调用的代码
      • millisec:延迟时间
      • 返回值是延迟对象
    • clearTimeout(id_of_settimeout):请求延迟动作
      • id_of_settimeout:延迟对象的id

Location对象

  • 概述

    • Location 对象包含有关当前 URL 的信息。
  • 常用属性

    • href
      • 设置或返回完整的 URL。
  • 常用方法

    • reload
      • 重新加载当前页面

History对象

  • 概述

    • History 对象包含用户(在浏览器窗口中)访问过的 URL。
  • 常用方法

    • back
      • 加载 history 列表中的前一个 URL。
    • forward
      • 加载 history 列表中的下一个 URL。
    • go
      • 加载 history 列表中的某个具体页面。
      • go(-1):相当于back方法
      • go(1):相当于forward方法

JavaScript之DOM对象

DOM概述

  • 概念
    • dom : document object model,文档对象模型
  • 分类
    • Xml DOM:既可以操作xml文件,也可以操作html文件
    • Html DOM:只能操作html文件

Xml DOM之Document对象

  • 概述

    • Document 对象是一棵文档树的根,可为我们提供对文档数据的最初(或最顶层)的访问入口。
  • 作用

    • 创建元素节点、文本节点、属性节点、注释节点
    • 获取元素节点
  • 常用方法

    • createElement
      • 创建元素节点对象
    • createTextNode
      • 创建文本节点对象
    • getElementById
      • 根据id获取元素节点对象
    • getElementsByTagName
      • 根据标签名称获取一组元素节点对象

Xml DOM之Element对象

  • 概述

    • Element 对象表示 XML 文档中的元素。元素可包含属性、其他元素或文本。如果元素含有文本,则在文本节点中表示该文本。
  • 作用

    • 操作该元素中的属性节点
    • 操作该元素中的子元素节点
    • 操作该元素中的文本节点
  • 常用方法

    • getAttribute
      • 返回指定属性的值
    • setAttribute
      • 设置属性值
    • removeAttribute
      • 移除指定属性

Xml Dom之Node对象

  • 概念

    • Node对象是整个 DOM 的主要数据类型。
    • Node对象可以是元素节点、属性节点、文本节点。
  • 常用属性

    • childNodes
      • 获取所有的子节点
    • firstChild
      • 获取第一个子节点
    • lastChild
      • 获取最后一个子节点
    • nodeType
      • 获取节点名称
      • 1:元素节点
      • 2:属性节点
      • 3:文本节点
      • 8:注释
      • 9:文档
    • parentNode
  • 常用方法

    • appendChild
    • removeChild

HTML DOM

  • 概念

    • HTML DOM 定义了访问和操作HTML文档的标准方法。
    • HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。
  • document对象

    • getElementById
    • getElementByTagName
  • innerHTML、innerText

    • innerHTML

      • 用于往标签中插入内容(包含html标签)、解析html标签
    • innerText

      • 用于往标签中插入内容(包含html标签)、不能解析html标签
  • InputText对象

    • 文本输入对象
  • Select对象

    • 下拉列表对象
  • Option对象

    • 选项对象

Jquery

Jquery概述

  • Jquery是什么?
    • JQuery是一个JS的类库文件
  • Jquery的作用?
    • 可以简化遍历HTML文 档、操作DOM、处理事件、执行动画、开发Ajax等操作
  • Jquery的诞生
    • 2006年8月诞生的一个开源项目,现在Jquery团队主要包括核心库,UI和插件开发等. 开发人员,凭借简洁的语法和跨平台的兼容性.
    • 其独特而又优雅的代码风格改变了 javascript程序员的设计思路和编写程序的方式

jquery对象和js对象

  • 问题

    • jquery对象能否直接使用js对象的属性和方法?
      • 不能!
    • js对象能否直接使用jquery对象的属性和方法?
      • 不能!
  • jquery对象和js对象的相互转换

    • js对象 -> jquery对象
      • $(js对象)
    • jquery对象 -> js对象
      • jquery对象.get(0)
      • jquery对象[0]

Jquery选择器

jquery选择器之基本选择器

  • 基本选择器
    • id选择器
      • $("#id")
    • class选择器
      • $(".class")
    • 元素选择器
      • $(“元素名”)
    • 通配符选择器
      • $("*")

jquery选择器之层次选择器

  • 层次选择器

    • 从父子关系、兄弟关系来选择页面上节点
  • 分类

    • $(“a b”)
      • 获取节点a下的所有的节点b
    • $(“a > b”)
      • 获取节点a下的所有的子节点b
    • $(“a + b”)
      • 获取节点a的下一个兄弟节点b
    • $(“a ~ b”)
      • 获取节点a的所有兄弟节点b

jquery选择器之基本过滤选择器

  • 基本过滤选择器

    • 从位置的角度来对页面的标签进行过滤选择
  • 分类

    • $(“tagName:first”)
      • 选择第一个tagName标签
    • $(“tagName:last”)
      • 选择最后一个tagName标签
    • $(“tagName:eq(2)”)
      • 选择脚标为2的tagName标签 ,脚标从0开始
    • $(“tagName:gt(2)”)
      • 选择脚标大于2的tagName标签
    • $(“tagName:lt(2)”)
      • 选择脚标小于2的tagName标签
    • $(“tagName:odd”)
      • 选择脚标为奇数的tagName标签
    • $(“tagName:even”)
      • 选择脚标为偶数的tagName标签

jquery选择器之内容过滤选择器

  • 概念

    • 从内容来对页面的标签进行过滤选择
  • 分类

    • $(“tagName:contains(‘aaa’)”)
      • 选中内容包含"aaa"的tagName元素
    • $(“tagName:empty”)
      • 选中没有任何内容的tagName元素
    • $(“tagName:has(.one)”)
      • tagName中是否包含一个class为one的子元素,如果有就选中tagName

** jquery选择器之属性过滤选择器**

  • 概念

    • 从属性的角度来对页面的标签进行过滤选择
  • 分类

    • $(“tagName[id]”)

      • 选取含有属性id的tagName元素
    • $(“tagName[id=‘cc’]”)

      • 选取属性id值为"cc"的tagName元素
    • $(“tagName[id!=‘cc’]”)

      • 选取属性id值不为"cc"的tagName元素
    • $(“tagName[title^=‘cc’]”)

      • 选取属性id值以"cc"开头的tagName元素
    • $(“tagName[title $=‘cc’]”)

      • 选取属性id值以"cc"结束的tagName元素
    • $(“tagName[title*=‘cc’]”)

      • 选取属性id值包含"cc"的tagName元素

jquery选择器之子元素过滤选择器

  • 概念

  • 从父子关系对标签进行过滤选择

  • 分类

  • $(“tagName :nth-child(2)”)

    • tagName元素下的第二个子元素(脚标从1开始)
  • $(“tagName :first-child”)

    • tagName元素下的第一个子元素
  • $(“tagName :last-child”)

    • tagName元素下的最后一个子元素
  • $(“tagName :only-child”)

    • tagName元素下的仅仅只有一个子元素,那么选中这个子元素

jquery的dom操作

  • 常用方法
    • html()
      • 设置/获取标签内容,解析html标签,相当于innerHTML
    • text()
      • 设置/获取标签内容,不解析html标签,相当于innerText
    • val()
      • 设置/获取value属性值,相当于value属性
    • attr()
      • 设置/获取属性值,相当于setAttribute/getAttribute
    • removeAttr()
      • 移除属性,相当于removeAttribute

Jquery事件

jquery事件之监听页面加载完成

  • jquery方式完整版
$(document).ready(function () {
    console.log("页面加载完成2")
})
  • jquery方式简化版
$(function () {
    console.log("页面加载完成3")
})

jquery事件之事件绑定

  • 方式一
jquery对象.事件名(function(){   
    
});
  • 方式二
jquery对象.bind("事件名",function(){
    
});

Jquery遍历

  • 方式一
jquery数组对象.each(function(index,element){
    
});
  • 方式二
$.each(jquery数组对象,function(index,element){
      
});

Jquery异步请求

jquery异步请求之get

  • $.get(url,data,callback,type)
    • url
      • 请求服务器资源的路径
    • data
      • 请求参数,遵守json格式(键值对)
    • callback
      • 请求成功后,回调的函数
    • type
      • 服务器响应给浏览器的数据类型( html,xml,json,jasonp,script,text)

jquery异步请求之post

  • $.post(url,data,callback,type)
    • url
      • 请求服务器资源的路径
    • data
      • 请求参数,遵守json格式(键值对)
    • callback
      • 请求成功后,回调的函数
    • type
      • 服务器响应给浏览器的数据类型 (html,xml,json,jasonp,script,text)

jquery异步请求之ajax

  • 概念

    • $.ajax(options) 是低层级 AJAX 函数的语法。
    • $.ajax 提供了比高层级函数更多的功能,但是同时也更难使用。
    • option 参数设置的是 name|value 对,定义 url 数据、密码、数据类型、过滤器、字符集、超时以及错误函数。
  • 属性

    • async
      • 设置是否为异步请求
    • contentType
      • 设置请求头Content-Type,默认值:”application/x-www-form-urlencoded“
    • data
      • 请求参数
    • dataType
      • 响应正文的数据类型(html,xml,json,jasonp,script,text)
    • complete(XHR, TS)
      • 请求完成的回调函数
    • error
      • 请求失败的回调函数
    • success
      • 请求成功的回调函数
    • timeout
      • 设置请求延迟时间
    • type
      • 请求方式(Get/Post)
    • url
      • 请求路径
    • xhr
      • 获取异步请求对象
  • 常用属性

    • data、dataType、success、type、url
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值