一、引入Jquery
- 下载jquery,复制到项目中
- 在需要使用的文件中引入:
二、jquery选择器
- 基本选择器(注:.css为jquery内置的,可以改变css样式)
- 属性选择器(最后一个是获取有 以属性href值为com结尾 的dom节点)
- 其他选择器(第一个是交集(p标签中有c1类的元素),第二个是ul标签中的第一个li)
三、jquery操作dom
-
操作dom节点
-
操作dom属性
(也可直接 ${dom}.css(key,value)进行更换)
-
操作dom节点样式
-
设置和获取html,文本,值。
获取dom节点内容
设置dom节点内容
-
jquery遍历节点操作
(注:纯dom节点没有.html函数只有 innerHTML()函数,只有jquery封装后的才有html()函数。)
-
jquery操作dom节点css样式
四、jquery事件操作
- 文档加载事件
- 单击双击按钮事件
- 文本框 获的、失去焦点事件
- div 鼠标移入,移除事件
五、Jquery动画效果
- 隐藏和显示dom
- 淡入淡出dom(第三个是 淡入淡出切换函数)
- dom透明度
- 滑动dom节点
先将dom节点隐藏(设置CSS属性 display: none;)再使用下面方法
- 移动改变dom节点(第一个是向左移动500px,第二个是移动时将透明度变为0.5,宽高变化,第三个是将变化改为渐变)
- 停止动画
- jquery callBack回调方法(其他动画也可以,只要在最后参数show加一个回调方法即可)
六、数据交互(jquery ajax)
-
load 方法(后两个参数可选)
例子:(d1是一个div的id )
-
get/post方法
例子:
(注:function中两个参数,一个是返回的数据,一个是返回的状态)
七、开发常用
1.实时监听输入框变化
$("#input1").bind("input propertychange",function(event){
console.log($("#input1").val())
});
2.页面加载完执行方法
$(function(){
alert("执行完毕");
}