本文翻译自jQuery Cookbook (OReilly 2009) 1.0 The jQuery Philosophy jQuery的哲学是“写更少的代码，做更多的事情”，这一哲学可分述为三个概念：用CSS选择器查找元素，并通过jQuery方法来操作这些元素 在元素集上链式调用多个jQuery方法 jQuery封装与隐式遍历 充分理解这三个概念对于编写jQuery代码来说至关重要。我们来详细看一下这三个概念。 查找元素并进行操作 更准确的说，是在DOM树中定位一批元素，然后对该元素集进行操...
译自jQuery Cookbook (OReilly 2009) Chapter 2 Selecting Elements with jQuery, 2.0 Introduction jQuery的核心是它的选择器引擎，其作用是从文档中通过名称、属性、状态等将元素筛选出来。由于CSS的广泛使用，在jQuery中采用CSS的选择器语法就成了很自然的选择。在支持绝大多数CSS1-3规范中的选择器之外，jQuery还增加了很多自定义的选择器来根据一些特殊的状态选择元素；与此同时，我们还可以自己编写选择器。 在文档中定位某个...
1、图片滚动 代码如下: $(document).ready(function () { Xhun(".a"); //----------------------只需要修改 ”.a" (就是最大的div的class值这里就行---------------------}); function Xhun(_box) { var box_frame = _box + " div ul"; var box_div = _box + " div"; $(_box).find("ul").wrap(""); //添加一个div，来控制偏移量 $(box_div).append($(box_frame).clone()); //克隆一个ul并...
代码如下: #img1 { width:400px; height: 400px; border: solid 1px #ccc; display:none; } $(function () { $('#Button1').click(function () { $('#img1').show(5000); //图片的展开 }) $('#Button2').click(function () { $('#img1').hide(5000); //图片的伸缩 }) }) JavaScript教程/参考手册 JavaScript热搜 自定义vue组件发布到npm的方法Vue利用canvas实现移动端手写板的方法vue2.0 移动端实现下拉...
代码如下: 内容过滤选择器：根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中有可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种 标记，并在其中...
$("form").attr("check"); $("form").prop("check"); 两种都可以，不过新版jquery推荐第二种，两个在其他方面都差不多，我发现的唯一不同就是在checkbox上的时候，需要用prop，不然IE浏览器会不兼容 代码如下: <scripttype="text/javascript"src="/js/jq1.3.2.js"></ script> <divlang="rrery">
作为WEB前端开发者，jQuery和CSS3肯定用得也比较多，那么下面就分享一些由jQuery和CSS3制作成的特效，希望大家会喜欢。 1、基于jQuery和CSS3的圆盘抽奖 这个小程序可以让你在网站上轻松的添加一个抽奖应用，应用是基于jQuery和CSS3开发的，圆盘抽奖很好玩的哦，你抽中了什么？在线演示 /源码下载 2、纯CSS3实现的点击发光按钮特效 这款按钮时基于纯CSS3实现的，当用户点击按钮的瞬间，按钮四周会发出淡淡的白光效果，是一款非常有特...
今天在项目中需要做远程数据加载并渲染页面，直到开发阶段才意识到ajax跨域请求的问题，隐约记得Jquery有提过一个ajax跨域请求的解决方式，于是即刻翻出Jquery的API出来研究，发 JQuery对于Ajax的跨域请求有两类解决方案，不过都是只支持get方式。分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。 什么是jsonp格式呢？API原文：如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用js...
代码如下: .imgclass{ width:300px; height:300px; border:solid 1px red;} $(function () { $('#Button1').bind('click', function () { $('img').slideUp(2000); }) $('#Button2').bind('click', function () { $('img').slideDown(2000); }) $('#Button3').bind('click', function () { $('...
代码如下: $(function () { $('#form1').validate({ rules: { txtUser: { required: true, minlength: 6 }, txtPassword: { required: true, minlength: 6 }, txtConfirm: { required: true, minlength: 6, equalTo: "#password" }, txtHomePage: { required: true, url: true }, txtBirt...
代码如下: table{border:1px solid #666;} table td{border:1px solid #eee;width:200px;height:200px;} img{width:200px;height:200px;border:none;position:relative;} $(function () { // $('img').click(function () { // $('img').animate({ left: '-=200px' }, 2000).animate({ left: '-=200px' }, 2000) // .animate(...
目前JqueryUI提供的对话框支持使用相对比较的方便，示例代码如下所示： 代码如下: $(function () {$("#dlg").dialog({autoOpen: false,closed: true,width: 450,modal: true,appendTo: "form",buttons: {"OK": function () {$("form").submit();},"Cancle": function () {$(this).dialog("close");}},close: function () {}});$("#").button().click(function() { $("#dlg").dialog("open"); return false });}); 其中值得注意的...
代码如下: "http://www.w3.org/TR/html4/loose.dtd"> 选项卡插件制作 *{margin: 0;padding: 0} .tab{width: 350px;margin: 100px auto;} .tabnav li{ list-style:none;cursor:pointer;float: left;width: 80px;border: 1px solid #ccc;border-radius: 5px;margin-right: 5px; height:24px;line-height: 24px;text-align: center;} .tabnav li.cur{background:#daa520;} .tabcontent{display:...
jQuery实现Tab切换 接触jQ不久以前的js代码来写的简单效果现在用jQ来写： HTML代码： 代码如下: 最新评论近期热评随机文章 1234567890-1 1234567890-2 1234567890-3 css代码： 代码如下: #sidebar-tab{border:1px solid #ccf;margin-bottom:1.5em;overflow:hidden;} #tab-title h3{color:#666;font-size:15px;font-weight:400;} #tab-title .selected{color:#356aa0;border-bottom:0px;} /*标题被选中时的样式*/ #tab-tit...
代码如下: jq控制左右箭头滚动图片列表 *{ margin:0; padding:0;font-size: 12px;} ul{ list-style:none;} .slider{ width:760px;border: 1px #708090 solid; padding:10px 20px;height: 130px;margin: 100px auto;position: relative;cursor: pointer;} #slider_pic{ width: 630px;margin:0 auto;overflow: hidden;height: 130px;position: relative;} .prev,.next{position: absolute;width: 20px;heigh...