我的学习之路_第二十七章_jQuery

jQuery
js类库
把常用对象或者方法封装起来,让我们写代码效率更高


1.jQuery
2.extjs


【jQuery入门】
jQuery的引入:
通过script标签的src属性引入


入门:   获取jQuery对象

$(选择器) == jQuery(选择器)


获取值
jQuery.val();


jQuery对象和Dom对象的转换


Dom对象转jQuery对象 :  var jQuery对象 = $(dom对象);


jQuery对象换Dom对象 : 方式一: var Dom = jQuery对象[index]
     方式二: var Dom = jQuery对象.get(index)




页面加载成功事件


js原生
onload = function(){  }


jQuery : 方式一:  $(document).ready(function(){ });
方式二:  $(function(){ js代码 })




事件绑定


jQuery事件名 :  submit(表单提交事件)   click(单机按钮)   focus(获取焦点)   blur(丢失焦点)
click(鼠标单击) dblclick(鼠标双击)
js原生
方式一: 通过标签的时间属性绑定 方式二:派发机制    元素,事件名= function() { }


jQuery
jQuery对象,事件(function(){ });






效果


★基础(重点必须要掌握)
show([毫秒值]); //显示
hide([毫秒值]); //隐藏
toggle([毫秒值]);//切换


了解:     滑入滑出
slideUp([毫秒值]); //滑出
slideDown([毫秒值]); //滑入
slideToggle([毫秒值]); //切换
 淡入淡出
fadeIn([毫秒值]); //淡入
fadeOut([毫秒值]);//淡出
fadeToggle([毫秒值]); //切换


jQuery的选择器


★基础选择器:必须要掌握
id选择器:   #id
类选择器:   .class
元素选择器: xxx
所有选择器: *
分组选择器: 选择1,选择2,选择3....
 ★层次选择器:必须要掌握
a b : a的b后代
a>b : a的b孩子
a+b : a的b的大弟弟
a~b : a的b的所有弟弟
  过滤选择器:
特点:前面都跟上了:


:first   第一个元素
:last 最后一个元素


:qe(index) 指定的索引的元素
:lt(index) 小于
:gt(index) 大于


:even 偶数
:odd  奇数
内容过滤选择器:
has(选择器):
可见性过滤选择器:
:hidden  针对隐藏域  display=none
:visible 可见的
属性选择:
[zz='z'] : 选中指定的属性为指定的值
[zz]     : 选中只要含有zz属性
表单选择器:
:input
选中form的所有子元素
input  select  textarea  button








css操作和属性操作


获取或设置元素样式
css("属性名","值"'):设置css样式
css("属性名");获取指定属性名的值
css({
"属性名1":"值1"
"属性名2":"值2"
}); json 设置多个样式


位置
offset
left:(左边)
top(上边)


宽度
高度
属性操作:
<xx 属性名="属性值"/>
获取设置属性操作
attr("属性名","值");设置属性
attr("属性名");//获取
attr({
"属性名1":"值1",
"属性名2":"值2"
})//设置多个属性
removeAttr("属性"); //删除


添加一个样式class属性
attr("class","class名字1");
attr("class","class名字2")
addClass("class名字");//添加
prop("class名字")

removeClass("class名字");//删除