javaweb实训第二天上午——jQuery基础

文章目录

  • 课程介绍
  • 1.jQuery介绍
    • 1.1.jQuery的认识
    • 1.2.和原生js比较
      • 1.2.1.获取结点
      • 1.2.2.Ajax处理
    • 1.3.1.3.其他js库或js框架
  • 2.使用jQuery
    • 2.1.jQuery版本介绍
    • 2.2.jQuery编程步骤
    • 2.3.页面加载事件
    • 2.4.jQuery===$
    • 2.5.DOM对象与jQuery对象转换
  • 3.jQuery选择器
    • 3.1.基本选择器
    • 3.2.层次选择器(有上下级关系)
      • 3.2.1.祖先 后代(空格)
      • 3.2.2.父亲 儿子(>)
      • 3.2.3.元素 紧接下一个元素(+)
      • 3.2.4.~
  • 4.jQuery注册事件
  • 5.jQuery的方法
    • 5.1.jQuery操作html/文本/value属性值
    • 5.2.jQuery操作元素或节点的方法
    • 5.3.jQuery操作dom的属性和样式
    • 5.4.jQuery遍历
    • 5.5.jQuery发异步请求
  • 6.Json
    • 6.1.json概述
    • 6.2.Json语法【掌握】
      • 6.2.1.如何用json表示一个对象
      • 6.2.2.如何用json表示一个数组
    • 6.3.json字符串和json对象
    • 6.4.数据交换【掌握】
      • 6.4.1.Java对象转成一个json字符串
      • 6.4.2.json字符串转成json对象/js对象
  • 7.创建对象
    • 7.1.添加属性/方法
    • 7.2.删除属性
  • 8.案例:jQuery实现二级联动菜单
  • 9.课程总结
    • 9.1.重点
    • 9.2.难点
    • 9.3.如何掌握
    • 9.4.排错技巧
  • 10.课后练习
    • 10.1.课外阅读

课程介绍

  1. jQuery介绍; (了解)
  2. 使用jQuery; (掌握)
  3. jQuery选择器; (掌握)
  4. jQuery注册事件; (掌握)
  5. jQuery方法; (掌握)
  6. 案例:jQuery实现二级联动; -->有点难度

1.jQuery介绍

1.1.jQuery的认识

1.jQuery是继prototype之后一个优秀的开源的JavaScript代码库(或JavaScript框架),它封装JavaScript常用的功能代码;
2.我们首先来看看jquery的核心特点:

(1)具有独特的链式语法,可以把多个操作写在一行代码里,更加简洁;
(2)拥有大量的选择器,不仅有高效灵活的css选择器,并且可对CSS选择器进行扩展;
(3)拥有便捷的插件扩展机制和丰富的插件(树形菜单、日期控件、图片切换插件、弹出窗口等);
(4)这个就厉害了,jQuery兼容各种主流浏览器,包括互联网十大垃圾之一IE6,IE6有各种各样的问题(https://blog.csdn.net/zykon/article/details/78520330),如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等,jQuery2.0及后续版本将不再支持IE6/7/8浏览器,最新版本是jQuery3.0

3.jQuery的核心思想:(write less,do more)写得更少,做得更多;

1.2.和原生js比较

1.2.1.获取结点

例如:获取input节点:

原生js写法:document.getElementById(“mytime”);
jquery写法:$("#mytime") – #mytime代表id选择器

1.2.2.Ajax处理

原生js写法

(1)创建XMLHttpRequest对象
(2)open方法准备请求
(3)监听属性 onreadystatechange
(4)send方法发送请求

jquery写法:只需要一个方法

$.get(url,{json格式参数},function(data){});
$.post(url,{json格式参数},function(data){});

1.3.1.3.其他js库或js框架


番外篇开始

其实我们除了Jquery这个JS框架,还有很多其他的优秀框架,比如我们现在流行的MVVM架构,当别人问我们,特别是面试的时候,至少要知道下面的一部分名字:

1.MVVM是Model-View-ViewModel的缩写,里面比较重要的两个概念:

(1)单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model(eg:js对象)时,View(标签)就会自动更新;

(2)有单向绑定,就有双向绑定。如果用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定,实现了View和Model的自动同步;

2.其他js库和js框架:

(1)angular.js:google出品,思想来自flex,IoC, 脏检测,自定义标签,受限于绑定数量,一般不能超过2000个,入门容易上手难,大量避不开的概念;

(2)ember.js:原来是苹果公司的内部项目,使用Object.defineProperties, 体型庞大,MVVM只是其很少一部分;

(3)knockout.js:微软出品,使用函数偷龙转凤,最短编辑长度算法实现DOM的同步,兼容IE6,实现高超,但源码极其难读;

(4)winjs:微软出品,使用Object.defineProperties,一个庞大的UI库;
这一两年冒出来的:

(5)react:facebook出品,带来virtual dom的革命性概念,受限于视图的规模;

(6)rivets:API比较精致;

(7)way:使用定时间同步;

(8)vue:使用Object.defineProperties实现同步,实现精致,但功能薄弱;

(9)regular:最近才冒出来的新东西,网易推出的JS框架,自称AngularJS与React的合体;


番外篇结束
目前比较大热的一些前端技术比如:vue.js、angular.js等 说了那么多理论,我们先来简单感受一下,jquery是一门什么样的技术,它和我们的js,有什么差别

2.使用jQuery

2.1.jQuery版本介绍

1.jQuery是一个js框架,代码本质上就是js代码,使用时需要需要引入jQuery.js
在这里插入图片描述
2.引人jQuery:使用

<script type="text/javascript" src="/js/jquery-1.11.2.min.js">script>

2.2.jQuery编程步骤

1.使用

(1)注:Jquery1.x支持ie6、7、8,但性能上赶不上Jquery2.x,所以如果使用1.x版本开发的项目,要注意程序的升级。导入开发版的js,方便查看源码;
(2)使用

你可能感兴趣的:(jQuery基础,jQuery)