jQuery基础_1
2016-07-03 23:28
239 查看
jQuery事件的因果关系是怎么样的一个格式:
【正式接触jQuery】
(1)jQuery的书写步骤:
1.引入jQuery文件;
2.新建一对script标签来书写jQuery;
3.用jQuery的方式进行代码分离;
4.按照jQuery用谁就选谁的原则去书写代码;
【jQuery的css修改】
alert()弹出一个警示框;弹出的信息可以写在小括号里面作为参数;
css()
1.单属性获取,格式css("要获取的css属性名称")
2.单属性修改,格式css("参数1","参数2")
参数1:表示要修改的css属性名称;
参数2:表示要修改的值;
3.多属性修改,格式css({属性名:"值",属性名:"值",...})
注意:关于css复合属性的修改;遇到复合属性需要按照驼峰式命名法去书写css属性;
【基础选择器】
>表示选中指定的元素唯一的一级子代元素;
+表示选中指定元素其后紧邻的唯一一个元素;
~表示选中指定元素后面所有的兄弟元素;
在jQuery中所有的过滤选择器都有一个特点,都以冒号开头;
【过滤选择器】
:not()在指定的元素中排除某一个元素或某一类元素;
:eq()按照指定的索引值进行过滤,(注意程序中的索引值是从0开始的);
:gt()过滤大于指定索引值的所有元素;
:lt()过滤小于指定索引值的所有元素;
(注意:无论是大于还是小于,都是不包含自己本身的;)
【内容选择器】
:contains("text"):匹配含有text内容的元素
:empty:匹配内容为空的元素
:has(selector):选择包含有selector的选择器
:parent:选择作为父元素的元素
【筛选选择器】
筛选选择器中有3个巨头选择器,父子兄;
特点;所有的筛选选择器都是一个函数的形势,所以它不会写在选择符号的内部;
父;parent()选中当前元素的父级元素;
子;children()选中当前元素的子集元素,小括号内可以再次传递参数进行更精细的筛选;
兄;sibling()选中当前元素所有的同级兄弟元素;(不包含自己)
$(this)注意在事件当中使用
jQuery当中的动画和事件是遵循一个叫做排队机制的原理,也就是说如果一次触发执行了很多动画那么后面的动画不会自动替换前面的而会一直排队等待执行;
解决方法:在执行动画之前用stop()函来清空排队;
$("button").click(function(){ });
【正式接触jQuery】
(1)jQuery的书写步骤:
1.引入jQuery文件;
2.新建一对script标签来书写jQuery;
3.用jQuery的方式进行代码分离;
4.按照jQuery用谁就选谁的原则去书写代码;
【jQuery的css修改】
alert()弹出一个警示框;弹出的信息可以写在小括号里面作为参数;
css()
1.单属性获取,格式css("要获取的css属性名称")
2.单属性修改,格式css("参数1","参数2")
参数1:表示要修改的css属性名称;
参数2:表示要修改的值;
3.多属性修改,格式css({属性名:"值",属性名:"值",...})
注意:关于css复合属性的修改;遇到复合属性需要按照驼峰式命名法去书写css属性;
$("div").click(function (){ $(this).css("width","200px"); });
【基础选择器】
>表示选中指定的元素唯一的一级子代元素;
+表示选中指定元素其后紧邻的唯一一个元素;
~表示选中指定元素后面所有的兄弟元素;
<div> <p></p> <p>123</p> <p></p> <p>456</p> </div>
$("p~").click(function(){ alert(123) });
在jQuery中所有的过滤选择器都有一个特点,都以冒号开头;
【过滤选择器】
:not()在指定的元素中排除某一个元素或某一类元素;
:eq()按照指定的索引值进行过滤,(注意程序中的索引值是从0开始的);
:gt()过滤大于指定索引值的所有元素;
:lt()过滤小于指定索引值的所有元素;
(注意:无论是大于还是小于,都是不包含自己本身的;)
<div> <p></p> <p>123</p> <p></p> <p>456</p> </div>
$("p").eq(0).click(function(){ alert(123) });
【内容选择器】
:contains("text"):匹配含有text内容的元素
:empty:匹配内容为空的元素
:has(selector):选择包含有selector的选择器
:parent:选择作为父元素的元素
<div> <p></p> <p>123</p> <p></p> <p>456</p> </div>
$("p:parent").click(function(){ alert(123) });
【筛选选择器】
筛选选择器中有3个巨头选择器,父子兄;
特点;所有的筛选选择器都是一个函数的形势,所以它不会写在选择符号的内部;
父;parent()选中当前元素的父级元素;
子;children()选中当前元素的子集元素,小括号内可以再次传递参数进行更精细的筛选;
兄;sibling()选中当前元素所有的同级兄弟元素;(不包含自己)
<div> <p></p> <p>123</p> <p></p> <p>456</p> </div>
$("p").eq(0).siblings().click(function(){ alert(123) });
$(this)注意在事件当中使用
jQuery当中的动画和事件是遵循一个叫做排队机制的原理,也就是说如果一次触发执行了很多动画那么后面的动画不会自动替换前面的而会一直排队等待执行;
解决方法:在执行动画之前用stop()函来清空排队;
相关文章推荐
- JQuery的cookie使用方法——和派孔明
- 流程设计器jQuery + svg/vml(Demo7 - 设计器与引擎及表单一起应用例子)
- css3中的zoom属性以及jquery中css()方法操作元素的属性
- jQuery ajax教程
- jquery mobile + 百度地图 + phonegap 写的一个"校园助手"的app
- 2016年6月份那些最实用的 jQuery 插件专辑
- 使用jquery实现AJAX技术的几种方法
- Jquery跳出each循环
- 使用JQuery重置(reset)表单的方法
- Jquery.cookie.js 的使用指南
- 【JQuery笔记】animate中的params参数
- JQuery 学习笔记(01)
- jQuery 菜单切换
- jquery总结
- jQuery总结
- 近期学习javascript和jquery遇到一些问题的技巧知识总结
- 近期学习javascript和jquery遇到一些问题的技巧知识总结
- 近期学习javascript和jquery遇到一些问题的技巧知识总结
- 近期学习javascript和jquery遇到一些问题的技巧知识总结
- 近期学习javascript和jquery遇到一些问题的技巧知识总结