JQuery基础
2015-10-28 21:36
761 查看
一、语法的基本结构: 第一步:导入JQuery脚本包。 第二步:写JQuery的ready事件 $(document).ready(function(){ //在这里面写代码。 }); 或者$(); 注意: 1.JQuery的触发时机。。。。。。。。。 2.非侵入性的编码方式。 3.链式结构的编码方式。 4.集合式操作。操作选择器选择出来的一组对象。 特点(或者说优势): 1.写的少,做得多 2.体积小 3.链式编程 4.隐式迭代、插件丰富(bootstarp)、开源、免费等、、、、迭代=循环 二、具体语法 (一)找到元素 选择器的种类:同样式表(CSS3.0) 第一类:基本选择器 1.最最基本的:标签,ID选择器,class选择器 2.组合选择器:空格(后代),逗号,标签名.class,> (子级选择器) 第二类: 过虑选择器 1.基本过滤(按照HTML标记的书写顺序来过滤) :first - 第一个 :last - 最后一个 :eq(索引号) - 任意一个 :lt(索引号) - 大于某个索引号 :gt(索引号) - 小于某个索引号 :odd - 奇数个 :even - 偶数个 :not(选择器) - 排除 2.属性过滤 [属性名] - 选择拥有这个属性的元素 [属性名=值] - 找属性名是某个值的 [属性名!=值] [属性名*=值] - 属性值中包含某个值 [属性名^=值] 属性值是以..开头 [属性名$=值] 属性值是...结尾 3.内容过滤 :has(选择器) - 开始与结束标记之间是否包含某类子元素,如果包含,就选择出来。 :contains(字符串) - 开始与结束标记之间是否包含某段文字,如何包含就选择出来。 (二)DOM操作 1.操作元素本身 操作属性,操作样式,操作内容 (1)操作属性: a.获取属性值:var s = xxx.attr("属性名"); b.添加属性:attr("属性名","属性值") c.移除属性:removeAttr("属性名") (2)操作样式: 1).操作样式的class选择器 addClass("class选择器的名") removeClass("class选择器的名") toggleClass("class选择器的名") 切换样式 2).操作内联样式 css("样式名") 获得样式值 css("样式名","样式值") 设置和替换样式 (3)操作内容 1)表单元素: 取值:var s = xxxx.val() 赋值:xxx.val("值") 2)非表单元素: 取值:var s = xxx.html(); var s = xxx.text(); 赋值:xxx.html("值");xxx.text("值") <textarea>dsfasdfasdf</textarea> 2.操作相关元素 找相关元素:父、子、兄弟、前、后 操作相关元素:添加、复制、删除、替换 (三)事件与动画 一、事件 1.在JavaScript语法中的事件,把onxxxxx中的on去掉,就是JQuery中的事件。 onclick - click ondblclick - dblclick onmouseover - mouseover onmouseout - mouseout onfocus - focus onblur - blur onchange - change onkeydown - keydown onkeyup - keyup onkeypress - keypress 2.特有事件: hover(function(){},function(){}):相当于把mouseover和mouseout结合起来了 toggle(function(){},function(){},...function(){}):每点击一下执行下一个function,如执行到末尾,会再返回第一个执行 3.JQuery中的事件,需要事件的小括号中写function(){} $("#Button1").click(function(){ //事件处理代码 }); 案例: 1.光棒效果:mouseover,mouseout 2.展开面板:click 二、动画 hide(),show() fadeIn(),fadeOut() slideUp(),slideDown() slideUp([毫秒数],[回调函数]) slideUp(3000,function(){xxx();})
相关文章推荐
- JQ数组=jQuery对象数组
- 8、第八次课jquery第一节20151006
- jQuery延迟对象deferred的使用
- JQuery 回到顶端
- jQuery学习之旅 Item10 ajax快餐
- jQuery学习之旅 Item10 ajax快餐
- Jquery easyui总结
- 用jquery的方式使用handlebars模板
- jquery-easyui中的表单验证
- jquery easyui的tabs使用时的问题
- jQuery中的事件出路
- jquery.autocomplete样本
- 插件--旋钮插件jQuery knob
- jquery easyui学习教程-accordion
- jquery.validate.js的基本用法入门
- JQUERY实现判断鼠标往上滚往下滚的功能。
- JQUERY实现判断鼠标往上滚往下滚的功能。
- jquery 滚动到底部加载
- jquery layer弹窗弹层插件 小巧强大
- jQuery插件开发