jQuery基础

简介

快速简洁的JS框架，封装JS常用功能代码，提供一种简便的JS设计模式，优化HTML文档操作，事件处理，动画设计和Ajax交互。

闭包：使用更大作用域的变量来记录小作用域变量的值

1. 直接全局区域，容易同名覆盖
2. 使用对象封装，对象还是会被覆盖
3. 使用工厂模式，函数还是可能会被覆盖
4. 匿名函数自调用，只能加载的时候调用一次，且数据无法获取
5. 使用闭包，将数据一次性挂在到window对象下

jQuery选择器

//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)emptyhas(selector)parent//可见性visiblehidden//属性[attribute][attribute=value][attribute!=value][attribute^=value] ?//以某些值开始[attribute$=value] ?//以某些值结束[attribute*=value] ?//包含某些值[selector1][selector] ??//同时满足多个条件//子元素nth-childfirst-childlast-childonly-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/unwrapwrapAllwrapInner//替换replaceWithreplaceAll//删除emptyremovedetach//克隆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 ????//淡出

jQuery基础

原文地址：https://www.cnblogs.com/logchen/p/10353225.html