1.简介:jquery是JavaScript的一个框架,也叫作库
2.实现登录验证(表单提交事件)案例
onsubmit:表单提交事件。验证用户填写的信息是否正确
onsubmit="函数()"
代码如下:
3.jquery的引入 (prototype是最早的一个成熟js框架)
必须先引入jq.
4.jquery的基本格式:
$(select).action();
例子:
5.jquery使用的选择器频率很高,所以介绍一下选择器:
id选择器 #
class选择器 .
元素选择器
father>son 父子选择器
selesct+ 获取后面的兄弟元素,下一个
select~ 获取后面的所有的兄弟元素
内容选择器:语法:元素:contains('div中的内容');
div:has(p) : 匹配div标签中含有p标签的内容,添加css样式 .css
div:parent :选择div的父元素的内容进行添加样式
6.注册小案例部分代码
7.jquery选择器
(1)基本选择器:
:first 第一个子元素
:last 最后一个元素
:even 偶数的元素 0也属于
:odd 奇数元素
:eq(index) 获取指定索引位置的元素
:gt(index) 查找大于index索引的元素
:lt(index) 查找小与index索引的元素
(2)属性选择器:
[attribute]: 属性选择为attribute
[attribute="value"] 查找属性为value的元素
[attribute!="value"]查找属性不为value 的元素
[attribute^="value"]查找以value开头的属性
[attribute$="value"]查找以value为结尾的属性
[attribute*=“value‘]查找包含value 的属性
(3)子元素选择器 也叫作伪类选择器
好吧 是我偷懒了。。。
8.属性和方法的操作
属性:
设置属性的方法:attr属性, (元素.attr ) 例:$("input").attr("value","abcd");
设置多属性的方法:attr({value,"值",type,"值"});
删除name属性:removeAttr(name);
9. .css类
id选择器的效率比较低,尽量选择class选择器
addClass() 添加类
toggleClass()。。。。。。。如果没有就添加,如果有就删除
例子:
10.加载事件
JS中: Windows.onload=fn; 把页面上的DOM和资源加载完成之后执行
Jquery中: $(document).ready(fn) 简写:$(function(){}) 把页面的DOM加载完成之后就会执行
11.事件切换,在两个fn事件之间来回切换
hover(function(){
},function(){
}); 鼠标放上fn 鼠标离开fn
12.事件
Javascript事件都带有on , jquery事件都没有on
$(selector).click(function(){}) 单击事件
$(selector).dbclick(function(){}) 双击事件
$(selector).focus(function(){}) 获得焦点事件
$(selector).blur(function(){}); 失去焦点事件
$(selector).change(function(){}) 发生改变事件
$(selector).mouseover(function(){}); 鼠标放上事件
$(selector).mouseout(); 鼠标离开事件
$(selector).mousedown();鼠标按下事件
$(selector).mousemove;鼠标移动事件
13.事件处理
(1):bind("action",fn)所有版本都支持
(2):如果多个事件: bind({"mouseover":function(){
},mouseover:function(){
}})
(3):unbind("action") 解除绑定 如果没有参数 则全部解除。
(4):On绑定
off解绑:$("selector").off();