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

学习要点

  • 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<=trs.length; i++){  //遍历所有行
        if(i%2==0){    //判断奇偶行
            Var obj = trs[i];   //根据序号获取行对象
            obj.style.backgroundColor=”#ccc”;   //为行对象设置背景颜色
}
}
}

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  下载本地引入:

<script src="js/jquery-1.12.4.js" ></script>

  

2.2 CDN引入

<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>

  

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

jQuery语法

基本语法

<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
       alert("hello jQuery,我是宋老师!");
    });
</script>

对比JavaScript的window.onload的写法:

<script type="text/javascript">
    window.onload=function(){
        //javascript代码
    };
</script>

  

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

DOM对象和jQuery对象

DOM模型

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

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

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

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

节点类型

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

<h2>……</h2>

  

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

<p>你最喜欢的食品是? </p>

  

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

<p title="提示">……</p>

  

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”为选择器语法,必须放在$()中
  • $(“h3”)返回jQuery对象集合
  • .css()是为jQuery对象设置样式的方法

jQuery选择器分类

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

a、类CSS选择器

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

b、过滤选择器

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

通过css选择器选取元素

基本选择器

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

层次选择器

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

属性选择器

通过条件过滤选取元素

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

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

主要分类如下:

1    基本过滤选择器

2    可见性过滤选择器

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

4    内容过滤选择器、子元素过滤选择器……(不常用,参考jQuery资料)

基本过滤选择器

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

可见性过滤选择器

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

特殊符号转义

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

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

选择器中的空格

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

选择器总结

基本选择器

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

层次选择器

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

属性选择器

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

基本过滤选择器

可见性过滤选择器

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

时间: 2024-10-29 10:30:19

Web前端开发与设计09-jQuery基础及其基本选择器的相关文章

oa信用盘源码-Web前端开发所需要的技术基础

Web前端开发所需要的技术基础:1.OA信用盘架设q<319.135.503.1> 2.对常用的一些JS框架了解,如jQuery.YUI等. 3.掌握最基本的JavaScript计算方法编写. 4.对目前互联网流行的网页制作方法(Web2.0)HTML+CSS,以及各大浏览器兼容性有很大的了解. 5.对前沿技术(HTML5+CSS3)的基本掌握. 6.还要对IT其他编程语言有所了解如:PHP,Java,.net!有一些公司还要求懂一点SEO优化. Web前端开发是一项很特殊的工作,涵盖的知识面

Web前端开发必备:《Jquery实战》第3版 介绍

目标读者 本书适合想深入学习jQuery的Web开发人员.全栈工程师.架构师.jQuery是互联网上最流行的JavaScript框架.本书的目标是希望读者成为Web高级开发人员,无论起点如何.本书深入介绍了整个jQuery框架,此外还专门深入介绍了插件编程,以及一些扩展开发工具和框架,比如Bower和QUnit,当然还有经典的开发实战原则.每个API方法都使用了简明扼要的语法块来描述参数和返回值. <jQuery实战>(第三版)涵盖了从简单入门(如何在网页中引入jQuery)到高级开发的内容,

Web前端开发与设计06-JavaScript基础

学习要点 JavaScript核心语法 JavaScript程序调试 JavaScript函数 为什么学习JavaScript 应用场景 嵌入动态文本于HTML页面,对浏览器事件做出响应. 读写HTML元素. 在数据被提交到服务器之前验证数据. 检测访客的浏览器信息. 控制cookies,包括创建和修改等. 基于Node.js技术进行服务器端编程. 本次课程应用之一:表单验证 本次课程应用之二:页面动态效果 JavaScript简介 javascript的发展历程 Netscape(网景)公司在

Web前端开发与设计02-表单

学习要点 表单 表单的高级应用 语义化的表单 表单的初步验证 表单 定义 表单在网页中应用广泛,例如:登陆.注册.订单信息录入.调查问卷.搜索等等.例如京东注册页面. 常见的表单元素:文本框,密码框,下来列表框,多选框,提交按钮等等.语法: <form method="post" action="result.html"> <p> 名字:<input name="name" type="text"

Web前端开发与设计10-jQuery中的事件和动画

学习要点 jQuery中的事件 jQuery中的动画 网页中的事件 网页中的事件是实现和用户交互的基础. 例如tab页切换效果,可以通过鼠标点击事件来实现. jQuery中的事件 jQuery事件是对JavaScript事件的封装,常用事件分类如下: 基础事件 window事件 鼠标事件 键盘事件 表单事件 复合事件是多个事件的组合 鼠标光标悬停 鼠标连续点击 鼠标事件 鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件,常用鼠标事件有: 以mouseover()为例,实现鼠标移过时特效: 键

Web前端开发与设计13-购物车案例

说明 使用js脚本实现商品的添加.修改.删除.价格计算. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript实现购物车功能</title> <style type="text/css"> .num { width: 30px; } </st

Web前端开发与设计08-JavaScript操作DOM对象

学习要点 DOM分类 DOM节点间关系 访问DOM节点 节点的创建.添加.删除.替换 设置元素的样式 获取节点位置属性 DOM模型 DOM定义 DOM Core:W3C针对XML文档的操作规范.适用于XML和HTML. HTML-DOM:W3C针对HTML文档的操作规范.只适用于HTML. CSS-DOM:操作CSS的DOM,把style属性封装成对象进行操作. DOM结构 节点间的关系主要有:根节点.父节点.子节点.节点属性.节点value值和节点文本内容. 访问节点 getElement方法

web前端开发浅析

原文地址:http://www.cnblogs.com/babyzone2004/articles/1807381.html 摘 要:前端开发作为一项新的领域,经历的时间随然较短,却显示了强大的生命里,在web2.0时代,扮演着极其重要的角色,它是RIA时代的幕后推手,同时,也是数字媒体技术的应用之一.   关键词:数字媒体技术:web开发:前端开发,网页重构 什么是前端技术  前端技术包括JavaScript.ActionScript.CSS.xHTML等"传统"技术与Adobe R

《JavaScript &amp;amp; jQuery交互式Web前端开发》之JavaScript基础指令

       在本节中.你将開始学习阅读和编写JavaScript代码,还将学习怎样编写Web浏览器可以遵照运行的指令.在開始学习后面章节中的更复杂的概念之前.我们先学习语言的一些核心部分,然后看看怎样使用它们来编写一些很基础的(仅包括少量简单步骤)脚本程序.     在開始学习后面章节中的更复杂的概念之前,我们先学习语言的一些核心部分,然后看看怎样使用它们来编写一些很基础的(仅包括少量简单步骤)脚本程序. 语言: 语法结构 不论什么新的语言都一样,都要学习它们的新词汇(词汇表),以及将这些词汇