jQuery介绍、方法初探

一、jQuery介绍

1、jQuery的概述

        jQuery由美国人John Resig于2006年初创建，至今已吸引了来自世界各地的众多javascript高手加入其team。

        jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

        jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需使用选择器查找即可。

2、jQuery的特点

    轻量级：经GZip压缩后传输的代码文件仅14KB，未经压缩传送的代码文件仅26KB；

    链式语法 ：$("p.surprise").addClass("ohmy").show("slow")；

    CSS 1-3 选择器：支持CSS选择器选定DOM对象；

    跨浏览器：支持Internet Explorer 6+、Opera 9+、Firefox 1.5+、Safari 2+ ；

    简单：较其它JS库更容易入门，中、英文档很齐全；

    易扩展：JQuery UI 、 JQuery FX –已经有很完善的基于JQuery的用户界面库 和网页特效库；

    “写的更少，做的更多” 的轻量级 JavaScript 库。

3、安装与使用

        通过访问http://www.jquery.com获得最新的jQuery版本,当前最新版本为:3.4.1。

        jQuery库类型说明：

        完全版jquery-3.6.0.js    用于测试和开发（未压缩，是可读的代码）。

        压缩版jquery-3.6.0.min.js     用于实际的网站中，已被精简和压缩。

        两个版本代码相同，只是在压缩版中去掉了相关注释。

        本地调用：

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

        远程调用：

<script  type="text/javascript"  src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>

 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

 连网的情况下可以用谷歌，微软或者百度的CDN(Content Delivery Network，即内容分发网络)

*4、入口函数

 window.onload方法长久以来是程序员解决客户端页面载入问题的一个方法，只有少数大型的图片文件会被快速的载入，而大部分大型的图片文件会使window.onload()载入的很慢.

jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数,那就是ready()方法

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

可简写为：$(function(){})；

	window.onload	$(document).ready()
执行时机	必须等待网页全部加载完毕（包括 图片等），然后再执行包裹代码	只需要等待网页中的DOM结构 加载完毕，就能执行包裹的代码
执行次数	只能执行一次，如果第二次，那么 第一次的执行会被覆盖	可以执行多次，第N次都不会被上 一次覆盖

5、jQuery对象与DOM对象转换

        jQ--->js
            $('')[下标]
            $('').get(下标)
        js--->jQ
            $(js对象)

        在jQuery库中，$就是jQuery的一个简写形式。

    $(“#id”)      等价于    jQuery(“#id”)

二、方法初探

*1、jQuery选择器

        （1）基本选择器：
                    $(“#app”)      选择id为app的元素
                    $(“.sp”)         选择class值为sp的元素
                    $(“h1”)         选择标签名为h1的元素

        （2）层次：

                    空格  后代
                     >  直接子元素
                     +  相邻
                     ~  后兄弟

        （3）基本过滤选择器：

选择器	描述	返回	示例
:first	选择第1个元素	单个元素	$(“div:first”)选择第1个div元素
:last	选择最后1个元素	单个元素	$(“div:last”)选择最后1个div元素
:not(E1)	去除所有E1选择器匹配的元素	集合元素	$(“input:not(.my)”)选择class不是.my的所有input元素
:even	选择索引是偶数的所有元素，索引从0开始	集合元素	$(“tr:even”)选择表格中所有偶数的行
:odd	选择索引是奇数的所有元素，索引从0开始	集合元素	$(“tr:odd”)选择表格中所有奇数的行
:eq(index)	选择索引值是index的元素，index从0开始	单个元素	$(“tr:eq(1)”)选择表格行索引等于1的行
:gt(index)	选择索引值大于index的元素,index从0开始	集合元素	$(“tr:gt(1) ”)选择表格行索引大于1的行
:lt(index)	选择索引值小于index的元素,index从0开始	集合元素	$(“tr:lt(1)”)选择表格行索引小于1的行
:header	所取所有的标题元素,h1~h6	集合元素	$(“:header”)选择网页中所有的<h1>,<h2>…<h6>
:animated	选择当前正在执行动画的所有元素	集合元素	$(“div:animated”)选择正在执行动画的div元素

        （4）内容过滤选择器

选择器	描述	返回值	示例
:contains(text)	选择含有text文本内容的元素	集合元素	$(“div:contains(‘我’)”)选择内容里包含我的所有div
:empty	选择不包含子元素或文本的空元素	集合元素	$(“div:empty”)选择不包含子元素（含文本）的所有div元素
:has(E1)	选择包含有(E1选择器匹配的元素)的所有元素	集合元素	$(“div:has(p)”)选择含有p元素的所有div元素
:parent	选择含有子元素或文本的元素	集合元素	$(“div:parent”)选择拥有子元素（包含文本）的所有div元素

        （5）可见过滤选择器

选择器	描述	返回值	示例
:hidden	选择所有不可见元素	集合元素	$(“:hidden”)选择所有不可见元素，包括：<input type=“hidden”/>,<div style=“display:none”>和<div style=“visibility:hidden”>等，如果只选择<input>元素，则可以使用 $(“input:hidden”)
:visible	选择所有可见元素	集合元素	$(“div:visible”)选取所有可见的div元素

2、内容操作

操作元素中的内容：

设置：

.html(“str”)   设置元素的里面的内容 可用带html标签；

.text(“str”)    设置元素的里面的内容 可用不带html标签；

.val(“str”)     设置表单的值。

获取：

.html()；      .text()；       .val()；

.html(),.text()和.val()的差异总结： 

 .html()是用来读取元素的html内容（包括html标签），

.text()用来读取元素的纯文本内容，包括其后代元素，

.val()是用来读取表单元素的"value"值。

3、样式操作

设置单条样式：

.css(“属性名”，”属性值”)

设置多条样式，可以用对象的写法：

.css({“属性名1”:”属性值1”,”属性名2”:”属性值2”,……})

获取样式值：

.css(“属性名”)

4、类操作

增加类：     可增加/删除多个类

.addClass(“类名1 类名2 ……”)   多个类名之间用空格隔开

删除类：

.removeClass(“类名”)

切换类：

.toggleClass(“”)   

.toggleClass(“类名”,true/false)    用来判断样式类添加还是移除的布尔值

5、属性操作

attr  设置获取节点的属性
    .attr(name)  获取节点属性值
    .attr(name,value)  设置节点的属性值
    .attr({name1:value1,name2:value2}) 设置多个节点的属性值
prop 设置获取节点的属性值（表单属性操作，都可以设置属性）
    .prop(name)  获取节点属性值
    .prop(name,value)  设置节点的属性值
    .prop({name1:value1,name2:value2}) 设置多个节点属性值
prop和attr区别
    1.attr获取节点的初始属性值
      prop是获取节点的动态值
    2.attr设置的属性值在dom节点是可见的
       prop设置的表单属性值在dom节点行不可见

6、事件

click() 单击
ready() 准备完毕
hover()鼠标的移入移出
change() 当表单的值发生改变

7、显示与隐藏

show() 显示
hide() 隐藏
toggle() 切换显示与隐藏
sliceToggle() 滑动切换显示与隐藏
fadeToggle() 淡入淡出
fadeIn 淡入
fadeIn(speed,fn)
        speed 执行的速度：
                normal 400毫秒；
                fast 200毫秒；
                slow 600毫秒；
                直接写毫秒数。
        fu 完毕后的回调函数
fadeOut 淡出
fadeTo() 设置透明度