认识jQuery及jQuery选择器

记录自己平时要注意的,如您看到哪里错误,望指正

认识jQuery

jQuery对象和DOM对象

var domObj = document.getElementById("id")//DOM对象
var $Obj = $("#id")//jQuery对象 

在jQuery对象中无法使用DOM对象

jQuery对象和DOM对象的转化

  1. jQuery对象转化成DOM对象

    jQuery对象是类似数组的对象,两种转换方法[index]和get(index)

    var $obj = $("#id");
    var domObj = $obj[0];
    或
    var domObj = $obj.get(0);
  2. DOM对象转化成jQuery对象

    对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象。

    var domObj = document.getElementById("id");
    var $obj = $(domObj)

平时用到的jQuery对象都是通过$()函数制造出来的,$()函数就是jQuery对象的制造工厂

解决jQuery冲突问题

  1. 在其他库之后导入

    jQuery.noConflict();
    jQuery(function(){
        jQuery("#id").....
        
    })
    //自定义快捷方式
    var $j = jQuery.noConflict();
    $j(function(){
        $j("#id").....
        
    })
    //使用$,但不冲突
    jQuery.noConflict();
    jQuery(function($){
        $("#id").....
        
    })
    //jQuery.noConflict();
    //(function($){
    //    $("#id").....
    //     
    //})
  2. 在其他库之前导入
    无需调用jQuery.noConflict()

jQuery选择器

$(“selestor”)获取的永远是对象,即使selector元素不存在。

:contains(text)

选取含有文本内容为“text”的元素

:hidden

包括样式属性display为“none”、文本隐藏域(<input type=”hidden”>)和visibility:hidden之类的元素

[attribute|=value] [attribute~=value]

| :选取属性等于给定字符串或以该字符串为前缀的元素(跟“-”)

~ :选取属性用空格分隔的值中包含一个给定值得元素

:子元素过滤几个区别

:nth-child:选择父元素下的第index个子元素(index从1算起)
:eq(index):值匹配一个元素

:first与:first-child、:last与:last-child 同理

选择器含有空格的注意事项

加空格可能是指后代元素

    原文作者:Huahua_Chen
    原文地址: https://segmentfault.com/a/1190000008572486
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞