判断一个层是否隐藏:& & 复制代码代码如下:& & $("#id").css("display")=="none" ;& & 在所有匹配的元素中，设置一个样式属性的值:& & 复制代码代码如下:& & $("p").css("color","red");& & 把一个“名/值对”对象设置为所有匹配元素的样式属性。& & 这是一种在所有匹配的元素上设置大量样式属性的最佳方式& & 复制代码代码如下:& & $("p").css({ color: "#ff0011", background: "blue" });& & 如果属性名包含 "-"的话，必须使用引号:& & 复制代码代码如下:& & $("p").css({ "margin-left": "10px", "background-color": "blue" });& & QQ空间
百度搜藏更多& & Tags：Jquery css& & 复制链接收藏本文打印本文关闭本文返回首页& & 上一篇：最新28个很棒的jQuery 教程& & 下一篇：如何书写高质量jQuery代码(使用jquery性能问题)& & 相关文章jQuery基础框架浅入剖析再次分享18个非常棒的jQuery表格插件jQuery 核心函数以及jQuery对象jquery 多行文本框(textarea)高度变化uploadify 3.0 详细使用说明jQuery AJAX 调用WebService实现代码jQuery Selector选择器小结JQuery Dialog的内存泄露问题解决方法jquery实现的导航固定效果解决自定义$(id)的方法与jquery选择器$冲突的问题& & 文章评论& & 最 近 更 新& & $.each与$().each的区别示例介绍jQuery 顺便学习下CSS选择器 奇偶匹配nthjquery验证手机号码、邮箱格式是否正确示jquery中eq和get的区别与使用方法jQuery 页面载入进度条实现代码Jquery跳到页面指定位置的方法使用jquery选择器如何获取父级元素、同级自写的jQuery异步加载数据添加事件利用cookie记住背景颜色示例代码从零开始学习jQuery (十) jQueryUI常用功& & 热 点 排 行& & jquery JSON的解析方式jquery 将disabled的元素置为enaJQuery中each()的使用方法说明jquery $(document).ready() 与wjQuery.Autocomplete实现自动完成Jquery插件之多图片异步上传jquery ajax提交表单数据的两种方jquery加载页面的方法(页面加载完JQuery上传插件Uploadify使用详解jquery validate.js表单验证的基
声明：该文章系网友上传分享，此内容仅代表网友个人经验或观点，不代表本网站立场和观点；若未进行原创声明，则表明该文章系转载自互联网；若该文章内容涉嫌侵权，请及时向
上一篇：下一篇：
相关经验教程
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.002 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益您现在的位置： &
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
html 文件 l 　　复制代码 代码如下:　　&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""& &html xmlns=""& &head& &meta http-equiv="Content-Type" content="text/ charset=utf-8" /& &title&多行滚动jQuery循环新闻列表代码&/title& &style type="text/css"& ul,li{margin:0;padding:0} img{border:0} a{text-decoration:border:0} /* 横向滚动 */ #scrollDiv2{border:#ccc 1} #scrollDiv3{border:#ccc 1} &/style& &script src="../jquery-1.8.0.min.js" type="text/javascript"&&/script& &script src="wordscroll-0.1.js" type="text/javascript"&&/script& &script type="text/javascript"& $(document).ready(function(){ $.wordScroll({ objId:"scrollDiv2" }); $.wordScroll({ objId:"scrollDiv3", isHorizontal:true }); }); &/script& &/head& &body& &div id="scrollDiv2"& &ul& &li&这是公告标题的第一行&/li& &li&这是公告标题的第二行&/li& &li&这是公告标题的第三行&/li& &li&这是公告标题的第四行&/li& &li&这是公告标题的第五行&/li& &li&这是公告标题的第六行&/li& &li&这是公告标题的第七行&/li& &li&这是公告标题的第八行&/li& &li&这是公告标题的第九行&/li& &/ul& &/div& &div id="scrollDiv3"& &ul& &li&这是公告标题的第一行&/li& &li&这是公告标题的第二行&/li& &li&这是公告标题的第三行&/li& &li&这是公告标题的第四行&/li& &li&这是公告标题的第五行&/li& &li&这是公告标题的第六行&/li& &li&这是公告标题的第七行&/li& &li&这是公告标题的第八行&/li& &li&这是公告标题的第九行&/li& &/ul& &/div& &/body& &/html&
js文件 wordscroll-0.1.js 　　复制代码 代码如下:　　&P&/** * 多行文字滚动，可以实现向左和向上两种滚动 * **/ $.extend({ wordScroll:function(opt,callback){ //alert("suc"); this.defaults = { objId:"", width:300, // 每行的宽度 height:100, // div的高度 liHeight:25, // 每行高度 lines:2, // 每次滚动的行数 speed:1000, // 动作时间 interval:2000, // 滚动间隔 picTimer:0, // 间隔句柄，不需要设置，只是作为标识使用 isHorizontal:false // 是否横向滚动 } //参数初始化 var opts = $.extend(this.defaults,opt); // 纵向横向通用 $("#"+opts.objId).css({ width:opts.width, height:opts.height, "min-height":opts.liHeight, "line-height":opts.liHeight+"px", overflow:"hidden" }); $("#"+opts.objId+" li").css({ height:opts.liHeight }); if(opts.lines==0) opts.lines=1; // 横向滚动 if(opts.isHorizontal){ $("#"+opts.objId).css({ width:opts.width*opts.lines + "px" }); $("#"+opts.objId+" li").css({ "display":"block", "float":"left", "width":opts.width + "px" }); $("#"+opts.objId+" ul").css({ width:$("#"+opts.objId).find("li").size()*opts.width + "px" });&/P&&P& // 横向使用，不够一屏则不滚动 if($("#"+opts.objId).find("li").size()&=opts.lines)
var scrollWidth = 0 - opts.lines*opts. }else{ //如果不够一屏内容 则不滚动 if($("#"+opts.objId).find("li").size()&=parseInt($("#"+opts.objId).height()/opts.liHeight,10))
var upHeight=0-opts.lines*opts.liH } // 横向滚动 function scrollLeft(){ $("#"+opts.objId).find("ul:first").animate({ marginLeft:scrollWidth },opts.speed,function(){ for(i=1;i&=opts.i++){ $("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first")); } $("#"+opts.objId).find("ul:first").css({marginLeft:0}); }); }; // 纵向滚动 function scrollUp(){ $("#"+opts.objId).find("ul:first").animate({ marginTop:upHeight },opts.speed,function(){ for(i=1;i&=opts.i++){ $("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first")); } $("#"+opts.objId).find("ul:first").css({marginTop:0}); }); }; //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放 $("#"+opts.objId).hover(function() { clearInterval(opts.picTimer); },function() { opts.picTimer = setInterval(function() { // 判断执行横向或纵向滚动 if(opts.isHorizontal) scrollLeft(); else scrollUp(); },opts.interval); // 自动播放的间隔，单位：毫秒 }).trigger("mouseleave"); } }) &/P&
&&&主编推荐
&&&热门试卷
&&&最新视频
&&&热门阅读
&&&最新问答
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&&&湘教QS2-164&&增值电信业务经营许可证湘B2-页面导航：
→ 正文内容 jQuery实现按需加载css,js
模拟jQuery中的ready方法及实现按需加载css,js实例代码
这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码，有需要的朋友可以参考一下
一、ready函数的实现经常用jQuery类库或其他类库中的ready方法，有时候想想它们到底是怎么实现的，但是看了一下jQuery中的源码，涉及到的模块比较多，(水平有限)代码比较难看懂；自己结合了一些书籍内容，总结一下。先说一下ready函数的实现思路：变量ready通过表达式赋值，右侧为一个自执行匿名函数，在这个匿名函数中，首先为各个浏览器的事件绑定处理函数，并为isReady赋值(根据事件异步处理程序来确定)，然后返回一个传参闭包，在闭包中，主要判断isReady值来执行操作，如果dom结构准备就绪(isReady === true)，执行回调，否则将回调加入到要执行的队列(funs)中，待事件处理程序执行时，循环遍历队列(funs)，并依次执行队列中的函数，执行完队列中的函数后，还需要清除队列(funs = null)。 代码如下:var ready = (function(){&&& var isReady = false,&&& funs = [];&&& function handle (e) {&&&&&&& if ( isReady ) {&&&&&&&&&&&&&&&&&& }&&&&&&& if ( e.type === 'readystatechange' && (document.readyState !== 'interactive' && document.readyState !== 'complete') ) {&&&&&&&&&&&&&&&&&& }&&&&&&& for ( var i = 0; i & funs. i++ ) {&&&&&&&&&&& funs[i].call(document);&&&&&&& }&&&&&&& isReady =&&&&&&& funs =&&& }&&& if ( document.addEventListener ) {&&&&&&& document.addEventListener( 'DOMContentLoaded', handle, false );&&&&&&& document.addEventListener( 'readystatechange', handle, false );&&&&&&& document.addEventListener( 'load', handle, false );&&& }&&& else if ( document.attachEvent ) {&&&&&&& document.attachEvent( 'onreadystatechange', handle );&&&&&&& document.attachEvent( 'onload', handle );&&& }&&& return function ready (callback) {&&&&&&& if ( isReady ) {&&&&&&&&&&& callback.call(document);&&&&&&& }&&&&&&& else {&&&&&&&&&&& funs.push(callback);&&&&&&& }&&& };}());PS:该函数代码参照于权威指南书籍，唯一不同的是，多加了一个判断document.readyState !== 'interactive' 代码如下:if ( e.type === 'readystatechange' && (document.readyState !== 'interactive' && document.readyState !== 'complete') ) {&&&}在各个浏览器中交互和完成状态出现顺序并不能保证一致，这取决于浏览器及页面的内容，多加了这个判断document.readyState !== 'interactive'的话，意思是不管哪个阶段先出现，代码都能更早的执行。二、按需加载css，js参照了jQuery源码，写了一个type函数，返回参数类型。
代码如下:/**&*&* 判断参数类型&* createTime: &*&*/function type (obj) {&&& var classTypes, objectT&&& if ( obj == null ) {&&&&&&& return String(obj);&&& }&&& classTypes = {};&&& objectTypes = ('Boolean Number String Function Array Date RegExp Object Error').split(' ');&&& for ( var i = 0, len = objectTypes. i & i++ ) {&&&&&&& classTypes[ '[object ' + objectTypes[i] + ']' ] = objectTypes[i].toLowerCase();&&& }&&& if ( typeof obj === 'object' || typeof obj === 'function' ) {&&&&&&& var key = Object.prototype.toString.call(obj);&&&&&&& return classTypes[key];&&& }&&&} 代码如下:// css按需加载function loadCss (cssUrl, callback) {&&& var elem, bl,&&&&&&& isExecuted = // 防止在ie9中，callback执行两次&&& if ( cssUrl == null ) {&&&&&&& return String(cssUrl);&&& }&&& elem = document.createElement('link'),&&& elem.rel = 'stylesheet';&&& if ( type(callback) === 'function' )& {&&&&&&& bl =&&& }&&& // for ie&&& function handle() {&&&&&&& if ( elem.readyState === 'loaded' || elem.readyState === 'complete' ) {&&&&&&&&&&& if (bl && !isExecuted) {&&&&&&&&&&&&&&& callback();&&&&&&&&&&&&&&& isExecuted =&&&&&&&&&&& }&&&&&&&&&&& elem.onreadystatechange =&&&&&&& }&&& }&&& elem.onreadystatechange =&&& // for 非ie&&& if (bl && !isExecuted) {&&&&&&& elem.onload =&&&&&&& isExecuted =&&& }&&& elem.href = cssU&&& document.getElementsByTagName('head')[0].appendChild(elem);}// js按需加载function loadScript(scriptUrl, callback) {&&& var elem, bl,&&&&&&& isExecuted = // 防止在ie9中，callback执行两次&&& if (scriptUrl == null) {&&&&&&& return String(fn);&&& }&&& elem = document.createElement('script');&&& if ( type(callback) === 'function' )& {&&&&&&& bl =&&& }&&& // for ie&&& function handle(){&&&&&&& var status = elem.readyS&&&&&&& if (status === 'loaded' || status === 'complete') {&&&&&&&&&&& if (bl && !isExecuted) {&&&&&&&&&&&&&&& callback();&&&&&&&&&&&&&&& isExecuted =&&&&&&&&&&& }&&&&&&&&&&& elem.onreadystatechange =&&&&&&& }&&& }&&& elem.onreadystatechange =&&& // for 非ie&&& if (bl && !isExecuted) {&&&&&&& elem.onload =&&&&&&& isExecuted =&&& }&&& elem.src = scriptU&&& document.getElementsByTagName('head')[0].appendChild(elem);}PS: 在判断link，script元素是否加载完毕，主要依靠load事件；而在ie9以下浏览器中，并没有load事件，ie为它们都添加了一个readystatechange事件，通过判断元素的readyState状态确定元素是否已经加载完毕；而奇怪的是，在ie9(还可能存在其他浏览器版本)中，元素既有load事件又有readystatechange事件，因此在代码中添加了一个变量isExecuted，如果执行过回调，那么就不再执行，避免回调执行两次。三、调用方式 代码如下:loadCss('http://www.jb51.net/apps/tbtx/miiee/css/base.css', function(){&&& console.log('css加载完毕');});loadScript('http://www.jb51.net/apps/tbtx/miiee/js/jQuery.js', function(){&&& console.log('js加载完毕');});ready(function(){&&& console.log('dom is ready!');});
您可能感兴趣的文章:
上一篇：下一篇：
最 近 更 新
热 点 排 行
12345678910编程开发子分类jquery入门篇 设置css 给input赋取与获取input输入框值代码
来源：&&&时间： 20:23:31&&&阅读数：
[导读] jquery入门篇 设置css教程 给input赋取与获取input输入框值代码&script language=&网页特效&&$( linkflash) css(display,none);
给linkflash设置css$(& linkl&) val(http:
www 111cn net);
给linkl赋值$(
jquery入门篇 设置 给input赋取与获取input输入框值代码&script language=&&&$('#linkflash').css('display','none');//给linkflash设置css$(&#linkl&).val('');//给linkl赋值$(&#link_url&).val();//获取link_url值&/script&&div id=&linkflash&&加载我会被jquery隐藏哦&/div&&input id=&link_url& type=&text& value=&jquery获取到我的值& /&&input id=&linkl& type=&text& value=&给我赋值& /&
除非特别声明，PHP100新闻均为原创或投稿报道，转载请注明作者及原文链接原文地址：
延伸阅读 More
视频教程 Video
网站服务：
专题合作 : qujing#(#换成@)
会员问题 :
友情链接 :
网站投稿 :
@php100官方
php100官方微信
Copyright (C) 2007-, All Rights Reserved 版权所有 京ICP备号-14
请关注php100官方微信}