jQuery学习基础理论（二）

来源：互联网发布：淘宝网安徽食品药品编辑：程序博客网时间：2024/06/09 23:10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <meta charset="UTF-8">    <title>JQuery选择器</title>    <script type="text/javascript" src="scripts/jquery-3.2.1.js"/></head><body><script type="text/javascript">    <!--为id为tt的元素添加样式color=red-->    $('#tt').css("color","red");    if(document.getElementById("tt")){        document.getElementById("tt").style.color="red";    }    /*$('#tt')获取的是一个对象，检验对象是否存在用下面的方法：*/    if($('#tt').length > 0){        //other code    }    if($('#tt')[0]){        //other code    }    //获取网页中的所有p元素，并且添加onClick事件    var items = document.getElementsByTagName("p");    for(var i=0;i<items.length;i++){        items[i].onclick = function () {            //do something        }    }    //使一个特定的表格隔行变色    var item1 = document.getElementById("id");    var tbody = item1.getElementsByTagName("tbody")[0];    var trs = tbody.getElementsByTagName("tr");    for(var i=0;i<trs.length;i++){        if(i%2==0){            trs[i].style.backgroundColor="red";        }    }    //对多选框进行操作，输出选中的多选框的个数    var btn = document.getElementById("btn");    btn.onclick = function () {        var arrays = new Array();        var item2 = document.getElementsByName("check");        for(var i=0;i<item2.length;i++){            if(item2[i].checked){                arrays.push(item2[i].value);            }        }        alert("选中的个数是:" + arrays.length);    }    //获取表单内表单元素的个数    $('#form :input').length;    //获取表单内单行文本框的个数    $('#form :text').length;</script></body></html><!--CSS选择器（1）标签选择器：以文档元素作为选择符td {    font-size: 14px;    width: 120px;}（2）ID选择器：以文档元素的唯一标识符ID作为选择符#id{    font-size: 14px;    width: 120px;}（3）类选择器：以文档元素的class作为选择符.hj {    font-size: 14px;}（4）群组选择器：多个选择符应用同样的样式规则td,p,.hj{    color: red;}（5）后代选择器：元素E的任意后代元素F#links a{    color: red;}（6）通配选择符：以文档元素的所有元素作为选择符* {    font-size: 14px;}=============================================================JQuery选择器和CSS选择器的不同：JQuery选择器找到元素后是添加行为；CSS选择器是找到元素后添加样式。=============================================================JQuery基本选择器（1）#id 根据给定的id匹配一个元素   返回单个元素    $('#id');（2）.class 根据给定的类名匹配元素  返回集合元素  $('.phone');（3）element 根据给定的元素名匹配元素  返回集合元素  $('p')选取所有的<p>元素（4）* 匹配所有的元素 返回集合元素 $("*")选取所有的元素（5）selector1,selector2,...selectorN  将每一个选择器的匹配到的元素合并后一起返回 返回集合元素JQuery层次选择器（通过DOM元素之间的层次关系来获取特定的元素）（1）$('ancestor descendant') 选取ancestor元素里的所有descendant（后代）元素   返回集合元素  $('div span')选取<div>里的所有<span>元素（2）$('parent>child') 选取parent元素下的child元素，与上面有区别，上面选的是后代元素     返回集合元素  $('div>span')选择div元素下元素名是<span>的子元素。（3）$('prev+next')选取紧接在prev元素后的next元素  返回集合元素  $('.one+div')返回class为one的紧接着的div元素  等价于next()方法（4）$('prev~siblings')选取prev元素之后的所有siblings元素  返回集合元素 $('#two~div')选择id=two的元素后面的所有<div>同辈元素  等价于nextAll()方法JQuery过滤选择器（通过特定的过滤规则来筛选出所需要的DOM元素）基本过滤选择器:first 选取第1个元素，返回单个元素，$('div:first')选取所有<div>元素中第1个<div>元素:last 选取最后1个元素，返回单个元素，$('div:last')选取所有<div>元素中最后1个元素:not(selector) 去除所有与给定选择器匹配的元素，返回集合元素，$('input:not(.myClass)')选取class不是myClass的input元素:even 选取索引是偶数的所有元素，索引从0开始 返回集合元素  $('input:even')选取索引是偶数的input元素:odd 选取索引是奇数的所有元素，索引从0开始 返回集合元素 $('input:even')选取索引是奇数的input元素:eq(index) 选取索引等于index的元素(index从0开始) 返回单个元素 $('input:eq(1)')选取索引等于1的input元素:gt(index) 选取索引大于index的元素（index从0开始） 返回集合元素 $('input:get(1)')选取索引大于1的input元素（大于1，但是不包括1）:lt(index) 选取索引小于index的元素（index从0开始） 返回集合元素 $('input:lt(1)')选取索引小于1的input元素（小于1，但是不包括1）:header 选取所有的标题元素，例如h1,h2等等 返回集合元素 $(':header')选取网页中所有<h1>,<h2>...:animated 选取当前正在执行动画的所有元素 返回集合元素 $('div:animated')选取正在执行动画的<div>元素:focus 选取当前获取焦点的元素 返回集合元素 $(':focus')选取当前获取焦点的元素内容过滤选择器:contains(text) 选取含有文本内容为"text"的元素，返回集合元素，$('div:contains('我')')选取含有文本"我"的div元素:empty 选取不包含子元素或者文本的空元素，返回集合元素，$('div:empty')选取不包含子元素（包含文本元素）的div空元素:has(selector)选取含有选择器所匹配的元素的元素  集合元素$('div:has(p)')选取含有<p>元素的div元素:parent选取含有子元素或者文本的元素，返回集合元素，$('div:parent')选取拥有子元素（包括文本元素）的div元素可见性过滤选择器（根据元素的可见和不可见状态来选择相应的元素）:hidden 选取所有不可见的元素  返回集合元素 $(':hidden')选取所有不可见的元素，包括<input type="hidden"/>,<div style="display:none;">和<div style="visibility:hidden;">等元素，如果只选中input元素，可以使用$('input:hidden');:visible 选取所有可见的元素 ，返回集合元素  $('div:visible')选取所有可见的div元素属性过滤选择器(通过元素的属性来获取相应的元素)[attribute] 选取拥有此属性的元素，返回集合元素,$('div[id]')选取拥有属性id的元素[attribute=value],选取属性的值为value的元素，返回集合元素，$('div[title=test]')选取属性title为test的div元素[attribute!=value],选取属性的值不等于value的元素，返回集合元素，$('div[title!=test]')选取属性title不等于test的div元素，没有属性title的div元素也会被选取[attribute^=value],选取属性值以value开始的元素，返回集合元素，$('div[title^=test]')选取属性title以test开始的div元素[attribute$=value],选取属性值以value结束的元素，返回集合元素，$('div[title$=test]')选取属性title以test结束的div元素[attribute*=value],选取属性的值含有value的元素，返回集合元素，$('div[title*=test]')选取属性title中含有test的div元素[attribute|=value],选取属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-”）的元素,$('div[title|='en']')选取属性title等于en或以en为前缀（该字符串后跟一个连字符'-'）的元素。[attribute~=value],选取属性用空格分隔的值中包含一个给定值的元素，返回集合元素，$('div[title~='uk']')选取属性title用空格分隔的值中包含字符uk的元素[attribute1][attribute2][attributeN]，用属性选择器合并成一个符合属性选择器，满足多个条件，每选择一次，缩小一次范围。返回集合元素，$('div[id][title$='test']')选取拥有属性idm并且属性title以test结束的div元素。子元素过滤选择器:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素（index从1开始），返回集合元素，:eq(index)只匹配一个元素，:nth-child将每一个父元素匹配子元素，且:nth-child(index)的index是从1开始的，但是:eq(index)是从0开始；even:选取每个父元素下的索引值是偶数的元素；odd：选取每个父元素下的索引是奇数的元素；2表示能选取每个父元素下的索引值等于2的元素；3n表示能选取每个父元素下的索引值是3的倍数的元素，n从1开始3n+1表示能选取每个父元素下的索引值是3n+1的倍数的元素，n从1开始:first-child，选取每个父元素的第1个子元素，返回集合元素，:first只是返回单个元素，:first-child选择符将为每个父元素匹配第1个子元素。$('ul li:first-child')选择每个ul后面第一个li元素:last-child,选取每个父元素的最后一个子元素，返回集合元素，同样，:last只返回单个元素，:last-child选择符将为每个父元素匹配最后一个子元素。$('ul li:last-child')选择每个ul最后一个li元素。:only-child,如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配。返回集合元素，$('ul li:only-child')在ul中选取是唯一子元素的li元素。表单对象属性过滤选择器（对所选择的表单元素进行过滤）:enabled,选取所有可用的元素，返回集合元素，$('#form1 :enabled')选取id为form1的表单内的所有可用元素:disabled,选取所有不可用的元素，返回集合元素，$('#form1 :disabled')选取id为form1的表单内的所有不可用元素:checked,选取所有被选中的元素（单选框，复选框），返回集合元素，$('input:checked')选取所有被选中的input元素:selected,选取所有被选中的选项元素（下拉列表），返回集合元素，$('select option:selected')选取所有被选中的选项元素表单选择器:input 选取所有的input textarea select button元素，返回集合元素:text 选取所有的单行文本框，返回集合元素:password 选取所有的密码框，返回集合元素:radio 选取所有的单选框，返回集合元素:checkbox 选取所有的多选框，返回集合元素:submit 选取所有的提交按钮，返回集合元素:image 选取所有的图像按钮，返回集合元素:reset 选取所有的重置按钮，返回集合元素:button 选取所有的按钮，返回集合元素:file 选取所有的上传域，返回集合元素:hidden 选取所有不可见元素，返回集合元素选择器中的一些注意事项（1）选择器中含有"."   "#"  "("  "]"等特殊字符，需要对其进行转义 //对特殊字符进行转义 <div id="id#b"></div> ========$('#id\\#b') <div id="id[1]"></div>========$('#id\\[1\\]');（2）属性选择器的@符号jquery1.3.1版本以上就可以不再属性前面添加@符号（3）选择器中空格多一个少一个也会得到不同的结果。-->
阅读全文
0 0