jquery基础篇(一)— —选择器

jquery基础

（一）、下载jquery库，地址：http://jquery.com/
（二）、jquery基础

一、jQuery对象转化成DOM对象1、利用数组下标的方式读取到jQuery中的DOM对象2、通过jQuery自带的get()方法    var $div = $('div'); //jQuery对象    var divObject1 = $div[1]; //方式1:转换成DOM对象    var divObject2 = $div.get(2); //方式2:通过get方法，转换成DOM对象    divObject1.style.color = 'red'; //操作dom对象的属性    divObject2.style.color = 'green'; //操作dom对象的属性二、DOM对象转化成jQuery对象如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象    var div = document.getElementsByTagName('div'); //dom对象    //将dom节点div转化为$div的jquery对象    var $div =  $(div);    var $first = $div.first(); //找到第一个div元素    $first.css('color', 'red'); //给第一个元素设置颜色

(三)、基础选择器

    1、id选择器，id= "test"  — —   $("#test")/$('#test')    2、class选择器，class = "test"  — —   $(".test")     ```     <script type="text/javascript">        //通过原生方法处理        //样式是可以多选的，所以得到的是一个合集;需要通过循环给合集中每一个元素修改样式        var divs = document.getElementsByClassName('aaron');        for (var i = 0; i < divs.length; i++) {            divs[i].style.border = "3px solid blue";        }    </script>    <script type="text/javascript">        //通过jQuery直接传入class;class选择器可以选择多个元素        $('.aaron').css("border", "3px solid red");    </script>     ```    3、元素标签，比如<p> — —  $("p")    4、* 选择器(取走全部铅笔) — —  $("*")        $("form *") //表示取表格form下所有子元素    5、多种多个并列使用(sele1,sele2,seleN选择器)        $(".red,.green,#blue")    6、选择某标签类型的某class        $('div.myClass') // 选择class为myClass的div元素二、层级选择器parent，child层次选择器；通过层次选择器，可以快速定位某一层次的一个或多个元素，    6、$("ancestor descendant")；选取ancestor元素里所有descendant(后代)元素。如:$("p label") //表示p元素下所有label层    7、$(“parent > child”)，相当于一个家庭中的子辈们，但不包括孙辈    8、$(“prev + next”),通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素(选取紧接在prev元素后的next元素)，格式如下：

    9、$(“prev ~ siblings”),使用prev ~ next选择器，获取<p>元素后面相邻的全部元素(选取prev元素之后的所有siblings元素)

(四)、过滤性选择器

    1、:first过滤选择器    2、:eq(index)过滤选择器        小例子：        <ol>            <li>葡萄</li>            <li>香蕉</li>            <li>橘子</li>            <li>西瓜</li>            <li>苹果</li>        </ol>        $("li:last").css("background-color", "red");//最后一个        $("li:eq(0)").css("background-color", "red");//第一个        $("ol").find("li").eq(2).css("background-color", "red");//第三个    3、:contains(text)过滤选择器，按照文本内容来查找一个或多个元素    比如：$("li:contains('西瓜')")    4、:has(selector)过滤选择器        <ol>            <li><p>我是P先生</p></li>            <li><label>L妹纸就是我</label></li>            <li><p>我也是P先生</p></li>            <li><label>我也是L妹纸哦</label></li>            <li><p>P先生就是我哦</p></li>        </ol>        <script type="text/javascript">            $("li:has('label')").css("background-color", "blue");//法一        //  $("li>label").css("background-color", "blue");//法二        //  $("li label").css("background-color", "blue");//法三        //  $("li:has(label)").css("background-color", "blue");//法四        //  $("label").css("background-color", "blue");//法五        //  $("li:contains('L')").css("background-color", "blue");//法六        </script>    5、:hidden过滤选择器，$("p:hidden"),选择器获取不可见的<p>元素    6、:visible过滤选择器,$("p:visible"),获取的是全部可见的元素    7、[attribute=value]属性选择器        比如：$("li[title='水果']")，选择title属性为水果的li             $('input[name=first]') // 选择name属性等于first的input元素    8、[attribute!=value]属性选择器，属性选择器的功能是获取不包含属性名    9、[attribute*=value]属性选择器，获取属性值中包含某一指定内容的全部        比如：$("li[title*='果']")选择所有有果字段的元素    10、:first-child子元素过滤选择器，第一个子元素    11、:last-child子元素过滤选择器，最后一个元素

//可以通过子类选择器  p:first-child 筛选出每一个dd中的的第一个a元素    $("p:first-child").css('color','#9932CC');//把a元素从顺序1-5加上颜色//可以通过基本筛选器lt,选择匹配集合中所有索引值小于给定index参数的元素,注意了index是从0开始计算，所以选在1-5,为对应的index就是4    $("a:lt(4)").css('color','red');//在所有a元素中找到属性名name="setColor"的元素，并设置颜色//这里用的属性选择器[attribute='value']选择指定属性是给定值的元素    $("a[name='setColor']").css('color','blue');//选中2个dd列表中第10个元素，并改变颜色//这里用了nth-child 选择的他们所有父元素的第n个子元素    $("dd a:nth-child(10)").css('color','#66CD00');//找到把a元素中包含文字"更多"的节点，改变颜色    $("a:contains('更多')").css('color','#C71585');

(五)、对结果进行过滤筛选

   $('div').has('p'); // 选择包含p元素的div元素　　$('div').not('.myClass'); //选择class不等于myClass的div元素　　$('div').filter('.myClass'); //选择class等于myClass的div元素　　$('div').first(); //选择第1个div元素　　$('div').eq(5); //选择第6个div元素

我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法：

    $('div').next('p'); //选择div元素后面的第一个p元素　　$('div').parent(); //选择div元素的父元素　　$('div').closest('form'); //选择离div最近的那个form父元素　　$('div').children(); //选择div的所有子元素　　$('div').siblings(); //选择div的同级元素

(六)、表单选择器

    a、表单选择器        1、:input表单选择器,返回全部的表单元素    b、与type类型有关的表单**选择器        2、:text表单文本选择器，可以获取表单中全部单行的文本输入框元素    3、:password表单密码选择器，获取表单中全部的密码输入文本框元素    4、:radio单选按钮选择器，获取表单中的全部单选按钮元素    5、:checkbox复选框选择器，获取其中的全部复选框元素    6、:submit提交按钮选择器，获取表单中的这个提交按钮元素    7、:image图像域选择器，获取其中图像全部元素    8、:button表单按钮选择器，获取其中的全部按钮元素    c、状态有关        9、:checked选中状态选择器,可以获取处于选中状态的全部元素。    10、:selected选中状态选择器，只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素

(七)、操作DOM元素

1、使用attr()方法控制元素的属性, 设置或者返回元素的属性    $("#a1").attr("href","www.imooc.com");//设置    var $url = $("#a1").attr("href");//返回2、html()和text()方法操作元素的内容，当两个方法的参数为空时，表示获取该元素的内容，而如果方法中包含参数，则表示将参数值设置为元素内容。3、addClass()和css()方法可以方便地操作元素中的样式，前者括号中的参数为增加元素的样式名称，后者直接将样式的属性内容写在括号中。    $("#content").css({"background":"#ff0000","color":"White"});4、removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能，前者方法中参数表示移除属性名，后者方法中参数则表示移除的样式名5、使用append()方法向元素内追加内容6、使用appendTo()方法向被选元素内插入内容，使用格式是：$(content).appendTo(selector)7、使用before()和after()在元素前后插入内容，用格式分别为：    $(selector).before(content)和$(selector).after(content)8、使用clone()方法复制元素，格式：$(selector).clone()9、replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容    如： <span class="green" title="hi">我是屌丝</span>         <script type="text/javascript">            var $html = "<span class='red' title='hi'>我是土豪</span>";            $($html).replaceAll(".green");        </script>10、使用wrap()和wrapInner()方法包裹元素和内容，前者用于包裹元素本身，后者则用于包裹元素中的内容，它们的调用格式分别为：$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)11、使用each()方法遍历元素，    例如，遍历页面中的<span>元素，当元素的序列号为2时，添加名为“focus”的样式，如下图所示：

12、使用remove()和empty()方法删除元素，remove()方法删除所选元素本身和子元素，该方法可以通过添加过滤参数指定需要删除的某些元素，而empty()方法则只删除所选元素的子元素。

(八)、事件和应用

1、页面加载时触发ready()事件，ready()事件类似于onLoad()事件，但前者只要页面的DOM结构加载后便触发，而后者必须在页面全部元素加载成功才触发，ready()可以写多个，按顺序执行。此外，下列写法是相等的：    $(document).ready(function(){})等价于$(function(){});2、使用bind()方法绑定元素的事件，bind()方法绑定元素的事件非常方便，绑定前，需要知道被绑定的元素名，绑定的事件名称，事件中执行的函数内容就可以，它的绑定格式如下：    $(selector).bind(event,[data] function)  参数event为事件名称，多个事件名称用空格隔开，function为事件执行的函数。3、4、5、

(九)、常用的工具方法

   $.trim() 去除字符串两端的空格。　　$.each() 遍历一个数组或对象。　　$.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。　　$.grep() 返回数组中符合某种标准的元素。　　$.extend() 将多个对象，合并到第一个对象。　　$.makeArray() 将对象转化为数组。　　$.type() 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。　　$.isArray() 判断某个参数是否为数组。　　$.isEmptyObject() 判断某个对象是否为空（不含有任何属性）。　　$.isFunction() 判断某个参数是否为函数。　　$.isPlainObject() 判断某个参数是否为用"{}"或"new Object"建立的对象。　　$.support() 判断浏览器是否支持某个特性。

参考：
1、http://www.imooc.com/code/64
2、《JQuery设计思想》http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.html