jQuery 基础详解

来源：互联网发布：淘宝开放平台难吗编辑：程序博客网时间：2024/06/06 00:52

1.简介

jQuery是目前最受欢迎的JavaScript的库，简化了JavaScript的开发工作，并且基本解决了在不同浏览器中的兼容性问题，提供了大量的使用方法。

2.HelloWorld

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>HelloWorld</title><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">    //使用$()代替window.onload    $(function(){        //使用选择器获取按钮对象，随后绑定单击响应函数        $("#btnId").click(function(){            //弹出Hello            alert('Hello');        });    });</script></head><body>    <button id="btnId">SayHello</button></body></html>

说明：JS中window.onload(){}和Jquery中$(function(){})的区别？

①加载的顺序不同：

window.onload(){}在整个网页加载完成之后加载，包括图片，视频(包括外部资源)。

$(function(){})是在文本加载完成之后加载(不包括外部资源)。

②写的次数不同：window.onload(){}可以多次执行，而$(function(){});只可以执行一次，如果多次执行，后面的将把前面的覆盖。

③书写的方式不同：window.onload(){}只有这一种写法，而$();一共有三种表示方式：

$(function(){}) ； jQuery(function(){}) ； $(document).ready(function(){});

3.核心函数

(1) 核心函数

$是jQuery的核心函数，jQuery的核心功能都是通过这个函数实现的。

四种方法：

$(function(){}) ：相当于window.onload = function(){}

$(“选择器”) ：根据选择器返回一个jQuery对象

$(“html代码”) ：使用原始的html代码创建对象

$(DOM对象) ：将DOM对象转换成一个jQuery对象

(2) jQuery对象和DOM对象

① DOM对象：通过原生JS获取到对象，是DOM对象。

② jQuery对象：通过jQuery核心函数包装过的对象时jQuery对象。

③ 比较

dom对象和jQuery对象不能互相调用方法和属性

dom对象命名上没有特殊要求。

jQuery对象的名字习惯上加一个$作为前缀。

④ 转换

dom --> jQuery ：var $obj = $(domObj);

jQuery --> dom ：var domObj = $obj[0];

jQuery对象的本质实际上就是一个DOM对象的数组，所以将jQuery对象转换为dom对象，只需要从数组中取出dom对象可。

(3) jQuery 选择器

jQuery选择器集合了CSS和xPath选择器的语法。利用jQuery选择器，可以非常便捷和快速的找出特定的DOM元素。

① 语法： $(selector) 。

例如：

【1】 $(“#id”) 根据id获取指定元素

【2】 $(“.class”)根据类名获取指定元素

【3】 $(“tagName”)根据标签名获取指定元素

② query选择器分类：

【1】基本选择器

【2】层次选择器

【3】过滤选择器(可以分为基本，内容，可见性，属性，子元素，表单，表单对象属性)

③ Jquery选择器练习：

说明1：不论是在Jquery中还是DOM中，this代表的始终是DOM对象，想要获取属性的值，可以用alert(this.innerHTML)或者alert($this.val()) : (适用于点击获取当前属性的值 )；

alert(this.value):(适用于在下拉菜单中获取选中属性的值 )；

说明2：Jquery文档中几个比较常用的属性：

【1】each()可用于遍历获取元素的选中值。

$("#sendBtn").click(function(){            $items.filter(":checked").each(function(){                alert(this.value);            });});

【2】attr() 方法设置或返回被选元素的属性值。

$("button").click(function(){  $("img").attr("width","180");});

4.Jquery对象

(1) DOM查询

eq(index) : 查询指定索引的元素

first() : 查询第一个元素

find(选择器) ：在当前元素的后代元素中查找

children(选择器) ：在当前元素的子元素中查找

filter(选择器) ：从当前对象中筛选出符合条件的元素

not(选择器) ：从当前对象中删除调用符合条件的元素

parent() : 获取当前元素的父元素

parents(选择器) : 获取当前元素的祖先元素

add() ：向对象中添加指定的元素

(2) DOM增删改

根据父子关系插入节点：

向父节点的后边插入子节点：append() appendTo()

向父节点的前边插入字节：prepend() prependTo()

根据兄弟节点关系插入节点：

向一个节点的前边插入一个节点：before() insertBefore()

向一个节点的后边插入一个节点：after() insertAfter()

替换节点：replaceWith() replaceAll()

删除一个节点：remove()

清空一个节点：empty()

获取元素内部的html代码：html()

获取元素内部的文本内容：text()

设置元素内部的html代码：html("代码")

设置或读取元素的指定的属性：attr()

读取属性值：attr("属性名")

设置属性值：attr("属性名","属性值")

5. 样式操作

(1) 类操作

添加一个或多个类：addClass()

删除一个或多个类：removeClass();

切换一个或多个类：toggleClass();

判断是否包含某个类：hasClass();

(2) 样式操作

读取：css("background-color");

设置：css("color","#bfa");

获取或设置一个元素的高度和宽度：height() width()

获取和设置一个元素的位置：offset();

(3) 显示隐藏

隐藏一个元素：hide()

显示一个元素：show()

切换元素的显示状态：toggle()

(4) 样式操作代码练习

6.事件

(1) 事件的绑定和解绑

① 绑定

直接通过对应事件的方法绑定：对象.click(function(){});

通过bind()方法：对象.bind("事件字符串",function(){});

绑定一个一次性的事件：对象.one("事件字符串",function(){});

为现有的以及后边添加的元素都绑定一个指定事件：对象.live("事件字符串",function(){});

② 解绑：

解除指定事件：unbind("事件名")

解除所有事件：unbind()

(2) 事件的冒泡

事件的冒泡指，当一个元素上绑定的事件被触发，这时它祖先元素上的同类事件也会被触发，在jQuery中解决冒泡问题只需要在响应函数的最后 return false;

(3) 事件对象

浏览器在调用响应函数时，会将一个事件对象作为实参传递进响应函数，事件对象中封装了当前事件相关的一些属性：

比如：鼠标指针的坐标，键盘的那个按键被按下，我们如果想获取到这个对象，只需要在响应函数中定义一个形参：btn.onclick = function(event){};

阅读全文

0 0