首页手记 JQuery基础修炼宝典(1)

JQuery基础修炼宝典(1)

标签：

Html/CSS JQuery

一. JQuery操作Dom和js操作Dom对比:
通过JQuery操作Dom获取的是一个新的对象,封装了Dom对象和一些JQuery提供的样式便捷操作.

二.JQuery对象转化为DOM对象
我们首先需要明白 jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理.在很多场景中，我们需要jQuery与DOM能够相互的转换，它们都是操作的DOM元素，jQuery是一个类数组对象，DOM对象就是一个单独的DOM元素。
我们可以通过以下两种方法将JQuery对象转化为DOM对象:
1.var $div = $('div') //jQuery对象 var div = $div[0] //转化成DOM对象 div.style.color = 'red' //操作dom对象的属性
2.var $div = $('div') //jQuery对象 var div = $div.get(0) //通过get方法，转化成DOM对象 div.style.color = 'red' //操作dom对象的属性

三.DOM对象转化成jQuery对象
如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象

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

四.ID选择器
id选择器：一个用来查找的ID，即元素的id属性

$( "#id" )

id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;

五.类选择器
类选择器，顾名思义，通过class样式类名来获取节点

$( ".class" )//class为类名<div class = 'test'></div>

使用JQuery可以使用.css批量设置样式,无需循环

六.元素选择器

$( "element" )//其中element为元素名,例如div

使用JQuery可以使用.css批量设置样式,无需循环

七.全局选择器

$( "*" )

八.层级选择器
子选择器:$('parent>child')
后代选择器:$('ancestor descendant')
相邻兄弟选择器:$('prev+next')
一般兄弟选择器:$('prev~sublins')
总结一下:

层级选择器都有一个参考节点
后代选择器包含子选择器的选择的内容
一般兄弟选择器包含相邻兄弟选择的内容
相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下

九.基本元素筛选器

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>基本筛选器</h2>
    <h3>:first/:last/:even/:odd</h3>
    <div class="left">
        <div class="div">
            <p>div:first</p>
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>div:last</p>
            <p>:odd</p>
        </div>
    </div>
    <script type="text/javascript">
    //找到第一个div
    $('.div:first').css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
    //找到最后一个div
     $('.div:last').css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
    //:even 选择所引值为偶数的元素，从 0 开始计数
    $('.div:even').css("border", "3px groove red");
    </script>

    <script type="text/javascript">
    //:odd 选择所引值为奇数的元素，从 0 开始计数
    $('.div:odd').css("border", "3px groove blue");
    </script>

    <h3>:eq/:gt/:lt</h3>
    <div class="left">
        <div class="aaron">
            <p>:lt(3)</p>
        </div>
        <div class="aaron">
            <p>:lt(3)</p>
        </div>
        <div class="aaron">
            <p>:eq(2)</p>
        </div>
        <div class="aaron">
        </div>
        <div class="aaron">
            <p>:gt(3)</p>
        </div>
        <div class="aaron">
            <p>:gt(3)</p>
        </div>
    </div>
    <script type="text/javascript">
    //:eq
    //选着单个
    $('.aaron:eq(2)').css("border", "3px groove blue");
    </script>

    <script type="text/javascript">
    //:gt 选择匹配集合中所有索引值大于给定index参数的元素
    $('.aaron:gt(3)').css("border", "3px groove blue");
    </script>

     <script type="text/javascript">
    //:lt 选择匹配集合中所有索引值小于给定index参数的元素
    //与:gt相反
    $('.aaron:lt(2)').css("color", "#CD00CD");
    </script>

    <h3>:not</h3>
    <div class="left">
        <div>
            <input type="checkbox" name="a" />
            <p>Aaron</p>
        </div>
        <div>
            <input type="checkbox" name="b" />
            <p>慕课</p>
        </div>
        <div>
            <input type="checkbox" name="c" checked="checked" />
            <p>其他</p>$("input:not(:checked) + p")
        </div>
    </div>
    <script type="text/javascript">
        //:not 选择所有元素去除不匹配给定的选择器的元素
        //选取所有input中,没有checked属性的p元素，赋予颜色
        $("input:not(:checked) + p").css("background-color", "#CD00CD");
    </script>
</body>

</html>

$(':first') 匹配第一个元素
$('.last') 匹配最后一个元素
$(':even') 匹配偶数元素
$(':odd') 匹配奇数元素
$(':eq(index)') 索引值等于给定index值的元素
$(':gt(index)') 索引值大于给定index值的元素
$(':lt(index)') 索引值小于给定index值的元素
$(':not(selector)') 一个用来过滤的选择器,选择不匹配给定选择器的元素
$(':root') 选择该文档的根元素
$('.animated') 选择所有正在执行动画的元素

十.内容筛选选择器
$(':contains(text)') 选择所有包含指定文本的元素
$(':has(selector)') 选择元素的后代元素包含匹配器至少匹配一种的元素
$(':parent') 选择含有子元素或者文本元素的元素
$(':empty') 选择没有子元素或者文本元素的元素结点

总结一下:
1) :contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
2) 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的.
3):parent与:empty是相反的，两者所涉及的子元素，包括文本节点

十一.可见性筛选选择器
Jquery可以根据元素的隐藏或者显示状态来进行筛选.
$(':visible') 选择所有显示的元素
$(':hidden') 选择所有隐藏的元素
visible和hidden的选择条件是该元素是否占据文档中的空间.
我们有几种方式可以实现元素的隐藏:
1)CSS display的值是none。
2)type="hidden"的表单元素。
3)宽度和高度都显式设置为0。
4)一个祖先元素是隐藏的，该元素是不会在页面上显示
5)CSS visibility的值是hidden
6)CSS opacity的指是0
对于以上方法,1-4是会被hidden选择器选中,5.6会被visible选择器选中

十二.属性筛选选择器
$('[attribute=value]') 元素某个属性的值等于value
$('[attribute]') 含有某个属性的所有元素
$('[attribute='value']') 元素某个属性的值中的某个字符之后有"-"连接符
$('[attribute~='value']') 元素某个属性的值中的某个字符之后有"空格"连接符
$('[attribute^=value]') 元素某个属性的值以'value'开头
$('[attribute$=value]')元素某个属性的值以'value'结尾,这个是区分大小写的
$('[attribute*=value]') 元素某个属性的值含有'value'
$('[attribute!=value]') 元素属性值不等于'value'
$('[attributfilter1][attributefilterN]')连续属性选择器

CSS选择器无论CSS2.1版本还是CSS3版本，IE7和IE8都支持，webkit、Gecko核心及Opera也都支持，只有IE6以下浏览器才不支持

[attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"]等
[attr*="value"]能在网站中帮助我们匹配不同类型的文件

点击查看更多内容