189 8069 5689
Jquery实战
站在用户的角度思考问题，与客户深入沟通，找到新安网站设计与新安网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站制作、网站建设、企业官网、英文网站、手机端网站、网站推广、域名与空间、虚拟空间、企业邮箱。业务覆盖新安地区。
基本的CSS选择器
熟悉web开发的人员一定对css的选择功能相当的了解，通过css选择功能，我们可以在css样式文件里轻松的将样式应用到选择的页面元素上。jQuery也正是采用了这样的机制，使jQuery的元素选择能力易常强大。
a——选择所有元素
#specialID——选择匹配id为specialID的元素
.specialClass——选择匹配拥有css类sepcialClass的元素
a#specialID.specialClass——选择匹配id为specialID、有用css类specialClass的元素
p a.specialClass——匹配拥有css类specialClass、在
元素内的元素
除了支持传统的css选择器，Jquery还支持CSS3选择功能。
子节点选择器
$("p a") 选择元素
的直接子节点的元素，非直接子节点的元素将不会被选择到
特性选择器
特性选择器在匹配的选择元素上过滤满足某特性(属性)的元素
如我们需要做如下的'选择：匹配所有指向本网站之外地址的链接，我们可以这样选择
$("a[href^=http://") 该选择器选择具有href属性，且href属性值以http://开始的链接元素
特性选择的语法是：
选择具有某特性(属性)的元素
form[method]
选择具有某特性，且属性值为指定值的元素
input[type=text]
选择匹配特性以特定字符开头的元素
div[title^=my] ——选择匹配title特性值已my开头的所有div元素
选择匹配特性以特定字符结束的元素
a[href$=.pdf] ——选择引用了pdf文件的所有链接元素
其他
a[href*=jquery.com]选择引用jQuery网站的所有链接元素
过滤符
通过过滤符选择器可以在已选择的元素中过滤出需要的元素，上面的特性选择器也属于过滤符，另外还有“:”字符
如：
li:has(a)—— 选择匹配包含元素的所有
元素
1. 基础过滤符：
:first：匹配多个对象中的第一个对象
:last：匹配多个对象中的最后一个对象
:not(selector)：匹配去除了not后面选择符中内容的项，not中的selector只能是过滤选择器，不能是查找选择器
:even：匹配所有对象中的第偶数个
:odd：匹配所有对象中的第奇数个
:eq(index)：匹配某一下表的单独某元素
:gt(index)：匹配大于某一下标的所有元素
:lt(index)：匹配小于某一下标的所有元素
:header：匹配所有的header元素，例如h1,h2,h3,h4,h5,h6
:animated：匹配所有有动画效果的元素
2. 内容过滤符：
:contains(text)：匹配内部拥有该文本元素的对象，包含间接有用的情况
:empty：匹配所有没有子元素的对象
:has(selector)：匹配所有至少含有一个子选择符的对象
:parent：匹配元素，这些元素包含子元素（包括文本元素）
3. 可见性过滤符：
:hidden：匹配所有隐藏对象，或者input中的hidden类型
:visible：匹配所有可见的对象
4. 子过滤符：
:nth-child(index/even/odd/equation)：匹配子元素中的某一下标/偶数/奇数/等式的对象，:eq(index)只能匹配某单一对象的子元素特征，而这个方法可以匹配多个对象的某一子元素共同特征 nth-child过滤器，从1开始计数，这主要是与css标准兼容。
:first-child：匹配第一个子元素
:last-child：匹配最后一个子元素
这两个匹配符也可以对多个父对象的所有子元素进行匹配操作
:only-child：如果一个父元素只有一个子元素，就匹配这个子元素
5. 表单过滤符
:input ：匹配表单内input元素
:text ：匹配表单内input type为text的元素
:password ：匹配表单内input type为password的元素
:radio ：匹配表单内input type为radio的元素
:checkbox ：匹配表单内input type为checkbox的元素
:submit ：匹配表单内input type为submit的元素
:image ：匹配表单内image的元素
:reset ：匹配表单内input type为reset的元素
:button ：匹配表单内input type为button的元素
:file ：匹配表单内input type为file的元素.
:hidden ：匹配表单内input type为hidden的元素或者hidden区域
:enabled ：匹配所有启用元素
:disabled ：匹配所有非启用元素
:checked ：匹配所有选中元素
:selected ：匹配所有下拉列表选中元素
查找选择器和筛选选择器的概念区别
为了能灵活的使用jQuery,认清查找选择器、筛选选择器之间的区别是非常重要的。筛选选择器，通过对元素应用更高的选择标准（如过滤特性或或其他相关值），缩小正在匹配的元素的集合；查找选择器，比如后代选择器（空格）、子节点选择器（）以及兄弟节点选择器（+）等，则查找与已选择元素具有某种关系的其他元素，而不是通过把标准应用于已匹配元素来限制匹配范围。 ;
HTML是由多种骨头(标签)组成的骨架。
HTML5是更多的新骨头(标签),同时去掉了以前觉得不好用的骨头.
CSS是皮肤。CSS3是更美的皮肤
JS控制单个动作。(抬手,张嘴,放下手,抬腿,转头,握拳等)
jQuery是把一组常用动作编排成了一个招式。
以下的东西等他学完JS后，
如果问 jQuery 和 JS 有什么区别？，jQuery能不能取代JS？你再告诉他这个。
用招式(jQuery)跟电脑沟通更方便，不过招式(jQuery)是用单个动作(JS)组合而成的，
所以永远不可能取代单个动作(JS)
招式(jQuery)编排了很多常用的动作(比如跑步，吃饭，跳跃，下蹲)。
但是如果需要某些高难度动作(比如 空中转体720°用脸着地)，而招式(jQuery) 里还没有编排。
那就需要自己用单个动作(JS)来组合一个。
var getKeyFramse = function(index){ var styleSheet = document.styleSheets[index], keyframesRule = []; [].slice.call(styleSheet.cssRules).forEach(function(item){ if (item.type === CSSRule.WEBKIT_KEYFRAMES_RULE) { keyframesRule.p...
拖放（Drag 和 drop）是 HTML5 标准的组成部分。
浏览器支持:Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
被拖元素，dragElement :
(1)添加事件：ondragstart
(2)添加属性：dragable
放置元素，dropElement:
1、添加事件：ondargenter , ondragover , ondragleave , ondragend ,ondrop
和mouser划入划出一类的事件很类似，字面也很好理解，不赘述了，下面会用例子来说明。
2、页面上元素间的拖放
下面用个小例子，div间的拖放来展示，各个事件如何被触发：
系统中选择的一个或多个文件拖入该div中，files中会存储拖入文件的信息，然后我们通过file可以得到文件的类型，长度，内容然后实现上传。
3、setDragImage(image, x, y)用于设置鼠标移动过程中随鼠标一起移动的效果图。必须在dragstart中设置。
4、types,effectAllowed和dropEffect分别是拖入元素的类型，拖拽过程中鼠标显示的样式，不过通常可以忽略这几个属性，一般用不到。
他们都是当前web前端开发所需的技术，js是网页脚本语言，h5是目前最流行的HTML开发语言，css3是层叠样式表，专门用于布局，jQuery是用js写的框架，做动态网页用的
js和jquery做不到的，首先这个是css3中的3d转换，用到transform：rotateX(50deg) ，只不过是旋转中心要在你画的线中间，设置transform-origin:50% 0; （这里是xy轴，可以理解为集合第四项现，所以旋转轴所在位置就是红色箭头位置的坐标，x和-y）
整理代码：
div{ width:500px; height:500px; background:#333; transform-origin:50% 0; transform:rotateX(50deg);
如有疑问欢迎咨询