1.jQuery 的 hide() 函数,隐藏了 HTML 文档中所有的 <p> 元素。
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>

2.jQ的绑定
$(document).ready(function(){

--- jQuery functions go here ----

});

3.点击事件
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(); //隐藏事件
});
});
</script>

事件汇总:

Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

4.jQ效果:


jQuery hide() 和 show()
通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
$("#hide").click(function(){
$("p").hide();
});

$("#show").click(function(){
$("p").show();
});


jQuery toggle()
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素,并隐藏已显示的元素:
语法:$(selector).toggle(speed,callback);
实例
$("button").click(function(){
$("p").toggle();
});


jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
实例
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});


jQuery slideUp() 方法用于向上滑动元素。
语法:
$(selector).slideUp(speed,callback);
实例
$("#flip").click(function(){
$("#panel").slideUp();
});


jQuery animate() - 操作多个属性
请注意,生成动画的过程中可同时使用多个属性:
实例
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});

5.获得内容和属性

获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法:
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
例:
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});

$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});

获取属性 - attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值:
实例
$("button").click(function(){
alert($("#w3s").attr("href"));
});

7.设置属性attr


改变图像的 width 属性:
$("button").click(function(){
$("img").attr("width","180");
});


设置属性/值
设置被选元素的属性和值。
语法
$(selector).attr(attribute,value)

使用函数来设置属性/值
设置被选元素的属性和值。
语法
$(selector).attr(attribute,function(index,oldvalue))

设置多个属性/值对
为被选元素设置一个以上的属性和值。
语法
$(selector).attr({attribute:value, attribute:value ...})

8.添加新元素/内容。


jQuery append() 方法
jQuery append() 方法在被选元素的结尾插入内容。
实例
$("p").append("Some appended text.");


jQuery prepend() 方法
jQuery prepend() 方法在被选元素的开头插入内容。
实例
$("p").prepend("Some prepended text.");


jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
实例
$("img").after("Some text after");

$("img").before("Some text before");

append实在当前元素内部最后边插入元素
after是在当前元素后面外插入元素

9.删除元素
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素

jQuery remove() 方法
jQuery remove() 方法删除被选元素及其子元素。
实例
$("#div1").remove();

jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素。
实例
$("#div1").empty();


jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素:
实例
$("p").remove(".italic");

10.jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性


jQuery addClass() 方法
下面的例子展示如何向不同的元素添加 class 属性。当然,在添加类时,您也可以选取多个元素:
实例
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});


jQuery removeClass() 方法
下面的例子演示如何不同的元素中删除指定的 class 属性:
实例
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});

jQuery toggleClass() 方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作:
实例
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});

11.设置css样式

设置 CSS 属性
如需设置指定的 CSS 属性,请使用如下语法:
css("propertyname","value");

设置多个 CSS 属性
如需设置多个 CSS 属性,请使用如下语法:
css({"propertyname":"value","propertyname":"value",...});
实例
$("p").css({"background-color":"yellow","font-size":"200%"});

12.jQuery 尺寸 方法
jQuery 提供多个处理尺寸的重要方法:
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

实例
$("button").click(function(){
var txt="";
txt+="Width: " + $("#div1").width() + "</br>";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});

13.遍历
首先理解:
遍历 DOM 树
<div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先。
<ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素
左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
<span> 元素是 <li> 的子元素,同时是 <ul> 和 <div> 的后代。
两个 <li> 元素是同胞(拥有相同的父元素)。
右边的 <li> 元素是 <b> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
<b> 元素是右边的 <li> 的子元素,同时是 <ul> 和 <div> 的后代。


向上遍历 DOM 树
这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:
parent()
parents()
parentsUntil()


jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。
实例
$(document).ready(function(){
$("span").parent();
});

jQuery parents() 方法
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
下面的例子返回所有 <span> 元素的所有祖先:
$(document).ready(function(){
$("span").parents("ul");
});


jQuery parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素:
实例
$(document).ready(function(){
$("span").parentsUntil("div");
});

②jQuery 遍历 - 后代
下面是两个用于向下遍历 DOM 树的 jQuery 方法:
children()
find()


jQuery children() 方法
children() 方法返回被选元素的所有直接子元素。
实例
$(document).ready(function(){
$("div").children();
});

下面的例子返回类名为 "1" 的所有 <p> 元素,并且它们是 <div> 的直接子元素:
实例
$(document).ready(function(){
$("div").children("p.1");
});


jQuery find() 方法
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
下面的例子返回属于 <div> 后代的所有 <span> 元素:
实例
$(document).ready(function(){
$("div").find("span");
});

③jQuery 遍历 - 同胞
在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历:
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()


jQuery siblings() 方法
siblings() 方法返回被选元素的所有同胞元素。
下面的例子返回 <h2> 的所有同胞元素:
实例
$(document).ready(function(){
$("h2").siblings();
});

下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素:
实例
$(document).ready(function(){
$("h2").siblings("p");
});


jQuery next() 方法
next() 方法返回被选元素的下一个同胞元素。
该方法只返回一个元素。
下面的例子返回 <h2> 的下一个同胞元素:
实例
$(document).ready(function(){
$("h2").next();
});


jQuery nextAll() 方法
nextAll() 方法返回被选元素的所有跟随的同胞元素。
下面的例子返回 <h2> 的所有跟随的同胞元素:
实例
$(document).ready(function(){
$("h2").nextAll();
});


jQuery nextUntil() 方法
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素:
实例
$(document).ready(function(){
$("h2").nextUntil("h6");
});

④jQuery 遍历 - 过滤


jQuery first() 方法
first() 方法返回被选元素的首个元素。
下面的例子选取首个 <div> 元素内部的第一个 <p> 元素:
实例
$(document).ready(function(){
$("div p").first();
});


jQuery last() 方法
last() 方法返回被选元素的最后一个元素。
下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素:
实例
$(document).ready(function(){
$("div p").last();
});


jQuery eq() 方法
eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素(索引号 1):
实例
$(document).ready(function(){
$("p").eq(1);
});


jQuery filter() 方法
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
下面的例子返回带有类名 "intro" 的所有 <p> 元素:
实例
$(document).ready(function(){
$("p").filter(".intro");
});


jQuery not() 方法
not() 方法返回不匹配标准的所有元素。
提示:not() 方法与 filter() 相反。
下面的例子返回不带有类名 "intro" 的所有 <p> 元素:
实例
$(document).ready(function(){
$("p").not(".intro");
});

⑤ map() 方法
<script>
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );
</script>

<script>
$("p").append($(':checkbox').map(function() {
return this.id;
}).get().join(','));
</script>

12.AJAX get() 和 post() 方法

jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法:
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据:
实例
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});

jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法:
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据:
实例
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});

AJAX教程

1.GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

JQuery笔录的更多相关文章

  1. python之路-笔录3[BOM&DOM&JQuery]

    *** 目录 *** 1. BOM 学习 2. DOM 学习 3. jQuery 学习 *** END *** 1. BOM BOM(Browser Object Model)是指浏览器对象模型,它使 ...

  2. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  3. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  4. Jquery的点击事件,三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  5. jQuery实践-网页版2048小游戏

    ▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...

  6. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  7. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  8. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  9. jQuery的61种选择器

    The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...

随机推荐

  1. Libvirt磁盘加密

    Libvirt加密磁盘使用 创建加密磁盘 进入libvirt默认存储池目录 # cd /var/lib/libvirt/images 创建加密磁盘 # qemu-img convert -O qcow ...

  2. 浮点数与快速log2

    请先于浮点数的文章:http://blog.jobbole.com/86371/ 先贴一张关于float和double的图: float: double: 快速log2长这样: int flog2(f ...

  3. loj#6517. 「雅礼集训 2018 Day11」字符串(回滚莫队)

    传送门 模拟赛的时候纯暴力竟然骗了\(70\)分-- 首先对于一堆\(g\)怎么计算概率应该很好想,用总的区间数减去不合法的区间数就行了,简而言之对\(g\)排个序,每一段长为\(d\)的连续序列的区 ...

  4. d190305面试题01总结

    题目一: 题目二: 题目三: 类中的某个成员变量可以被他和他的子类访问,应该用protected 知识点: 1.类中public修饰的属性,方法可以被该类,子孙类和外部类访问. 2.类中protect ...

  5. centos6.5下安装python3.6、pip、ipython

    一.先更换系统源 为了下载顺畅一般都会更改为国内源. 1 cd /etc/yum.repos.d/ 2 wget http://mirrors.163.com/.help/CentOS6-Base-1 ...

  6. java insert mysql 中文乱码

    jdbc:mysql://192.168.1.77:3306/db360?useUnicode=true&characterEncoding=UTF-8 drop database if ex ...

  7. fiddle

    web开发中Chrome.IE.firefox等浏览器都自带提供了插件帮助开发者跟踪http数据,在手机客户端怎么实现http数据抓包呢?Fiddler可以实现真机调试抓包.Fiddler支持Any ...

  8. 最大利润-城市A和B

    1,问题描述 jack每天同时只能在A和B其中一个城市工作赚钱,假设两个城市间的交通费为m.已知每天在A 和 B 能赚到多少钱,那么jack怎么选择每天工作的城市才能赚到最大利润. 比如 moneyA ...

  9. HBase 相关API操练(一):Shell操作

    HBase 为用户提供了一个非常方便的使用方式, 我们称之为“HBase Shell”. HBase Shell 提供了大多数的 HBase 命令, 通过 HBase Shell 用户可以方便地创建. ...

  10. SpringBoot | 第二十二章:定时任务的使用

    前言 上两章节,我们简单的讲解了关于异步调用和异步请求相关知识点.这一章节,我们来讲讲开发过程也是经常会碰见的定时任务.比如每天定时清理无效数据.定时发送短信.定时发送邮件.支付系统中的定时对账等等, ...