HTML5 混合APP开发学习笔记（八）——jQuery 编程基础

最新推荐文章于 2022-09-03 17:18:02 发布

123，机器人

最新推荐文章于 2022-09-03 17:18:02 发布

阅读量447

点赞数

分类专栏： HTML5混合APP 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_43569314/article/details/90339820

版权

HTML5混合APP 专栏收录该内容

17 篇文章 6 订阅

订阅专栏

jQuery 编程基础

jQuery介绍

jQuery是一个JavaScript脚本库（http://www.jquery.com)，它的核心理念是Write Less,Do More，完全免费和开源的JS类库，jQuery的语法设计可以使开发更加便捷。

网页中添加 jQuery

这里有两种方法可以向网页中添加 jQuery：

下载脚本库，放到本地项目中，主要用于APP开发
<script src=“scripts/jquery-3.1.1.min.js” ></script>
采用CDN（内容分发网络）引用，主要用于Web开发
<script src=“http://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.slim.min.js”></script>（新浪CDN节点）

使用方式：
独立文件中使用 jQuery 函数

<head>
<script src=“http://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.slim.min.js”></script>
<script src="my_jquery_functions.js"></script>
</head>

jQuery 语法

jQuery最强大的特性之一就是它能够简化在DOM中查找HTML元素对象。jQuery语法是为 HTML元素的选取编制的，查找到HTML元素对象后，就可以对元素执行某些操作
它的基本语法结构为： $(selector).action()

美元符号 $ 定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

jQuery的自定义选择器

jQuery的自定义选择器都可以让我们从页面中查找到一个或多个HTML元素对象。自定义选择器通常跟在一个CSS选择器后面，基于已选择出的HTML元素集来查找元素。自定义选择器的语法与CSS中的伪类选择器语法相同，即以冒号“：”开头

基本过滤器
¹

内容过滤器
:contains(text)：匹配包含给定文本的元素
:has(selector)：匹配含有选择器所匹配的元素的元素（最后结果为selector内容的父元素）
:parent：匹配只好又一个子节点的元素
可见性过滤器
:hidden：匹配不可见元素
:visible：匹配课件元素
表单选择器
:input、:text、:password、:radio、:checkbox、:submit、:image、:reset、:button、:file，这些都差不多
:selected：匹配所有选中的option元素 $(“input: option:selected”)
例：$(“input:表单选择器”)

jQuery对象与DOM对象的转换

var $div=$(“#mydiv”);//取得jQuery对象
var oDiv=$div[0];//取得对应的标准的DOM对象

var oDiv=document.getElementById(“mydiv”);//取得DOM对象
var $div=$(oDiv);//转换成相应的jQuery对象

jQuery 事件

页面加载后执行
为了防止文档在完全加载（就绪）之前运行 jQuery 代码

 $(document).ready(function(){
    //执行代码
   });
  
   //等效的简写方式：
  $(function(){
   //执行代码
  });

以上两种方式等价

jQuery事件监听
常见事件：
²
键盘事件的几点区别
与 keypress 事件相关的事件顺序：
keydown - 键按下的过程
keypress - 键被按下，触发所有按键
keyup - 键被松开
keypress() 方法触发 keypress 事件，或规定当发生 keypress 事件时运行的函数。
keypress 事件与 keydown 事件类似。当按钮被按下时发生该事件。
然而，keypress 事件不会触发所有的键（比如 ALT、CTRL、SHIFT、ESC）。
表单事件
当元素失去焦点时，发生 blur 事件。
实现方式

$("#mybutton").click(function(){
	 //代码
       });
$("#mybutton").click(functionName);
$("#mydiv").bind({//一次添加多个事件
"click":function(){…...};
"mouseover":function(){……};
"mouseout":function(){……};
});