注意:
$(function(){ //jquery代码 }); 防止文档在完全加载之前运行jquery代码
cdn引入jquery:
百度cdn: https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
staticfile cdn: https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js
又拍云cdn: https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js
新浪cdn: https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js
google cdn: https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
microsift cdn: https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js
选取元素:
$(""); 选取所有元素
$(this); 选取当前html元素
$("#tag"); 选取id=tag的元素
$(".tag"); 选取class为tag的元素
$(“div”); 选取所有div元素
$(“p.test”); 选择class为test的p标签元素
$(“div:first”); 选取第一个div元素
$(“ul li:first”); 选取第一个ul元素里的第一个li元素
$(“ul li:first-child”); 选取第每个ul元素的第一个li元素
$("[href]"); 选取带有href属性的标签
$(“a[target=’_blank’]”); 选取所有target属性值等于_blank的a元素
$(“a[target!=’_blank’]”); 选取所有target属性值不等于_blank的a元素
$(":button"); 选取所有type=“button"的input元素和button元素
$(“tr:even”); 选取偶数位置的tr元素
$(“tr:odd”); 选取奇数位置的tr元素
事件:
$(”#tag").click(function(){ //点击逻辑 });
$("#tag").dbclick(function(){ //双击逻辑 });
$("#tag").mouseenter(function(){ //鼠标移动到元素的逻辑 });
$("#tag").mouseleave(function(){ //鼠标离开元素后逻辑 });
$("#tag").mousedown(function(){ //鼠标按下逻辑 });
$("#tag").mouseup(function(){ //鼠标弹起逻辑 });
$("#tag").hover(function(){ //鼠标移动到元素的逻辑 },function(){ //鼠标离开元素后逻辑 });
$("#tag").focus(function(){ //当元素获得焦点时逻辑 });
$("#tag").blur(function(){ //当元素失去焦点时逻辑 });
效果:
$("#tag").hide(); 隐藏元素
$("#tag").show(); 显示元素
$("#tag").hide(2000,“linear”,function(){ //两秒后执行的逻辑 });
$("#tag").toggle(); 切换show()和hide()方法(点击元素可见，再点击不可见)
属性:
$("#tag").text(“hello world”); 设置或者获取标签的文本值
$("#tag").html(“
hello world
$("#tag").val(“hello world”); 一般用于获取或者设置输入框里面的值
$("#tag").attr(“href”,“www.xxx.com/duck.jpg”); 设置单个属性
$("#tag").attr({“href”:“www.xxx.com/duck.jpg”,“value”:“hello world”}); 设置多个属性
元素:
$("#tag").append(“
hello world
”); 在被选元素的内部结尾插入内容(父子关系)$("#tag").prepend(“
hello world
”); 在被选元素的内部开头插入内容(父子关系)$("#tag").after(“
hello world
”); 在被选元素之后插入内容(兄弟关系)$("#tag").before(“
hello world
”); 在被选元素之前插入内容(兄弟关系)$("#tag").remove(); 删除指定id的标签
$(“p”).remove(".qifen"); 删除id是qifen的所有
元素
$("#tag").empty(); 删除指定id的元素的内部所有标签
css:
$(“h1,h2,p”).addClass(“className1 className2”); 选择多个标签并添加多个css类
$(“h1,h2,p”).removeClass(“className1 className2”); 选择多个标签并删除多个css类
$(“h1,h2,p”).toggleClass(“className1 className2”); 方法对被选元素进行添加/删除类的切换操作
$(“p”).css(“background-color”); 返回首个匹配元素的background-color值
$(“p”).css(“background-color”,“yellow”); 为所有匹配元素设置background-color值
$(“p”).css({“background-color”:“yellow”,“font-size”:“200%”}); 为所有匹配元素设置background-color值和font-size值
尺寸:
$("#tag").width(); 设置或者返回元素的宽度(不包括内边距、边框或外边距)
$("#tag").height(); 设置或者返回元素的高度(不包括内边距、边框或外边距)
$("#tag").innerWidth(); 返回元素的宽度(包括内边距)
$("#tag").innerHeight(); 返回元素的高度(包括内边距)
$("#tag").outerWidth(); 返回元素的宽度(包括内边距和边框)
$("#tag").outerHeight(); 返回元素的宽度(包括内边距和边框)
遍历:
祖先:
$("#tag").parent(); 方法返回被选元素的直接父元素
$("#tag").parents(); 方法返回所有祖先元素，一直到
$("#tag").parents(“div”); 方法返回id为tag的所有标签为div的祖先元素
$("#tag").parentsUntil(“div”); 方法返回介于id元素与
后代:
$("#tag").children(); 返回元素直接子元素(一级)
$("#tag").children(“p.1”); 返回标签为p并且class为1的直接子元素
$("#tag").find(); 返回元素的所有后代元素(多级)
$("#tag").find(“div”); 返回元素的所有后代标签为div的标签
$("#tag").find(""); 返回元素的所有后代元素
兄弟:
$("#tag").siblings(); 返回所有兄弟元素
$("#tag").siblings(“div”); 返回所有为div的兄弟元素
$("#tag").next(); 返回下一个兄弟元素 相反的有prev()方法
$("#tag").nextAll(); 返回标签后面的所有兄弟元素 相反的有prevAll()方法
$("#tag").nextUntil(“div”); 方法返回介于id元素与
过滤:
$(“div p”).first(); 选取首个
元素
$(“div p”).last(); 选择最后一个
元素
$(“div”).eq(2); 根据选取的元素的索引拿元素(拿选中的元素中的索引为2的div)
$(“div”).filter(".url"); 返回带有类名为url的div
$(“div”).not(".url"); 返回不带有类名为url的div 与filter()方法相反
jquery ajax:
$("#tag").load(“www.xxx.com/abc.txt”); abc.txt里面放任意标签，id=tag的元素会被加载的标签替换
$("#tag").load(“www.xxx.com/abc.txt”,function(responseTxt,statusTxt,xhr){ if(statusTxt==“success”){//加载成功逻辑}; if(statusTxt==“error”){ alert(“失败逻辑”+xhr.status+":"+xhr.statusText); }}); //加载成功和失败的逻辑
$.get("/pic",function(data,status){ alert(“数据:”+data+“状态:”+status); }); //get请求
$.post("/pic",{name:“七分”,age:20}function(data,status){ alert(“数据:”+data+“状态:”+status); }); post请求
