jQuery

来源：互联网发布：阴阳师神龙强化数据编辑：程序博客网时间：2024/06/05 19:20

JQuery基础知识

1.1基本概念

JQuery是一个JS库，能够帮助我们轻松实现一些原本可能比较麻烦的功能。

JQuery每个版本又有两个小版本：压缩版和未压缩版，压缩版文件较小，但没有排版和注释，所以不便于阅读；而未压缩版文件较大，有排版和注释，便于阅读。

JQuery实际上就是一个js文件，加载到页面就可以直接使用了。

<script src="../jquery-3.2.1.min.js"></script>

也可以通过CDN（Content Distribute Network, 内容分发网络）来引用JQuery。

菜鸟网：

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

百度

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

使用cdn的好处：

（1）省事

（2）速度更快

1.2 语法

$(选择器).action();

$:定义了这是一个JQuery的代码

选择器：按照一定的规则选择DOM元素，非常类似于CSS选择器。

action：对选中元素执行的操作。

案例：所有段落单击变红

方案一：使用js

<body>    <p>第一个段落</p>    <p>第二个段落</p>    <p>第三个段落</p>    <p>第四个段落</p></body><script>    var paras = document.getElementsByTagName("p");for(var i in paras){    paras[i].addEventListener("click",red);}    function red(){        this.style.color = "red";    }</script>

方案二：使用JQuery

<body>    <p>第一个段落</p>    <p>第二个段落</p>    <p>第三个段落</p>    <p>第四个段落</p></body><script>    $("p").click(red);    function red(){        this.style.color = "red";    }</script>

JQuery的一行代码

$("p").click(red);

相当于JS的若干行代码

var paras = document.getElementsByTagName("p");for(var i in paras){    paras[i].addEventListener("click",red);}

所以说JQuery极大简化了程序员的工作。

1.3 选择器

（1）元素选择器

根据标签名来获取元素，比如

$("p"):表示获取所有的段落

（2）id选择器

$("#p1"):表示选择id="p1"的元素

（3）class选择器

$(".top2"):表示选择所有class="top2"的元素

（4）后代选择器

$("div p"):表示选择div里面的段落

（5）属性选择器

$("p[name]"):表示选中所有具有name属性的段落

$("p[name='second']")：表示选中所有name="second"的段落

（6）$("p:first")：表示选择p标签的第一个元素，相当于css中的伪类选择器

$("tr:even")：表示选中所有技术行的tr

1.4 事件

JQuery中注册事件的方法也是调用JQuery对象的方法，

比如单击事件

$("#div1").click();

鼠标移入事件

$("#div1").mouseenter();

而且方法名就是js中的事件名。

<head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <script src="../jquery-3.2.1.min.js"></script>    <style>        #div1{            width:100px;            height:100px;            background-color: blue;        }    </style></head><body>    <div id="div1">    </div></body><script>    $("#div1").mouseenter(function(){        $(this).css("background-color","skyblue");    });</script>

之前，我们所有的JS代码是放在<body>之后的，如果放在<body>之前呢？

实验证明，如果放在body之前，在获取元素时得到的结果为空，因为在执行此代码时，文档还没有加载完成，也就是说元素都还不存在。

那怎么解决呢？

将代码放在$(document).ready(function(){……})中，也就是在文档加载完成之后才会去执行此代码。

<script>    $(document).ready(function(){        $("#div1").mouseenter(function(){            $(this).css("background-color","skyblue");        });    });</script><body>    <div id="div1">    </div></body>

2 动画

2.1显示、隐藏

Hide（）：隐藏

将高度、宽度、透明度变为0.display为“none”

Show（）：显示

将高度、宽度、透明度变为初始的CSS设置的时候，display为“block”。

Toggle（）：切换

如果display为none的时候，点击一下就变成了block；

反之变成none。

2.2淡入淡出

fadeIn():淡入

将隐藏的样式通过改变其透明度（透明度从0到1），

让它显示出来。

fadeOut():淡出

将显示的样式通过改变其透明度（透明度从1到0），

让它隐藏起来。

fadeToggle():淡入淡出的切换

如果样式隐藏，则将它显示出来。

如果样式显示，则将它隐藏起来。

fadeTo（）：固定其透明度（透明度在0到1之间）

2.3上滑下滑

Slideup():上滑

将设置的高度从初始变为0，然后隐藏它

SlideDown（）:下滑

先显示它，然后将设置的高度从0变为初始

slideToggle():上滑与下滑的切换

如果元素是隐藏的话，则先显示，后把它的高度增加；

如果元素是显示的话，先将高度减为0，在隐藏它。

2.4动画

自定义动画

移动一个块到另一个位置：

$("#p").animate({left:'300px',top:'300px'});

同时使用多个属性实现动画效果（移动位置，颜色淡化，大小改变）

$("#p").animate({
    left:'300px',
    width:'+=100px',
    height:'+=100px',
    opacity:'0.5'
});

改变预定义值来实现我们所需要的内容的显示或隐藏

$("#p").animate({
height:'toggle'
});

.Animate（）中有三个参数：

第一个参数是需要改变的样式

第二个参数是显示的速度（slow，fast，指定毫秒数）

第三个参数是回调函数

<body><button id="start">动画开始</button><button id="stop">动画停止</button><div style="background: blue;width: 200px;height: 200px"></div></body><script>    var div = $("div");    $("#start").click(function(){        div.animate({height:'500px'},"slow");        div.animate({width:'500px'},"slow");        div.animate({height:'200px'},"slow");        div.animate({width:'200px'},"slow");    });    $("#stop").click(function(){        div.stop(true);    });</script>

3 JQuery DOM

3.1内容操作

1.文本内容捕获和设置text()作用：获取或设置文本内容（等价于DOM操作中的innerText属性）

2.HTML()：获取或设置文本内容（等价于DOM操作中的innerText属性）

3.Val()huoqu或者设置表单中的值

4.Attr():获取元素的属性值

3.2元素的添加

1）append():在元素的最后添加内容

2）可以同时添加多个内容，这些内容可以通过HTML，JQuery，DOM创建的

3）prepend() 在元素的最前面添加内容

4）可以同时添加多个内容，这些内容可以通过HTML，JQuery，DOM创建的

5）after和before

6）两组添加的区别：append（）和prepend（）添加后成为了其子元素
after（）和before（）添加后成为了其兄弟元素
3.3元素的删除
remove（）：删除的是被选元素及其子元素。
emrty（）：删除的是子元素。
remove（）：还有过滤删除的作用，可以删除指定元素，里面的参数就是指定元素的名字
$("#delDiv1").click(function(){
$("p").remove(".p2");
});
这个代码的作用就是：删除所有p标签中class名为p2的元素
3.4操作css类

添加class类：addclass（）

删除class类removeclass（）

切换class类：toggleclass()

3.5操作css类
$("p").css("color","green");
css（）：里面传两个参数：第一个参数是要设置的属性，第二个参数是设置的属性值
$("p").css({"color":"green","font-size":"30px"});
css（）：也可以设置多个属性，不同属性用“，”隔开，属性名和属性值用“：”隔开，最外层用大括号“{}”
括起来。

4JQuery 导航

4.1祖先

Parent()找到的是当前元素的父元素

Parents()找到的是当前元素的所有祖先元素

注意如果在小括号内传入参数，就可以找到你所指定的那一个父元素

parentsUntil()选中两个指定元素中的祖先元素

4.2后代

children():找到的是当前元素的直接后代

在小括号中传入参数，找到的是你指定的那一个子元素

Find():找到的是当前元素的所有后代，一直向下查找直到找到最后一个子元素

注意这里一定要传参数

4.3同胞

Siblings（）找到当前元素的所有同胞元素

Next():找到的是当前元素的下一个弟弟元素

nextAll（）找到的是当前元素的所有弟弟元素

nextUntil()找到的是两个参数之间的同胞元素

Prev（）：找到的是当前元素的上一个哥哥元素

prevAll()找到的是所有当前元素的哥哥元素

prevUntil（）找到的是两个指定元素之间的同胞元素

5 JQuery Ajax

5.1 ajax

语法

$.ajax(JSON);

JSON包含常用的参数

Url:服务器的地址，获取数据或者推送数据的地方

Data：需要给服务器的数据，根据业务需要去添加，比如登录的接口需要传递“用户名和密码”，获取书籍信息，不需要传递任何的参数

数据类型：JSON对象。键值对的“键”和服务器保持完全一致，包括键名的大小写

Type：数据提交的方式。GET/POST/PUT/DELETE（大写）

Timeout：请求等待的时间。时间单位是毫秒，一般是10s

Success：请求成功返回处理

Error：请求失败返回处理函数

Datatype：预期的服务器响应的数据类型

5.2 get

$.get(URL,data,function(data,status,xhr),dataType)

URL：服务器的地址

Data：请求发送到服务器的数据

5.3 post

$(selector).post(URL,data,function(data,status,xhr),dataType)

jQuery插件

6.1 validate

（1）required。必填字段

<input type="text" id="txt1" required/></br>

（2）Eamil,验证邮箱格式，支持很多形式的邮箱

<input type="email" id="email" required >

（3）URL，验证网址，形如http://www.baidu.com，不支持www.baidu.com

<input type="url" id="url" required ><br>

（4）Maxlength，输入字符的最大长度

<input type="text" id=maxLength" maxlength="5" ><br>

（5）rangelength[]，表示输入字符长度点的范围

<input type="text" id="rangeLength" rangelength="[5,10]"><br>

验证的第二种写法，可以在表单验证的时候为其添加

$.validator.setDefaults({    submitHandler:function(){        alert("验证成功了")    }});$("#formData").validate({    rules:{        password:{            required : true,            maxlength:"6"        },        rePassword :{            equalTo:"[name=password]"        }    }});

6.2accordion

依据标题和内容来自动选择折叠

$("#div1").accordion();

Header：定义以哪个标签来折叠

Event：定义折叠的事件。例如：mouseover，鼠标移上去就可以展开。

Animate：定义是否有动画。默认true 有动画效果。

Disable：禁用折叠。

Destroy：销毁折叠。

6.3 autocomplete

$(function(){    var content = [            "华",            "华点",            "欢迎来到华点",            "华点软件学院"    ];    $("#text1").autocomplete({        source:content    });});

6.4growl

提示框，定义的是鼠标不点击取消时会在几秒后自动消失，当鼠标停留在提示框上，则不消失。

Title，消息提示的标题

Message，提示的内容

（1）growl后面不写某些关键词，使用默认样式

$.growl({title:"消息提示", message:"提示内容"})

（2）notice

$.growl.notice({title:"提醒消息提示", message:"提醒消息内容"})

（3）Warning

$.growl.warning({title:"警告消息提示", message:"提示内容"})

（4）Error

$.growl.error({title:"错误消息提示", message:"提示错误"})

阅读全文

0 0