jQuery选择器大全

一、背景色渐变兼容    background: -webkit-linear-gradient(#ffb750,#ff9a50); /* Safari 5.1 - 6.0 */      background: -o-linear-gradient(#ffb750,#ff9a50); /* Opera 11.1 - 12.0 */      background: -moz-linear-gradient(#ffb750,#ff9a50); /* Firefox 3.6 - 15 */      background: linear-gradient(#ffb750,#ff9a50); /* 标准的语法 */      二、textarea    1、resize:none //禁止textarea拉伸    2、textarea 中的 placeholder不显示    <textarea id="zxmlZIPDesc" placeholder="请输入文件描述" style="width:100%;height:50px;resize: none;">空格</textarea>   三、jquery选择器大全    $("#myELement")    选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素    $("div")           选择所有的div标签元素，返回div元素数组    $(".myClass")      选择使用myClass类的css的所有元素    $("*")             选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass")          层叠选择器：    $("form input")         选择所有的form元素中的input元素    $("#main > *")          选择id值为main的所有的子元素    $("label + input")     选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素    $("#prev ~ div")       同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签          基本过滤选择器：    $("tr:first")               选择所有tr元素的第一个    $("tr:last")                选择所有tr元素的最后一个    $("input:not(:checked) + span")             过滤掉：checked的选择器的所有的input元素          $("tr:even")               选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）    $("tr:odd")                选择所有的tr元素的第1，3，5... ...个元素    $("td:eq(2)")             选择所有的td元素中序号为2的那个td元素    $("td:gt(4)")             选择td元素中序号大于4的所有td元素    $("td:ll(4)")              选择td元素中序号小于4的所有的td元素    $(":header")    $("div:animated")   内容过滤选择器：          $("div:contains('John')") 选择所有div中含有John文本的元素    $("td:empty")           选择所有的为空（也不包括文本节点）的td元素的数组    $("div:has(p)")        选择所有含有p标签的div元素    $("td:parent")          选择所有的以td为父节点的元素数组        可视化过滤选择器：          $("div:hidden")        选择所有的被hidden的div元素    $("div:visible")        选择所有的可视化的div元素        属性过滤选择器：          $("div[id]")              选择所有含有id属性的div元素    $("input[name='newsletter']")    选择所有的name属性等于'newsletter'的input元素          $("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素          $("input[name^='news']")         选择所有的name属性以'news'开头的input元素    $("input[name$='news']")         选择所有的name属性以'news'结尾的input元素    $("input[name*='man']")          选择所有的name属性包含'news'的input元素          $("input[id][name$='man']")    可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素          子元素过滤选择器：          $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")          $("div span:first-child")          返回所有的div元素的第一个子节点的数组    $("div span:last-child")           返回所有的div元素的最后一个节点的数组    $("div button:only-child")       返回所有的div中只有唯一一个子节点的所有子节点的数组          表单元素选择器：          $(":input")                  选择所有的表单输入元素，包括input, textarea, select 和 button          $(":text")                     选择所有的text input元素    $(":password")           选择所有的password input元素    $(":radio")                   选择所有的radio input元素    $(":checkbox")            选择所有的checkbox input元素    $(":submit")               选择所有的submit input元素    $(":image")                 选择所有的image input元素    $(":reset")                   选择所有的reset input元素    $(":button")                选择所有的button input元素    $(":file")                     选择所有的file input元素    $(":hidden")               选择所有类型为hidden的input元素或表单的隐藏域          表单元素过滤选择器：          $(":enabled")             选择所有的可操作的表单元素    $(":disabled")            选择所有的不可操作的表单元素    $(":checked")            选择所有的被checked的表单元素    $("select option:selected") 选择所有的select 的子元素中被selected的元素                   选取一个 name 为”S_03_22″的input text框的上一个td的text值    $(”input[@ name =S_03_22]“).parent().prev().text()          名字以”S_”开始，并且不是以”_R”结尾的    $(”input[@ name ^='S_']“).not(”[@ name $='_R']“)          一个名为 radio_01的radio所选的值    $(”input[@ name =radio_01][@checked]“).val();                              $("A B") 查找A元素下面的所有子节点，包括非直接子节点    $("A>B") 查找A元素下面的直接子节点    $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点    $("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点          1. $("A B") 查找A元素下面的所有子节点，包括非直接子节点          例子：找到表单中所有的 input 元素          HTML 代码:          <form>    <label>Name:</label>    <input name="name" />    <fieldset>          <label>Newsletter:</label>          <input name="newsletter" />    </fieldset>    </form>    <input name="none" />    jQuery 代码:          $("form input")    结果:          [ <input name="name" />, <input name="newsletter" /> ]          2. $("A>B") 查找A元素下面的直接子节点    例子：匹配表单中所有的子级input元素。          HTML 代码:          <form>    <label>Name:</label>    <input name="name" />    <fieldset>          <label>Newsletter:</label>          <input name="newsletter" />    </fieldset>    </form>    <input name="none" />    jQuery 代码:          $("form > input")    结果:          [ <input name="name" /> ]          3. $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点    例子：匹配所有跟在 label 后面的 input 元素          HTML 代码:          <form>    <label>Name:</label>    <input name="name" />    <fieldset>          <label>Newsletter:</label>          <input name="newsletter" />    </fieldset>    </form>    <input name="none" />    jQuery 代码:          $("label + input")    结果:          [ <input name="name" />, <input name="newsletter" /> ]                4. $("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点    例子：找到所有与表单同辈的 input 元素          HTML 代码:          <form>    <label>Name:</label>    <input name="name" />    <fieldset>          <label>Newsletter:</label>          <input name="newsletter" />    </fieldset>    </form>    <input name="none" />    jQuery 代码:          $("form ~ input")    结果:          [ <input name="none" /> ]   四、怎么控制select option的对齐方式    direction 属性规定文本的方向 / 书写方向。    ltr - 默认。文本方向从左到右。        rtl - 文本方向从右到左。        inherit - 规定应该从父元素继承 direction 属性的值。      在CSS里设置你的 select 添加 direction 属性，值为 rtl 可将select内的option的文字右对齐，亲自试过，移动端和pc端都好用    ul li select,    select option {        direction: rtl;    }五、js页面跳转常用的几种方式    1、<script language="javascript" type="text/javascript">    window.location.href="jb51.jsp?backurl="+window.location.href;    </script>    <span onclick="window.location.href='index.html'"></span>    2、<script language="javascript">    alert("返回");    window.history.back(-1);    </script>    3、<script language="javascript">    window.navigate("jb51.jsp");    </script>    4、<script language="JavaScript">    self.location='jb51.htm';    </script>    5、<script language="javascript">    alert("非法访问！");    top.location='jb51.jsp';    </script>    6、网址从传参获得并转向    <script language="javascript" type="text/javascript">    function request(paras){    var url = location.href;    var paraString = url.substring(url.indexOf("?")+1,url.length).split("&");    var paraObj = {}    for (i=0; j=paraString[i]; i++){    paraObj[j.substring(0,j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=")+1,j.length);    }    var returnValue = paraObj[paras.toLowerCase()];    if(typeof(returnValue)=="undefined"){    return "";    }else{    return returnValue;    }    }    var theurl    theurl=request("url");    if (theurl!=''){    location=theurl    }    </script>    六、jQuery常用的一些技巧汇总        1、回到顶部按钮    利用jQuery里的animate和scrollTop方法，你便不需要使用插件创建简单的滚动到顶部动画。    $('.top').click(function (e) {     e.preventDefault();     $('html, body').animate({scrollTop: 0}, 800);    });    通过scrollTop的值来改变你想要滚动到的位置。其实你就是做了：在接下来的800毫秒中让页面滚动，直到它滚动到文档的顶部。        2、图片预加载    如果你的网页使用了很多隐藏图片文件（例如：鼠标悬停展示的图片），那么图片的预加载是有意义的：    $.preloadImages = function () {     for (var i = 0; i < arguments.length; i++) {     $('<img>').attr('src', arguments[i]);     }    };    $.preloadImages('img/hover-on.png', 'img/hover-off.png');            3、判断图片是否加载完    有时候你可能需要检查图像是否已经加载完成，以便于可以继续执行相应的js代码：    $('img').load(function () {     console.log('image load successful');    });    曾经遇到过的使用场景：有些元素需要按图片的实际尺寸来设置其大小，以绝对布置方式放置。元素的大小设置可以在图片加载完成后计算。        4、自动修补破损图像    如果你碰巧发现在你的网站上发现破损的图像链接，一个个去替代他们是痛苦的。这个简单的代码可以节省很多的麻烦：    $('img').on('error', function () {     if(!$(this).hasClass('broken-image')) {     $(this).prop('src', 'img/broken.png').addClass('broken-image');     }    });    即使你没有任何断开的链接，加入这代码也不会有任何影响。        5、禁用输入    有时你可能需要用表单的提交按钮或者某个输入框直到用户执行了某个动作（比如：检查“我已阅读条款”复选框）。在你的输入框上设置disabled属性，然后当你需要的时候启用该属性：    $('input[type="submit"]').prop('disabled', true);    你需要做的只是需要在输入框上再次运行prop方法，但设置的被禁用值是false：    $('input[type="submit"]').prop('disabled', false);    对地不了解prop函数的jQuery开发者来说，最常使用的是attr函数，可能开发很多程序都没有发现什么问题，但是，在开发例如checkbox、radio、select时，会发现使用attr无法让属性生效，以为是jQuery的bug，下面来说说attr和prop的使用建议:    在遇到要获取或设置checked,selected,readonly和disabled等属性时，用prop方法显然更好        6、使两个DIV同等高度    有时你会想要两个DIV有相同的高度，无论他们都有什么内容：    $('.div').css('min-height', $('.main-div').height());    这个例子设置了DIV的最小高度，这意味着它的高度只可以比这个设置的高度大而不能小。然而，一个更灵活的方法是循环的一组元素，并设置将最高元素的高度作为高度：    var $columns = $('.column');    var height = 0;    $columns.each(function () {     if ($(this).height() > height) {     height = $(this).height();     }    });    $columns.height(height);    如果你想要所有的列有相同的高度：    var $rows = $('.same-height-columns');    $rows.each(function () {     $(this).find('.column').height($(this).height());    });        7、根据文本获取元素    通过jQuery中的contains()选择器，你能找到一个元素内的文本内容。如果文本不存在，则这个元素将被隐藏：    var search = $('#search').val();    $('div:not(:contains("' + search + '"))').hide();        8、可见变化的触发    当用户不再聚焦或者重新聚焦一个标签时触发javascript脚本：    $(document).on('visibilitychange', function (e) {     if (e.target.visibilityState === "visible") {     console.log('Tab is now in view!');     } else if (e.target.visibilityState === "hidden") {     console.log('Tab is now hidden!');     }    });