我爱编程

JQuery基础

2017-08-15  本文已影响45人  LinDaiDai_霖呆呆

JQuery基础

第一章:JQuery简介

1.简介

通过$('#m')方法会得到一个$p的jQuery对象，$p是一个类数组对象。

这个对象里面包含了DOM对象的信息，然后封装了很多操作方法，调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的。

通过标准的JavaScript操作DOM与jQuyer操作DOM的对比，我们不难发现：

  1. 通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。

    ​

  2. 通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。

    ​

普通处理，通过标准JavaScript处理：

var p = document.getElementById('imooc');
p.innerHTML = '您好！我是JS处理的p标签';
p.style.color = 'red';

jQuery的处理：

var $p = $('#imooc');
$p.html('您好！我是JQuery处理的p标签').css('color','red');

2. JQuery对象转换为DOM对象

var $div = $('div') //jQuery对象
var div = $div[0] //1.转化成DOM对象
var div = $div.get(0) //2.通过get()方法,转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

3.DOM对象转化成jQuery对象

var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

4.JQuery选择器之层级选择器

第二章:常用方法

1.获取元素

$(".className")                         //通过class   匹配到的是有class名的所有标签,不管标签是否相同
$("#id")                                //通过id名
$("HTML标签名")                         //通过标签名
$("HTML标签名" ".className")            //匹配class名的所有元素下的 HTML标签名的这个子元素.同$(".className").find("HTML标签名")
$

2.$(document).ready()

 $(document).ready(function() {
   
  });

3. .addClass( )

给标签添加类名

可以在原有的class上再添加class 不会影响原有的class

  1. .addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
  2. .addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名
例1: 给div 再添加类名 father
<div class = "son"></div>
$('div').addClass("father");
=>  <div class = "son father"></div>

例2: 找到类名有 son 的div 给它再添加类名 father
<div class = "son"></div>
<div class = "son2"></div>
$('div').addClass(function(index,className){
  if(className.indexOf('son')!==-1){    //找到类名包含son的这个元素
    $(this).addClass('father')      //this指匹配集合中当前的这个元素
  }
})

4. .removeClass( )

移除class

  1. .removeClass( className ) : 为每个匹配元素所要移除的一个或多个样式名
  2. .removeClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的将要移除的样式名
div.removeClass("father");

5. .css( )

获取元素的属性

.css( )样式属性优先级高于addClass( )

$(".father").css("background-color","red");
$('.father').css({"background-color":"red"});

注:

当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，
例如
.css("width",50}) 与 .css("width","50px"})一样

'background-color'  也可写成    'backgroundColor'
'font-size'         也可写成    'fontSize'

//合并设置,通过对象传设置多个样式
        $('.father').css({
            'font-size'     :'15px',
            'background-color' :"blue",
            'border'        :"1px solid red"
        })

6. .prop( )

调整元素的属性

 $("#target1").prop("disabled","true");

7. .html( )

添加HTML标签和文字到元素，而元素之前的内容都会被方法的内容所替换掉。

获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法：

  1. .html() 不传入值，就是获取集合中第一个匹配元素的HTML内容
  2. .html( htmlString ) 设置每一个匹配元素的html内容
  3. .html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数
$("#target4").html("<em>#target4</em>");            //将id为target4的标签内的内容替换为了强调体的#target4文字

**注:.html( )内部调用的是.innerHTML属性来处理,即针对的是整个HTML的内容(不仅仅是文本内容)

8. .remove( )

移除HTML元素

$("#target4").remove();                             //将id为target4的这个标签彻底移除

9. .appendTo( )

将元素从一个标签移到另一个标签中

$("#target2").appendTo("#right-well");              //将id为target2的这个元素从它原来的地方移到id为right-well的元素中

10. .clone( )

拷贝元素

有参数true,若无参,只是单纯的克隆节点结构;若传参数true进去,把附带的事件和数据一并克隆了

$("#target5").clone().appendTo("#left-well");       //将id为target5的这个元素复制一份并添加到id为left-well的元素中

11. .parent( )

某个元素的父元素

参数,可选 target.parent() 匹配target集合中的所有元素的父元素

​ target.parent("selected") 匹配target集合中的所有元素的并满足selected要求的父元素

 $("#target1").parent().css("background-color","red");              //匹配id为target1的父元素

 $(".target1").parent(":last").css("background-color","red");       //匹配所有class名为target1的父级元素集合中的最后一个

注:与其很像的 .parents( ) 方法,匹配的是所有元素的祖辈元素,查找模式从里向外,包括body html document

12. .children( )

jQuery是一个合集对象，所以通过children是匹配合集中每一个元素的所有第一级子元素(即仅父子关系)

例1:
$("#right-well").children().css("color","orange");      //匹配id为right-well下的所有子元素

例2:
class名为father的3个div 
<div class = "father">
    <p>p标签</p>
</div>
<div class = "father">
    <p>p标签</p>
</div>
<div class = "father">
    <p>p标签</p>
    <span>span标签</span>
</div>
$('father').children().css('color','red')               //所有的p标签以及span标签都会被匹配改变颜色

children(.selected)内还可以传参

如例2中,若在最后一步的children()中加入参数

$('father').children(':last').css('color','red')        //则只匹配到了所有集合中的最后一个元素,即只有span标签会变色

13. :nth-child(n)

某个元素的指定的子元素(n从1开始)

$(".target:nth-child(2)").addClass("animated bounce");  //类名为target的所有元素,他们的第二个子元素

14. :odd

获取元素中索引为奇数的所有元素

索引即为下标,下标从0开始

$(".target:odd").addClass("animated shake");

15. :even

获取元素中索引为偶数的所有元素

索引即为下标,下标从1开始

$(".target:even").addClass("animated shake");

16. :first

匹配第一个元素

$(".target:first").addClass("animated shake");

17. :last

匹配最后一个个元素

$(".target:last").addClass("animated shake");

18. :not( )

一个用来过滤的选择去,选择全部,除了( ) 里的元素

$(".target:not(:fitst)").addClass("animated shake");        //选择所有有target类名的元素除了第一个

19. :eq( )

语法: :eq( index ) 选择索引值为index 的元素,index 从0开始

$(".target:eq(2)").addClass("animated shake");              //类名为target的元素中的索引值为2的元素

20. :gt( )

语法: :gt( index ) 选择索引值大于index 的所有元素

$(".target:gt(2)").addClass("animated shake");

21. :lt( )

语法: :lt( index ) 选择索引值小于index 的所有元素

$(".target:lt(2)").addClass("animated shake");

22. :header

选择所有标题元素, 如h1 h2 h3 等

$(":header").css("color","red");

23. :lang( )

语法: :lang(language) 选择指定语言的所有元素

<div id="n1" lang="en">China(英语)</div>
<div id="n2" lang="EN-US">China(美式英语)</div>
<div id="n3" lang="zh-cn">中国(大陆中文)</div>
<div id="n4" lang="zh-tw">中國(台湾中文)</div>
<div id="n5" lang="fr">Chine(法语)</div>
<div id="n6" lang="ru">Китай(俄语)</div>

// 选择了id分别为n3、n4的两个元素
$(":lang(zh)");

24. :root

选择这个文档的根元素

25. :animated

选择所有在执行动画效果的元素

$(":animated");

26. :contains( )

选择所有包含指定文本的元素

$(".div:contains('我是div')").css("color", "#CD00CD");        //选择类名为div的所有包含文本内容为"我是div"的元素

27. :has( )

选择元素中至少包含指定选择器的元素

$(".div:has(span)")                                         //选择类名为div的所有包含span标签的元素

28. :parent

选择所有含有子元素或文本的元素

$("a:parent")                                           //选择所有内容不为空的a标签

29. :empty

选择所有没有子元素或文本的元素(与:parent相反);

$("a:empty")                                            //选择所有内容为空的a标签

30. :visible

选择所有显示的元素

$(":visible")

31. :hidden

选择所有隐藏的元素

:hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等

我们有几种方式可以隐藏一个元素：

  1. CSS display的值是none。
  2. type="hidden"的表单元素。
  3. 宽度和高度都显式设置为0。
  4. 一个祖先元素是隐藏的，该元素是不会在页面上显示
  5. CSS visibility的值是hidden
  6. CSS opacity的指是0
如果元素中占据文档中一定的空间,元素被认为是可见的。
可见元素的宽度或高度，是大于零。
元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。

32. this

this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。

$('p').click(function(){
    //把p元素转化成jQuery的对象
    var $this= $(this) 
    $this.css('color','red')
})

33. val( )

.val()方法只针对表单元素

  1. .val()无参数，获取匹配的元素集合中第一个元素的当前值

  2. .val( value )，设置匹配的元素集合中每个元素的值

  3. .val( function ) ，一个用来返回设置值的函数

    注:

    1. 通过.val()处理select元素， 当没有选择项被选中，它返回null

    2. .val()方法多用来设置表单的字段的值

    3. 如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值

      例1:对于无selected的下拉框,输出第一个

      <select id="single">   
   <option>你好</option>
    <option>王先生</option>
</select>
      console.log($('#single').val())     获取匹配的元素的集合中的第一个元素的当前值
=>你好

      例2:对于多个selected,输出选择了的内容

      <select id="multiple" multiple="multiple">
        <option selected="selected">王先生c</option>
        <option>你好</option>
        <option selected="selected">帅</option>
</select>
          console.log($('#multiple').val())       
=>            王先生,帅

    例3:用val( )修改文本内容

    <input type = 'text' value = "我是为被修改的input">
<script>
 $('input[type=text]').val('我是修改了的input');       //选择一个表单,修改value的值

34. taggleClass( )

toggleClass方法用于addClass( )和removeClass( )直接的切换

通过toggleClass方法动态添加删除Class，一次执行相当于addClass，再次执行相当于removeClass

$("button").click(function(){
    $("p").toggleClass("main");
  });
  //第一次点击按钮,给P标签添加class  再次点击移除class

第三章:属性筛选选择器

在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的

[attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作

比如说input[type="text"],input[type="checkbox"]等

[attr*="value"]能在网站中帮助我们匹配不同类型的文件

例:

//查找所有div中，属性name=p1的div元素
         $('div[name=p1]').css("border", "3px groove red"); 
         
         <div class="div" testattr="true" name='p1'>
            <a>[att=val]</a>
        </div>
         
//查找所有div中，有属性p2的div元素
        $('div[p2]').css("border", "3px groove blue"); 
        
        <div class="div" testattr="true" p2>
            <a>[att]</a>
        </div>
        
//查找所有div中，有属性name中的值只包含一个连字符“-”的div元素
        $('div[name|="-"]').css("border", "3px groove #00FF00");   
        
        <div class="div" testattr="true" name="-">
            <a>[att|=val]</a>
        </div>
        
 //查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素
        $('div[name~="a"]').css("border", "3px groove #668B8B"); 
        
        <div class="div" testattr="true" name="a b">
            <a>[att~=val]</a>
        </div>
        
 //查找所有div中，属性name的值是用imooc开头的
         $('div[name^=imooc]').css("border", "3px groove red"); 
         
         <div class="div" testattr="true"  name='imooc-aaorn'>
            <a>[att^=val]</a>
        </div>
         
 //查找所有div中，属性name的值是用imooc结尾的
         $('div[name$=immoc]').css("border", "3px groove blue"); 
         
         <div class="div" testattr="true"  name='aaorn-imooc'>
            <a>[att$=val]</a>
        </div>
         
 //查找所有div中，有属性name中的值包含一个test字符串的div元素
        $('div[name*="test"]').css("border", "3px groove #00FF00"); 
        
        <div class="div" testattr="true"  name="attr-test-selector">
            <a>[att*=val]</a>
        </div>
        
 //查找所有div中，有属性testattr中的值没有包含"true"的div
        $('div[testattr!="true"]').css("border", "3px groove #668B8B"); 
        
        <div class="div" name="a b">
            <a>[att!=val]</a>
        </div>

第四章:子元素筛选选择器

1. :first-child

选择所有父级元素下的第一个子元素

$('.target:first-child')                //选择所有类名为target的元素  它们的第一个子元素
$('.target a:first-child')              //选择所有类名为target的元素下的第一个a标签元素

:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)

2. :last-child

选择所有父级元素下的最后一个子元素

$('.target:last-child')             //选择所有类名为target的元素  它们的最后一个子元素

3. :only-child

如果某个元素是其父级元素下的唯一子元素,它就会被选中

4. :nth-child(n)

某个元素的指定的子元素(n从1开始) 从前往后计算

$(".target:nth-child(2)").addClass("animated bounce");  //选择类名为target的所有元素,他们的第二个子元素

5. :nth-last-child(n)

某个元素的指定的子元素(n从1开始) 从后往前计算

第五章:表单元素选择器

1.常用表单元素选择器

​ 注:除了input 选择器,每个表单选择器都对应一个input的type值

​ 如:

$(":password")      还可以表示为      $("[type=password]")

2.表单对象属性筛选

1. :enabled

选取可用的表单元素

//查找所有input所有可用的（未被禁用的元素）input元素。
        $('input:enabled').css("border", "2px groove red");
2. :disabled

选取不可以的表单元素

//查找所有input所有不可用的（被禁用的元素）input元素。
        $('input:disabled').css("border", "2px groove blue");
3. :checked

选取被选中的<input>元素

//查找所有input所有勾选的元素(单选框,复选框)

     //移除input的checked属性
    $('input:checked').removeAttr('checked')

注: 在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素

4. :selected

选取被选中的<option>元素

//查找所有option元素中,有selected属性被选中的选项
         //移除option的selected属性
        $('input:selected').removeAttr('selected')

注:

  1. 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器

第六章: 获取设置元素属性

1. .attr( )
  1. attr(传入属性名)：获取属性的值
  2. attr(属性名, 属性值)：设置属性的值
  3. attr(属性名,函数值)：设置属性的函数值
  4. attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
2. .removeAttr( )

.removeAttr( 属性名) 为匹配到的元素集合中的每一个元素都移除一个属性

3. .attr()和prop()的区别

dom中有个概念的区分：Attribute和Property翻译出来都是“属性”，《js高级程序设计》书中翻译为“特性”和“属性”。简单理解，Attribute就是dom节点自带的属性.

如:

html中常用的id class title align 等用attr();

<div id='target' title='王先生'></div>

而Property是这个DOM元素作为对象，其附加的内容，例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法进行取值或赋值等

4. .html( ) 和 .text( ) .val( )的区别

.text( )

得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。，具体有3种用法：

  1. .text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代

  2. .text( textString ) 用于设置匹配元素内容的文本

  3. .text( function(index, text) ) 用来返回设置文本内容的一个函数

    注:返回的是一个字符串,包含所有匹配到的元素的文本集合.

    ​

    ​

    .html与.text的异同:

  1. .html与.text的方法操作是一样，只是在具体针对处理对象不同
  2. .html处理的是元素内容，.text处理的是文本内容
  3. .html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用
  4. 如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的
  5. 火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器
方法名 读取的内容 作用元素 使用在多个元素上时 能否使用回调函数
.html() 元素的html内容(包含html标签) 除了表单元素 只读取第一个元素 是
.text() 元素的的纯文本内容 除了表单元素 读取所有选中元素的文本内容 是
.val() 表单的value值 表单元素 第一个表单元素的value值 是
上一篇下一篇

猜你喜欢

热点阅读