jQuery学习笔记之jQuery+CSS3的浏览器兼容性

CSS3充分吸收多年了web发展的需求，吸收了很多新颖的特性。例如border-radius

css3特性中最令人兴奋的莫过于选择器的增强，例如属性选择器可以根据某个属性值来选择标记，位置选择器可以根据子元素的位置来选择标记。

在目前很多使用的很多浏览器，例如IE7,主要支持css2.大部分属性选择器都不理想。

正是因为浏览器对css3的兼容性问题。各个浏览器都未对其做更好的标准支持。

jQuery通过预先的javascript编程，提供了几乎所有css3标准下的选择器。开发者可以利用这些选择器轻松选择各种元素。供javascript编程使用。

代码如下:

<script type="text/javascript">
            $(function() {
                $("li:nth-child(2)").addClass("altcss");
            });
        </script>

以上使用选择器li:nth-child(2),表示选择<li>中的第二个元素标记。并且可以在ie7和chorme浏览器中测试通过。

关于浏览器兼容性，其实是一个永恒的话题，从IE出现开始就一直在讨论，这里仅仅简单提供个思路，小伙伴们自由扩展吧。

赞 (0)

相关推荐

  • jquery.simple.tree插件 更简单，兼容性更好的无限树插件

    jquery.simple.tree插件 更简单，兼容性更好的无限树插件

    效果如下: 选择: 拖拽: jquery.simple.tree.官网地址: http://news.kg/wp-content/uploads/tree/(貌似已经打不开),不过因为操作比较简单,所以我们暂且用之. 前面讲过jquery EasyUI Tree插件,简单易用,但经过测试仍有诸多缺点, 例如: 1.兼容IE8的AJAX有问题. 2.如果异步返回数据较慢,将可能导致加载失败. 3.我们只使用其中的Tree功能,但其体积实在有点庞大.... 而我们需要的是,兼容性好,异步,体积小(用

  • jquery实现简单的拖拽效果实例兼容所有主流浏览器

    jquery实现简单的拖拽效果实例兼容所有主流浏览器

    最近发现web网页的拖拽效果,个人觉得是一种不错的用户体验,抽空研究了一下,原理还蛮简单的,下面贴一下我写的一个简单拖拽jquery自定义函数. jquery代码:fun.js 复制代码 代码如下: jQuery.fn.myDrag=function(){ _IsMove = 0; _MouseLeft = 0; _MouseTop = 0; return $(this).bind("mousemove",function(e){ if(_IsMove==1){ $(this).off

  • jQuery.event兼容各浏览器的event详细解析

    介绍之前先介绍jQuery的一个方法 jQuery.event.fix(event || window.event); 此方法个浏览器的event对象转换为 jQuery.event; 如果您的事件是通过jQuery方法绑定的,就不需要进行转换了! jQuery在遵循W3C规范的情况下,对事件的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常的运行而不需要进行浏览器类型判断. 1.event.type属性该方法作用是可以获取到时间的类型 复制代码 代码如下: $("a").cl

  • jQuery解决浏览器兼容性问题案例分析

    本文实例分析了jQuery解决浏览器兼容性问题的方法.分享给大家供大家参考,具体如下: 问题: 当用户在名为abc的input控件按下回车键时,触发另一控件imgLogin的click事件 在IE 中 document.getElementById('abc').click();能够调用abc的click事件 但是在FF中却不行. 解决方法: 必须以下这样: var evt = document.createEvent("MouseEvents"); evt.initEvent(&qu

  • jquery实现兼容浏览器的图片上传本地预览功能

    一.图片上传实现本地预览 由于上传图片功能,现在大多数都需要在本地实现预览,为了能够更好的让用户体验到效果,实现成品的证明,需要兼容好几种浏览器,所有通过各个例子整合了这个例子插件,兼容火狐.谷歌.ie8,其他的没有进行测试过 复制代码 代码如下: (function($){ jQuery.fn.extend({ uploadPreview: function(opts){ opts = jQuery.extend({ width: 0, height: 0, imgPreview: null,

  • zShowBox 图片放大展示jquery版 兼容性

    zShowBox 图片放大展示jquery版 兼容性

    zShowBox.js 复制代码 代码如下: /* * zShowBox (图片放大展示) */ function zShowBox(domChunk) { //为每张图片链接加上 class="zshowbox" var zcounter = 0; $(domChunk + ' a').each(function () { var a_href = $(this)[0].href.toLowerCase(); var file_type = a_href.substring(a_hr

  • jQuery的写法不同导致的兼容性问题的解决方法

    大概是这样的: 复制代码 代码如下: <table id ="cartable" > <tr id ="title"> <td>***</td> <td>***</td> <td>***</td> <td>***</td> <td>***</td> <td>***</td> <td>***

  • 两种方法基于jQuery实现IE浏览器兼容placeholder效果

    两种方法基于jQuery实现IE浏览器兼容placeholder效果

    placeholder是HTML5<input>的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 )中会有略微不同的显示效果: 在Chrome( v31.0.1650.63 m).Firefox( v21.0 ).360安全( v6.3 极速模式 )中,输入栏获得焦点后,提示文字并不消失,如图( Chrome ): 获得焦点前: 获得焦点时: 偏偏IE11要搞点特殊: 获得焦点前: 获得焦点时: 也就是说获得焦点时提示的文字会消失. 非现代浏览器( 例如 IE6-IE9 )是不支持pl

  • js与jQuery实现的兼容多浏览器Ajax请求实例

    ajax我们经常会用到的,但网上找到的大部份ajax兼容性都不强,下面自己改了一个不错的兼容性很强的ajax函数,同时后面介绍的jquery ajax 兼容性也很强. 一.纯js实现的Ajax实例: 复制代码 代码如下: var ajax = function() {}; ajax.prototype = {     request: function(method, url, callback, postVars) {         var xhr = this.createXhrObjec

  • jquery select动态加载选择(兼容各种浏览器)

    在ie6以上,我们可以通过 $("#selectID").val("xx");来个一个select控件赋值.但是在ie6下面会报错!!我们可以通过I下面方法来,使用方法:set_select_val($("#selectID" ),xx);//因为ie6不支持$("#" + provinceDom).attr("value", provinceDefvalue); 复制代码 代码如下: function s

  • JQuery操作Select的Options的Bug(IE8兼容性视图模式)

    JQuery操作Select的Options的Bug(IE8兼容性视图模式)

    Bug现场: 通过开发人员工具查看,下拉列表框是有Options的,但你点击选择的时候却什么也不显示. 重现步骤: 该问题发生在级联下拉框的情况,第一个列表改变,第二个列表的值跟着改变! 本例中使用以下方法绑定数据: 复制代码 代码如下: //绑定下拉框 //ctnSelector:下拉框ID,带#号, //jsonData:JSON数据, //txtField:文本字段名称, //valField:值字段名称, //strOptions:默认填加的项 function InitSelectOp

  • jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板

    jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板

    WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制,然后用户可以粘贴到想粘贴的地方. HTML 首先需要在页面中载入jquery库和zclip插件,这两个文件已经打好包,欢迎点击下载. <script type="text/javascript" src="js/jquery.js"></script&

随机推荐