标签:btn .sh NPU 元素 query ima 简单 sel 事件处理
快速简洁的JS框架,封装JS常用功能代码,提供一种简便的JS设计模式,优化HTML文档操作,事件处理,动画设计和Ajax交互。
闭包:使用更大作用域的变量来记录小作用域变量的值
//id选择器
var inp = $("#uname");
inp.val(); //只有一个元素
//标签选择器
var inps = $("input");//返回数组
inps[1].value;
//类选择器
var inps = $(".common");
//组合选择器
var eles = $("h3, input"); //所有h3和input标签
//子选择器
var inps = $("div>input"); //所有div下的input子元素
var inp = $("input:first"); //第一个input元素
var tds = $("td:not(td[width])"); //去掉有width属性的td
//简单
first, last,not,even,odd,eq(index),gt,lt,header,animated
//内容
contains(text)
empty
has(selector)
parent
//可见性
visible
hidden
//属性
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value] //以某些值开始
[attribute$=value] //以某些值结束
[attribute*=value] //包含某些值
[selector1][selector] //同时满足多个条件
//子元素
nth-child
first-child
last-child
only-child
//表单
//表单对象属性
var uname = $("#uname");
uname.attr("type"); //获取属性
uname.attr("value"); //不实时
uname.val(); //实时
uname.attr("type", "button"); //设置属性
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
var showdiv = $("#showdiv");
showdiv.html(); //返回标签内所有内容
showdiv.html("<b>xxxx</b>"); //修改标签内容,包括标签本身
showdiv.text(); //返回标签内内容,不包括标签
showdiv.text("<i>xxx</i>"); //不解析标签
showdiv.css("background-color", "orange"); //增加
showdiv.css("width"); //获取
div.css({"border":"solid 1px","width":"300px","height":"300px"}); //json格式
div.addClass("common"); //追加
div.removeClass("dd"); //删除样式
//元素内部插入
div.append("<i>sfaf</i>"); //内容解析,页面内容增加
$("#u1").appendTo("#showdiv"); //将元素外面的对象追加到里面,页面内容移动
prepend //加到前面
prependTo //
//元素外部插入
div.after("<b>xxx</b>"); //在div后面插入
div.before("<b>xxx</b>"); //在div前面插入
div.insertAfter(); //将匹配的内容插入后面,只是移动,并不增加
div.insertBefore(); //将匹配的内容插入前面,只是移动,并不增加
//包裹
wrap/unwrap
wrapAll
wrapInner
//替换
replaceWith
replaceAll
//删除
empty
remove
detach
//克隆
clone
$("#btn2").bind("click",function(){alert("xxx")}); //追加,一个事件绑多个
$("#btn2").bind("click"); //解绑事件,只能解绑bind添加的
$("#btn2").one("click",function(){alert("xxx")}); //触发执行一次性即失效,可以添加多个,可以unbind解绑
页面载入事件
window.onload=function(){}; //js方式
$(document).ready(function(alert("1"))); //jquery方式,追加
$(document).ready(function(alert("2")));
$("#showdiv").show(3000); //3秒逐渐显示
$("#showdiv").hide(3000); //3秒逐渐隐藏
toggle //切换元素隐藏状态,效果同上
slideDown //高度逐渐增加
slideUp //高度逐渐缩小
slideToggle
fadeIn //淡入
fadeOut //淡出
标签:btn .sh NPU 元素 query ima 简单 sel 事件处理
原文地址:https://www.cnblogs.com/logchen/p/10353225.html