jquery笔记
来源:互联网 发布:手机论坛软件 编辑:程序博客网 时间:2024/06/05 01:00
$(document).ready(function(){});
这个代码在Dom结构绘制完 后 就马上加载
这个代码可以有多个
或者简写为
$(function(){})
Jquery选择器
$(p)
标签选择器
$(“[name=’myname’]”) 属性选择器,此处的name为标签中的name属性
jquery事件
鼠标移入移除事件
mouseenter
mouseleave
还有其他,建议用这两个
绑定事件
bind 、on 官方推荐用on
$(#id).on("click",".childclass",function(){ //执行语句})
on的好处是可以添加到未来元素中,
比如js或者jq动态添加一个元素–>用on也可以绑定这个事件,直接写$(“id”).click(function(){}); 可能无效
第一个参数可以添加 多个 事件名 用空格隔开, 表示绑定多个事件
$(#id).on("click mouseenter",".childclass",function(){ //执行语句})
绑定事件另一种写法(键值对)
$("#id").on({ click: function() {}, mouseleave: function() {} });
绑定事件的几点说明
//写了子元素名,给子绑定事件 $("#parent").on("click", "#childer", function() { alert("childer"); })//不写子元素,父子一起帮定事件 $("#parent").on("click", function() { alert("parent"); })//$(this),父子一起帮定事件(其实仅仅绑定了父,因为子在父中,so子也有事件) $("#parent").on("click", $(this), function() { alert("parent"); })//随便写一个不存在的子。那么父子都绑定失败(其实仅仅绑定了父) $("#parent").on("click", "#dddd", function() { alert("parent"); })父子一起绑定的 如果没有子,那么仅仅绑定了父
解绑事件
$(“id”).off(“click”)
off是解绑事件,off 如果不指定事件,则解绑所有事件。
比如
$("#myid").off("click").on("click",".childcass",function(){});
事件名 如果有多个 可以用空格隔开 比如
$("#myid").off("click moudeleave").on("click",".childcass",function(){});
事件冒泡问题
$("#parent").on("click", function() { alert("p"); }) $("#parent").on("click", "#childer", function(event) { event.stopPropagation(); alert("c"); })
冒泡—》点击子,会调用父的绑定事件
用
event.stopPropagation(); 阻止冒泡
触发器
trigger
var _p="<div style='width:100px;height:50px;background-color:red;margin-bottom:10px'>呵呵</div>" $("#addp").on("click",function(){ $(this).before(_p); }) $("#trigger").on("click",function(){ $("#addp").trigger("click","ddd"); })
获取焦点和失去焦点
focus blur
$("#trigger").on("focus", function() { $(this).addClass("ad"); }); $("#trigger").on("blur", function() { $(this).removeClass("ad"); });
键盘事件
keyup
keydown
$("#trigger").on("keydown", function() { $("#addp").addClass("ad"); }); $("#trigger").on("keyup", function() { $("#addp").removeClass("ad"); });
jq弃用事件
弃用live() on()代替
弃用die() off()代替
弃用size length 代替
弃用 toggle() 无替代
动画效果
显示 隐藏
hide() hide()
透明效果&逐渐显示&逐渐消失
fadeTo() fadeIn() fadeOut()
$(".fadein").click(function(){ $("#duanlu").fadeTo(1000,0.4); ///透明化 $("#duanlu").fadeOut(); //消失 $("#duanlu").fadeIn(); //出现 });
上下滑动隐藏&显示 & 隐藏/显示
slideup 隐藏
slideDown 显示被隐藏的
slideToggle 如果隐藏则显示 如果显示则隐藏
动画
animate
文档和属性操作
text()//更改或者获取文本内容
html()//获取或者更改html内容
text和html的区别是 html对标签会渲染
val() //更改或者获取input 、textarea的值
append() 向元素的子元素最后添加 prepend() 向元素子第一个前面添加
hasClass() 判断元素是否有指定的class 返回boolean
attr() 获取或者或者添加修改属性
removeAttr() 删除指定属性
css()
1. 添加单个样式 css(“color”,”red”)
2. 添加多个css({“color”:”red”,”width”:20})index() 获取索引值 .eq() 在同辈的元素中根据索引值查找元素
length 获取长度
- width() 2. height()
children() 查找所有子
parent() 查找直属父层
parents() 查找父辈层
find() 查找指定的后背元素
has() boolean子是否有指定元素
prex() 相邻的前一个元素
next() 相邻的后一个元素
siblings() 获取 除本身之外 所有同辈的元素
- JQuery 笔记:
- jquery笔记
- jquery笔记
- JQuery 笔记
- JQuery笔记
- JQuery笔记
- JQuery笔记
- jquery 笔记
- jquery 笔记
- jquery笔记
- jquery+笔记
- JQuery笔记
- jquery笔记
- jquery笔记
- JQuery 笔记
- Jquery 笔记
- jQuery笔记
- JQuery笔记
- ZOJ Missile 3460 (最大流+二分)
- iOS UIImageView自适应图片大小
- Bringing up interface eth0: Error: No suitable device found: no device found for connection 'System
- 二叉树系列——二叉树的镜像
- Tomcat 启动GZIP 压缩
- jquery笔记
- 高并发web系统优化总结
- Java过滤器,SpringMVC拦截器之间的顺序关系
- IOS taBbar item角标设置
- 如何将QT程序移植到开发板上运行
- 在tomcat下指定JDK路径
- JAVA读取PHP乱码问题
- crontab命令-自动化执行
- tsiLdekniLesreveR.206