前端基础(一):Jquery

1.dom和jquery的互相转化
2.选择器
3.过滤器
4.DOM操作

 

1.dom和jquery的互相转化

           dom转jquery:$(dom对象)

           jquery转dom:

                      方法一:$(a)[0]

                      方法二:$(a).get(0)

 

2.选择器

           (1).基本选择器

                      id选择器:           $("#myDiv);

                      标签选择器:       $("div");

                      类选择器:           $(".myClass");

                      选择所有:           $("*");

                      选择多个:           $("div,#myDiv");

           (2).层次选择器

                      选择祖先下的所有后代:           $("form input");

                      选择父亲下的儿子:                  $("form>input");

                      选择紧跟后面的一个元素:       $("label+input");

                      选择一个级别的后面的兄弟:   $("form~input");

 

3.过滤器

           (1).基本过滤器

                      选择第一个:           :first           $("tr:first");

                      选择最后一个:       :last            $("tr:last");

                      大于:                      :gt              $("tr:gt(0)");

                      小于:                      :lt               $("tr:lt(0)");

                      等于:                      :eq             $("tr:eq(0)");

                      否:                          :not            $("input:not(:checked)");

                      奇:                          :odd           $("tr:odd");

                      偶:                          :even          $("tr:even");

                      匹配标题元素:        :header       $(":header");//固定写法

                      匹配正在执行动画的元素           :annimated           //固定写法 

           (2).内容过滤器

                      是否包含文本           :contains(text);                      $("div:contains('Pgg')");

                      是否含有选择器       :has(selector);                       $("div:has(p)");

                      是否为空                  :empty                                   $("td:empty");

                      含有子元素或文本元素           :parent                    $("td:parent");

           (3).可见度过滤器

                      可见元素                    :visible                                 $("td:visible");

                      隐藏元素                    :hidden                                $("td:hidden");

           (4).属性过滤器

                      包含给定属性的元素   [arrtibute]                            $("div[id]");

                      属性值是给定值          [attribute=value]                  $("div[id="aa"]");

                      属性值不是给定值       [attribute!=value]                 $("div[id!="aa"]");

                      属性值以给定值开头   [attribute^=value]                 $("div[id^="aa"]");

                      属性值以给定值结尾   [attribute$=value]                 $("div[id$="aa"]");

                      属性值包含给定值      [attribute*=value]                   $("div[id*="aa"]");

                      多个属性值                 [attribute1][attribute2]            $("input[id][name=$='pgg']");       

           (5).子元素过滤器

                      第一个孩子                  :first-child

                      最后一个孩子              :last-child

                      唯一的孩子                  :only-child

                      奇数(偶数)孩子       :nth-child(odd/even)

                      第几个孩子                 :nth-chile(2)

           (6).表单过滤器

                      input                             :input

                      text                               :text

                      password                     :password

                      radio                             :radio

                      checkbox                      :checkbox

                      submit                           :submit

           (7).表单属性过滤器

                      可用元素                      :enabled

                      不可用元素                   :disabled

                      单选、复选框                :checked

                      下拉框                           :selected

 

4.DOM操作

           (1).内部插入

                      append(content)           在文本内部最后插入content

                      appendTo(content)       将文本插入到content内部的最后

                      prepend(content)          在文本内部最前面插入content

                      prependTo(content)      将文本插入到content内部的最前面

           (2).外部插入

                      after(content)                在文本外部最后插入content

                      insertAfter(content)       将文本插入到content外部最后

                      before(content)              在文本外部最前面插入content

                      insertBefore(content)    在文本外部最前面插入content

           (3).创建新节点

                      $()                                 $(html);

           (4).克隆

                      clone();                          克隆节点不可隆事件

                      clone(true);                    克隆节点克隆事件

           (5).删除

                      remove();                      调用remove()方法的节点还在

                      empty();                         调用empty()方法的节点也被删除了

           (6).替换节点

                      replaceWith();                 替换

                      replaceAll();                    替换所有

           (7).操作属性

                      attr();                                查看属性,操作属性

                      removeAttr();                    删除属性

                      each();                              对选中的多个节点每个都进行操作

           (8).操作样式

                      addClass();                      新增样式

                      removeClass();                 删除样式

                      toggleClass();                   变更样式

                      hasClass();                      判断是否有样式

           (10).遍历

                      children();                        节点下所有子元素

                      next();                              节点同辈后面的元素

                      prev();                              节点同辈前面的元素

                      siblings();                          节点同辈所有兄弟元素

 

 

注:jQuery中的事件加载

           常规js使用window.onload方法

           jQuery中用$(document).ready()方法

没有更多推荐了,返回首页