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

Posted 2020-09-27

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名字");//删除