5. jQuery

最新推荐文章于 2023-03-27 17:03:46 发布

参宿_七

最新推荐文章于 2023-03-27 17:03:46 发布

阅读量280

点赞数

分类专栏： Java Web

本文链接：https://blog.csdn.net/Michaelia_hu/article/details/89499346

版权

Java Web 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

什么是jQuery？

jQuery的使用方法

jQuery选择器

jQuery动画效果

jQuery HTML

jQuery遍历

jQuery Ajax

jQuery 插件

其他

一、什么是jQuery？

jQuery是一个简写的js函数库，包含HTML元素选取、遍历，修改、操作、事件函数。CSS操作，js特效和动画，Ajax、Utilities。

二、jQuery的使用方法

1. 如果要在自己的页面中使用jQuery（一般使用1.X版本）。可以在head标签中写：

来引用百度的CDN。或者从 jquery.com 下载 jQuery 库。

2. 选择元素，执行操作。

基本语法为：$(selector).action()

如：$(this).hide() - 隐藏当前元素

jQuery函数必须写在

$(document).ready(function(){

});

中。该函数可以简写为：

$(function(){

});

表示必须在文档加载完之后运行。

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

三、jQuery选择器

元素选择器：$("p") 表示选择所有<p>元素。

#id选择器：$(“#test”)表示选择所有id为test的元素，但是因为id是唯一的，这样就是选取唯一元素。（有些浏览器中，即使id不唯一页面也可以正常运行，但是不建议使用相同的id）。

.class选择器：$(".test")表示选择所有class为test的元素。

$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$("p.intro")	选取 class 为 intro 的 <p> 元素
$("p:first")	选取第一个 <p> 元素
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")	选取带有 href 属性的元素
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素
$("tr:even")	选取偶数位置的 <tr> 元素
$("tr:odd")	选取奇数位置的 <tr> 元素

：可以理解为种类(type)，[]理解为属性。

四、jQuery动画效果

1. 隐藏与显示

隐藏：hide() 、hide(speed）、hide(speed，callback)：

显示：show()、show(speed）、show(speed，callback)

切换隐藏与显示：.toggle()、toggle(speed）、toggle(speed，callback)

speed："slow"、"fast" 或毫秒。

callback：动画完成后，调用的函数。

2. 淡入淡出

淡入(fadeIn)、淡入(fadeOut)、切换（fadeToggle）

$(selector).fadeTo(speed,opacity,callback):将物体渐变为给定的不透明度，使用例子：

$("#div1").fadeTo("slow",0.15);

3. 滑动

向下展开（slideDown）、向上展开（slideUp）、切换（slideToggle）

4. 动画

$(selector).animate({params},speed,callback);

params为你要设置的目标属性值，如 left:'250px', height:'+=150px',

当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画，您需要从 jquery.com 下载颜色动画插件。

5. 停止动画

$(selector).stop(stopAll,goToEnd);

stopAll：可选，默认为false，只停止当前动画，如果是个队列，那么后面的会继续播放。

goToEnd ：可选，默认false，是否立即将当前动画调至目标值。

6. 回调函数

如果写了函数名之类的，会在动画结束后运行：$("p").hide("slow",function(){ alert("段落现在被隐藏了"); });

只有函数体的，动画结束前就会运行：$("p").hide(1000); alert("段落现在被隐藏了");

7. 链

当有多个animate加在一个元素上时，会顺序执行。同理，多个非自定义的动画函数也可以同时加在一个元素上，称之为链。

动画一般由事件触发，事件与DOM事件一致。

五、jQuery HTML

1. 获取、设置内容：

text() - 设置或返回所选元素的文本内容，如果参数为字符串，则为设置值。
html() - 设置或返回所选元素的内容（包括 HTML 标记），设置同上
val() - 设置或返回表单字段的值，设置同上
attr()-返回属性值，设置同上。如：

$("#runoob").attr({

"href" : "http://www.runoob.com/jquery",

"title" : "jQuery 教程"

}）；

2. 添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

append与after的区别是，append在所选元素内部添加，after在所选元素外部加，prepend与before同理。

除了可以用jQuery创建元素，也可以通过html/text、js/DOM来创建元素，然后再通过jQuery添加该元素：

function appendText()
{
    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

3. 删除元素

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
remove(".italic")-如果被选元素的id为italic则删除，过滤器只能作用于同级，不能作用于子元素，即，如果子元素中有id为italic的，但是父没有，则都不会被删除。

4. 操作CSS

addClass() - 向被选元素添加一个或多个类：

$("body div:first").addClass("important blue");//为第一个body添加important类和blue类。

removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性：

$("p").css({

"background-color":"yellow",

"font-size":"200%"

});

这个和设置属性函数很像。

5. 设置/返回尺寸

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

jQuery Dimensions

六、jQuery遍历

1. 遍历祖先

parent()：返回被选元素的直接父元素
parents()：返回所有祖先元素，知道<html>元素
parentsUntil()：返回介于两者之间的元素，比如儿子与祖父返回父亲：$("span").parentsUntil("div");

2. 遍历后代

children()：返回被选元素的所有直接子元素，也可以加参数选择器来过滤元素：$("div").children("p.class");
find()：返回所有后代，也可以加选择器。

3. 遍历同代

siblings()：返回所有同胞（有同样的父元素）
next()：返回下一个同胞
nextAll()：返回接下来的所有同胞
nextUntil()：两个同胞之间的所有同胞
prev()、prevAll()、prevUntil()：同上

4. 过滤

除了在函数参数中写"p.class"设置过滤器，还有其他的方法设置过滤器：

first()：返回被选元素的首个
last()
eq(int a):返回指定索引的元素，首个元素的索引为0
filter(".class")：$("p").filter(".url"); 与$("p.url");一样
not（.class）

七、jQuery Ajax

1.AJAX 简介

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

2. load()方法

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

$("#div1").load("demo_test.txt #p1");：将demo_test.txt中id为p1的元素加载到div1中。

关于回调函数，它有三个固定的参数：

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

3. get()/post()方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

callback 函数有两个参数，一个是取回的数据，一个是是否成功取回。

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

语法:

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。callback 函数的参数同上（取回的数据，是否成功）。

八、jQuery 插件

1.jQuery Validate 、jQuery Prettydate插件：为表单输入提供了强大的验证功能，让客户端表单验证变得更简单，还可以自定义验证方法。

2. jQuery Cookie 插件：jQuery 可以通过 jquery.cookie.js 插件来操作 Cookie。

3.jQuery Accordion 插件：用于创建折叠菜单。它通常与嵌套的列表、定义列表或嵌套的 div 一起使用。选项用于指定结构、激活的元素和定制的动画。

4. jQuery Autocomplete：jQuery Autocomplete 插件根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。比如你输入a，下面会提示列表中所有含有a的单词。

5. jQuery Growl 插件(消息提醒) ：像阴阳师很多人邀请你组队一样，边上的邀请列表会自动排列，并自动消失。

6.jQuery Password Validation（密码验证）：

插件扩展了 jQuery Validate 插件，提供了两种组件：
一种评价密码的相关因素的功能：比如大小写字母的混合情况、字符（数字、特殊字符）的混合情况、长度、与用户名的相似度（可选的）。
一种使用评价功能显示密码强度的验证插件自定义方法。显示的文本可以被本地化。您可以简单地自定义强度显示的外观、本地化消息显示，并集成到已有的表单中。

7.jQuery Tooltip：jQuery Tooltip 插件取代了原生的工具提示框（如当鼠标悬浮与某元素上时出现提示语），让它们可自定义，您只需要调整它们的内容、位置和外观即可。

8.jQuery Treeview ：制作eclipse的树形文件菜单。

九、其他

1.一般推荐将jQuery函数单独写在一个js文件中。

2. noConflict()方法

如果其他框架，如js的一些框架（感觉这里的框架并不是我们常想的那种结果，而是一些简写的函数，如jQuery也是js的一种框架）也用$作为简写，那么就会冲突。那么可以使用noConflict方法，noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了，但是jQuery得写全称了。

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});

或者可以创建自己的简写：var jq = $.noConflict();，之后的jQuery可以用jq代替。

或者你想在函数内继续写$:

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});

3. JSONP

JSON :JavaScript Object Notation(JavaScript 对象表示法)是一种类似XML的存储和交换文本信息的语法，它比xml更小、更快、更易解析。目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。虽然它使用js来描述对象。并且可以使用js的内建eval()函数生成原生的js对象。

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

使用实例：

$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
    
    var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
        html += '<li>' + data[i] + '</li>';
    }
    html += '</ul>';
    
    $('#divCustomers').html(html); 
});

参宿_七

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
5. jQuery

目录：什么是jQuery？jQuery的使用方法jQuery选择器jQuery动画效果jQuery HTMLjQuery遍历jQuery AjaxjQuery 插件其他一、什么是jQuery？jQuery是一个简写的js函数库，包含HTML元素选取、遍历，修改、操作、事件函数。CSS操作，js特效和动画，Ajax、Utilities。二、jQuery...
复制链接

扫一扫

专栏目录