JQuery教程精要-优快云博客

本文链接：https://blog.youkuaiyun.com/angjunqiang/article/details/41143421

一、JQuery对象与DOM对象的区别

1、JQuery对象：是通过JQuery($())包装DOM对象后产生的对象，JQuery对象可以使用JQuery的方法

2、JQuery对象不可以使用DOM对象方法，DOM对象不可以使用JQuery对象方法。

3、一般约定JQuery对象，在变量前加上$符号。

var $variable=JQuery对象;
var variable=DOM对象;

4、JQuery对象转换为DOM对象

a、JQuery对象是一个对象数组可以通过[index]获得DOM对象，也可以通过get(index)方法

例如：var $cr=$("#cr"); var sr=$cr[0] ; var cr = $cr.get(0);

b、DOM对象通过$包装成JQuery对象

例如：var sr=document.getElementById("sr");

var $sr=$(sr);

二、JQuery基本选择器

1、优点：a.写法简洁 b.完善的事件处理机制（不存在元素不能报错）

2、选择器

a、#id 返回单个元素，只能使用一次。

b、.class 返回集合元素，可以多次使用。

c、element 返回集合元素。

d、select1,select 2,...并列选择多个元素，返回集合(元素之间要用 “,”隔开);

三、层次选择器

1、$("ancestor descentant") 祖先元素的所有后代元素（集合）。

2、$("parent >child") 选择parent下的子元素（集合、不包含孙元素）。

3、$("prev + next") 选取prev 元素后紧跟的下一个next元素（集合，不相邻的元素无效）。

4、$("prev~siblings")选取prev后面所有兄弟元素（集合）。

例子：

$("body div")  body里面所有的div
$("body>div") body内所有子div
$("#one +div") id为one的紧跟的下一个div
$("#two~div") id为two后面所有的div
$("#two").siblings("div") id为two的后面的所有的兄弟div
$("#one").nextAll(span:first) 直接不相邻的span </span>

四、过滤选择器

1、基本过滤选择器：

:first	$("div:first") 第一个div
:last	$("div:last") 最后一个div
:not(select)	div:not(".one") class不为one
:even	$("div:even") 偶数
:odd	$("div:odd")奇数
:eq(index)	$("div:eq(3)") 第3个div
:gt(index)	$("div:gt(3)")大于3的div
:lt(index)	$("div:lt(3)")小于3的div
:header	$(":header")标题
:animated	$(":animated")正在执行动画的

相对复杂的：$("#two").nextAll("span:first");

2、内容过滤器

: contains("text") $("div:contains('dl')"); 含有有文本"di"的div

:empty $("div:empty"); 空文本的div

: has(selector) $("div:has('.mini')"); 有class为mini的div

:parent $("div:parent"); $("div:not(:empty)" 非空的div

3、可见性过滤器

:hidden $("div:hidden").show();把不可见的元素变为可见。

:visable $("div:visiable");选择可见的元素。

4、属性过滤器

[attribute]$("div[title]");含有title属性的div

[attribute=value]$("div[title='test']");含有title属性值为test的div

[attribute!=value]$("div[title!='test']");含有title属性值不为test的div

[attribute^=value]$("div[title^='test']");含有title属性值以test开始的div

[attribute$=value]$("div[title$='test']");含有title属性值以test结尾的div

[attribute*=value]$("div[title*='test']");含有title属性值含有test的div

[selector1][select2]$("div[id][title='test']");含有id且title属性值为test的div

5、子元素过滤器

:nth-child(index/even/odd/equtation)$(".one:nth-child(2)"); 选择class为one的第二个子元素

:first-child$(".one:first-child");

:last-child$(".one:last-child");

:only-child $(".one:only-child");

6、表单对象属性过滤器

:enable 可用的$("input:enabled").val('txt'); 对可用的input元素改变value值为txt。

:disabled 不可用的$("input:disabled").val('txt');

:checked 已经选择的（单选复选框） $(":checkbox[name=' ']:checked");

:selected 选中的（下拉框） $("select : selected"); 得到的是一个数组。

7、JQuery中的几个方法

a、.val() 获取或者修改表单元素的value值。

b、.attr()和val()方法类似，attr(name,value):为name属性赋值。

c、.each()对JQuery对象进行遍历，其参数为funcation函数内部的this表示正在被遍历的DOM对象。

d、.text()方法与.val()方法类似，text()方法获得元素节点的文件子节点的值，也可以写text(name,value)为节点赋值。

e、$.trim(object) 可以为传入的对象去除前后的空格。

三、操作节点：插入、删除、清空、替换、包裹节点

1、插入节点方法

append() 匹配每个元素的结尾处追加内容

appendTo() 将新建节点插入到指定元素结尾处

prepend() 向每个元素的开始处加入内容

prependTo()

after()

insertAfter()

before()

insertBefore()

2、删除节点方法：remove() 从DOM中找出匹配元素进行删除

3、清空节点：empty()

4、替换节点：replaceWith()将匹配的元素进行替换成指定的html和DOM，返回被替换的节点。

5、包裹节点:wrap(),将指定节点用其他标记包裹起来 $("li").wrap("<font color='red'></font>");

四、JQuery操作DOM、CSS

1、追加样式:$("div").addClass(" ");

2、删除样式:$("div").removeClass(" ");

3、切换样式：$("div").toggleClass(" "); 响应点击事件。

4、获取或设置元素样式属性

a、$("div").css("opacity",0.5); 设置元素透明度。

b、$("div").width();填入值就表示设置，不填入值就表示得到value。

五、JQuery中的事件

1、加载DOM $(document).ready(function(){ //js内容 }); 也可以简写为：$(function(){ //js内容 })

2、绑定事件：.bind("click",function(){ //js 内容 }); 移除事件 unbind("click"); --表示移除click事件，unbind();表示移除所有事件。

3、合成事件: .hover(function(){ },function(){ }) .toggle(function(){} , function(){});

4、事件冒泡:事件会按照DOM层次结构像水泡一样不断的向上只止于顶端。

例如：

<body>
   <div id="content">
        <span></span>
   </div>
</body>

<pre name="code" class="html">$("body").click(function(){
  alert("body click");
});

$("#content").click(function(){
  alert("content click");
});

$("span").click(function(){
  alert("span click");
});

这里当我们点击span时，会一级一级向上触发事件，解决办法在处理事件的函数中加入：return false;

5、动画效果

hide() show() 隐藏或者显示对象,可以在括号中加入时间。

slideUp() slideDown() 滑动的效果、只改变高度。

fadeIn() fadeOut() 渐变的效果，只改变透明度。