JQuery基本知识

以你之姓@ 2022-08-14 00:48 261阅读 0赞

一、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

四、过滤选择器

1、基本过滤选择器：

<table> 
 <tbody> 
 <tr> 
 <td align="center">:first&nbsp;</td> 
 <td align="center">$("div:first") 第一个div&nbsp;</td> 
 </tr> 
 <tr> 
 <td align="center">:last</td> 
 <td align="center">$("div:last") 最后 一个div</td> 
 </tr> 
 <tr> 
 <td align="center">&nbsp;:not(select)</td> 
 <td align="center">div:not(".one") class不为one &nbsp; &nbsp;&nbsp;</td> 
 </tr> 
 <tr> 
 <td align="center">:even</td> 
 <td align="center">$("div:even") 偶数</td> 
 </tr> 
 <tr> 
 <td align="center">:odd</td> 
 <td align="center">$("div:odd")奇数</td> 
 </tr> 
 <tr> 
 <td align="center">:eq(index)</td> 
 <td align="center">$("div:eq(3)")&nbsp; 第3个div</td> 
 </tr> 
 <tr> 
 <td align="center">:gt(index)</td> 
 <td align="center">$("div:gt(3)")大于3的div</td> 
 </tr> 
 <tr> 
 <td align="center">:lt(index)</td> 
 <td align="center">$("div:lt(3)")小于3的div</td> 
 </tr> 
 <tr> 
 <td align="center">:header</td> 
 <td align="center">$(":header")标题</td> 
 </tr> 
 <tr> 
 <td align="center">:animated</td> 
 <td align="center">$(":animated")正在执行动画的</td> 
 </tr> 
 </tbody> 
</table>

相对复杂的：$("\#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("");

四、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层次结构像水泡一样不断的向上只止于顶端。

例如：

<table> 
 <tbody> 
 <tr> 
 <td><pre><code>&lt;body&gt;
 &lt;div id="content"&gt;
 &lt;span&gt;&lt;/span&gt;
 &lt;/div&gt;
&lt;/body&gt;</code></pre></td> 
 <td><pre><code>&lt;pre name="code" class="html"&gt;$("body").click(function(){
 alert("body click");
});

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

$("span").click(function(){
 alert("span click");
});</code></pre> <pre></pre> </td> 
 </tr> 
 </tbody> 
</table>

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

5、动画效果

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

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

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