jQuery基础

Posted 2021-02-08 logchen

简介

快速简洁的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)
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     //淡出