jquery(一) 样式篇 - 13337159127/Note GitHub Wiki

1.jQuery对象与DOM对象是不一样的 2. p id=”imooc” jQuery的处理： var $p = $('#imooc'); $p.html('您好！通过慕课网学习jQuery才是最佳的途径').css('color','red'); 通过$('#imooc')方法会得到一个$p的jQuery对象，$p是一个类数组对象。这个对象里面包含了DOM对象的信息 3.jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。 4.通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。 5.如何把jQuery对象转成DOM对象？ 利用数组下标的方式读取到jQuery中的DOM对象 因为jQuery对象也是一个数组结构，可以通过数组下标索引找到第一个div元素。数组的索引是从0开始的，也就是第一个元素下标是0 jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引： var $div = $('div') //jQuery对象 var div = $div.get(0) //通过get方法，转化成DOM对象 6.DOM对象转化成jQuery对象 通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了 var $div = $(div); //jQuery对象 7.id选择器：一个用来查找的ID，即元素的id属性。id是唯一的，每个id值在一个页面中只能使用一次。语法：$( "#id" )。 8.类选择器:通过class样式类名来获取节点。语法：$( ".class" ) 9.元素选择器：根据给定（html）标记名称选择所有的元素。语法：$( "element" ) 10.全选择器（选择器）:语法：$( "通配符" ) 11.层级选择器:把文档树当作一个家谱，那么节点与节点直接就会存在父子，兄弟，祖孙的关系了。 $("div > p"),子选择器：选择所有指定 "div" 元素中 "p" 的直接子元素。选中 p $("div p")，后代选择器：选择给定祖先的所有后代元素，包括：该元素孩子，孙子，曾孙。 $(".prev + div"),相邻兄弟选择器：选择所有紧接在 “prev” 元素后的 "next" 元素。选中div元素。 $("prev - siblings"),一般兄弟选择器:匹配 “prev” 元素后的所有兄弟元素，具有相同的父元素。 12.基本筛选选择器: $(".div:first") ： 匹配第一个元素 $(".div:last") ： 匹配最后一个元素 $(".div:even") ： 选择索引为偶数元素，从0开始计数 $(".div:odd") ： 选择索引为奇数元素，从0开始计数 $(".aaron:eq(2)") ： 在匹配集合中选择索引为 eq(2) 的元素 $(".aaron:gt(3)") ： 选择匹配集合中所有大于给定（index，索引值的元素） 4 5 6 7..... $(".aaron:lt(2)") ： 选择匹配集合中所有小于给定（index，索引值的元素） 0 1........ $("input:not(:checked) + p") ： 一个过滤选择器，选择所有元素去除不匹配给定的选择器元素。 13.内容筛选选择器： $(".div:contains(':文本元素')"):选择所有包含指定文本的元素。 $(".div:hsa(span)"):选择元素中至少包含指定选择器的元素。 $("a:parent")：选择所有含有子元素或者文本元素 $("a:empty")：选择所有没有子元素的元素（包含文本节点）。 14.可见性筛选选择器： 元素有显示状态与隐藏状态，jQuery根据元素的状态扩展了可见性筛选选择器 :visible 与 :hidden $(":visible"):选择所有显示的元素 $("#div1:visible") $(":hidden"):选择所有隐藏的元素 15.属性筛选选择器： $('div[name=p1]') : 选择指定属性值 $('div[p2]') ： 指定属性的元素，该元素可以是任何值。 $('div[name|="-"]') ： 属性name中的值只包含一个连字符“-”的div元素 $('div[name~="a"]') ： 属性name中的值包含一个连字符“空”和“a”的div元素 $('div[name^=imooc]') ： 查找所有div中，属性name的值是用imooc开头的 $('div[name$=imooc]') ： 查找所有div中，属性name的值是用imooc结尾的 $('div[name="test"]') ： 查找所有div中，有属性name中的值包含一个test字符串的div元素 $('div[testattr!="true"]') ： 查找所有div中，有属性testattr中的值没有包含"true"的div 可以基于属性来定位一个元素。可以只指定该元素的某个属性，这样所有使用该属性而不管它的值，这个元素都将被定位， 16.jQuery选择器之子元素筛选选择器： $('.first-div a:first-child') ： 查找class="first-div"下的第一个a元素，针对所有父级下的第一个 $('.first-div a:last-child') ： 查找class="first-div"下的最后一个a元素，如果只有一个元素的话，last也是第一个也是最后一个元素 $('.first-div a:only-child') ： 查找class="first-div"下的只有一个子元素的a元素 $('.last-div a:nth-child(2)') ：查找class="last-div"下的第二个a元素 $('.last-div a:nth-last-child(2)') ： 查找class="last-div"下的倒数第二个a元素 17.表单元素选择器： $(":input"):input 选择器基本上选择所有表单控件 $("input：text"):匹配所有input元素中类型为text的input元素 $("input：password"):匹配所有input元素中类型为password的input元素 $("input：radio"):匹配所有input元素中的单选按钮,并选中 $("input：CheckBox"):匹配所有input元素中的复选按钮,并选中 $("input：submit"):匹配所有input元素中的提交的按钮,修改背景颜色 $("input：image"):匹配所有input元素中的图像类型的元素 $('input:button') ： 匹配所有input元素中类型为按钮的元素 $('input:file') ： 匹配所有input元素中类型为file的元素 18.jQuery选择器之表单对象属性筛选选择器： $('input:enabled')：查找所有input所有可用的（未被禁用的元素）input元素 $('input:disabled')：查找所有input所有不可用的（被禁用的元素）input元素 $('input:checked')：移除input的checked属性 $('option:selected'):移除option的selected属性