Web前端开发与设计09-jQuery基础及其基本选择器

标签：i++   就是   jquery代码   对比   表单   nload   常用语法   style   first   

学习要点

• jQuery概述
• jQuery语法
• DOM对象和jQuery对象
• jQuery选择器概述
• 通过css选择器选取元素
• 通过条件过滤选取元素

jQuery概述

简介

• jQuery由美国人John Resig于2006年创建。
• jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装。
• 它的设计思想是write less,do more。

初识jQuery

1、JavaScript如何实现表格的隔行变色？

  javascirpt实现代码：

Window.onload=function(){    //加载HTML文档
    var trs = document.getElementByTagName(“tr”);  //获取行对象集合
    for(var i = 0; i

jQuery代码实现：

$("tr:even").css("background-color","#ccc");

jQuery能做什么

• 访问和操作DOM元素
• 控制页面样式
• 对页面事件进行处理
• 扩展新的jQuery插件
• 与Ajax技术完美结合

jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率。

jQuery的优势

• 体积小，压缩后只有100KB左右
• 强大的选择器
• 出色的DOM封装
• 可靠的事件处理机制
• 出色的浏览器兼容性
• 使用隐式迭代简化编程
• 丰富的插件支持

获取jQuery

进入jQuery官网：http://jquery.com

jQuery库文件

1、jQuery库分开发版和发布版

本课程介绍jqery1.12.4版本。

2、引入jQuery

2.1  下载本地引入：

2.2 CDN引入

其他CDN引用： 又拍云、新浪、谷歌或微软引用 jQuery。

jQuery语法

基本语法

对比JavaScript的window.onload的写法：

$(document).ready()与window.onload区别

DOM对象和jQuery对象

DOM模型

浏览器可以把HTML文档显示成可视图形。

问题：浏览器怎样才能正确解析复杂的HTML文档呢？

分析：浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构。

1. 把这些节点对象按照一定顺序绘制到浏览器窗口中。
2. 以对象描述文档的方式就是DOM。
3. 节点对象就被称为DOM对象。

节点类型

1、元素节点：文档中的所有元素

……
     

2、文本节点：元素节点内的文本内容

你最喜欢的食品是？ 
     

3、属性节点：元素节点的子节点

……

DOM对象和jQuery对象

区别

1、DOM对象：直接使用JavaScript获取的节点对象。

var objDOM=document.getElementById("title"); 
var objHTML=objDOM.innerHTML; 

2、jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法。

$("#title").html( );

等同于DOM对象方式：

document.getElementById("title").innerHTML;

3、DOM对象和jQuery对象分别拥有一套独立的方法，不能混用。

jQuery语法结构

1、语法：

$(selector).action() ;

说明：

• 工厂函数$()：将DOM对象转化为jQuery对象。
• 选择器 selector：获取需要操作的DOM 元素。
• 方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法。

2、 jQuery代码风格

2.1$”等同于“ jQuery ”

$(document).ready()=jQuery(document).ready()
$(function(){...})=jQuery (function(){...}) 

如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？

noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。

方式一：恢复使用jQuery全名

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍在运行！");
  });
});

方式二：为jQuery起其他别名，例如以下代码叫jq

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍在运行！");
  });
});

2.2操作连缀书写

$("h2").css("background-color","#CCFFFF")
.next().css("display","block");

常用语法举例

示例4：问答特效

示例5：next()方法使用的效果

DOM对象转jQuery对象

使用$()函数进行转化：$(DOM对象)
示例：

var txtName = document.getElementById("txtName"); //DOM对象
var $txtName =$(txtName); //jQuery对象

备注：
jQuery对象命名一般约定以$开头。
在事件中经常使用$(this)，this是触发该事件的对象。

jQuery对象转DOM对象

1、jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象。基于jQuery获取dom对象默认为隐式迭代方式。

示例：

var $txtName = $ ("#txtName"); //jQuery对象
var txtName =$txtName[0]; //DOM对象

2、通过get(index)方法得到相应的DOM对象
示例：

var $txtName = $("#txtName"); //jQuery对象
var txtName = $txtName.get(0); //DOM对象

jQuery选择器概述

jQuery选择器

jQuery选择器类似于CSS选择器，用来选取网页中的元素。

示例：

$("h3").css("background","#09F");

• 获取并设置网页中所有

  元素的背景

• “h3”为选择器语法，必须放在$()中
• $(“h3”)返回jQuery对象集合
• .css()是为jQuery对象设置样式的方法

jQuery选择器分类

jQuery选择器功能强大，种类也很多，分类如下：

a、类CSS选择器

• 基本选择器
• 层次选择器
• 属性选择器

b、过滤选择器

• 基本过滤选择器
• 可见性过滤选择器

通过css选择器选取元素

基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器。

层次选择器

层次选择器通过DOM 元素之间的层次关系来获取元素。

属性选择器

通过条件过滤选取元素

过滤选择器通过特定的过滤规则来筛选元素

语法特点是使用“:”，如使用$(“li:first”)来选取第一个li元素。

主要分类如下：

1    基本过滤选择器

2    可见性过滤选择器

3    表单对象过滤选择器。（后续详细讲解）

4    内容过滤选择器、子元素过滤选择器……（不常用，参考jQuery资料）

基本过滤选择器

基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素。

可见性过滤选择器

可见性过滤选择器可以通过元素显示状态来选取元素。

特殊符号转义

选择器中的特殊符号需要转义，在如下html代码中：

 获取这两个元素的选择器：

选择器中的空格

选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果：

选择器总结

基本选择器

• 标签选择器、类选择器、ID选择器
• 并集选择器、交集选择器、全局选择器

层次选择器

• 后代选择器、子选择器
• 相邻选择器、同辈选择器

属性选择器

属性名过滤、属性值过滤、多属性条件过滤

基本过滤选择器

可见性过滤选择器

Web前端开发与设计09-jQuery基础及其基本选择器

标签：i++   就是   jquery代码   对比   表单   nload   常用语法   style   first   

原文地址：https://www.cnblogs.com/rask/p/12400456.html