######一【JQuery知识点】####################################
1.使用闭包,将数据一次性挂载到window对象下
2.jquery选择器
①id选择器
######二【JQuery知识点详解】####################################
1.使用闭包,将数据一次性挂载到window对象下
①闭包声明:
(function(obj){
//将匿名函数挂在到obj对象中
obj.test=function(){ alert(“工程车”);}
alert(“浏览器第一次加载的时候执行”);
})(window)
------------------
window.test();//结果弹出"工程车"
②闭包案例
var a ={};
(function(obj){
obj.test=function(){alert(“test()”);}
obj.name=“objname”;
})(a);
a.test();
alert(a.name);
③匿名函数和函数赋值给变量
匿名函数:
(function (){
alert(“没名字函数”);
})();
函数赋值给变量:var ttt=function(){alert(“kkk”)};
调用:ttt();
2.jquery选择器
①选择器类型
基本选择器(id选择器、标签选择器、类选择器、组合选择器)、
层级选择器、简单选择器、内容选择器、可见性选择器、
属性选择器、子元素选择器、表单选择器
②选择器使用案例
id选择器: var inp=KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲uname"); 标签选择器…(“input”);
类选择器: var inps=
(
"
.
c
o
m
m
o
n
"
)
;
组
合
选
择
器
:
v
a
r
e
l
e
s
=
(".common"); 组合选择器: var eles=
(".common");组合选择器:vareles=(“h3,input”);
子选择器: var inps=KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲showdiv>input")…(“input:first”);
var tds=$(“td:not(td[width])”);
③选择器总结
jquery对我们提供了多种多样的择器来选择需要操作的HTML元素对象。
3.jquery操作元素属性
①获取元素属性
var uname=$("#uname");
alert(uname.attr(“type”)+":"+uname.attr(“value”)+":"+uname.val());
②修改元素属性
var uname=$("#uname");
uname.attr(“type”,“button”);
③操作元素内容和样式
获取、修改元素内容:
var showdiv=KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲showdiv"); show…("#showdiv"); showdiv.html(“今天天气真好,适合抓鬼子”);
获取、修改元素文本:
var showdiv=KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲showdiv"); show…("#showdiv"); showdiv.html(“今天天气真好,适合抓鬼子”);
获取、修改元素样式:
var showdiv=$("#showdiv");showdiv.css("width");
var showdiv=$("#showdiv");showdiv.css("background-color","orange");
var showdiv=$("#showdiv");showdiv.css({"border":"solid 1px","width":"300px","height":"300px"});
追加、删除一个元素样式:
<style type="text/css">.dd{font-size: 30px;font-weight: bold;}</style>
var div=$("#div01");div.addClass("common");
var div=$("#div01");div.removeClass(“dd”);
4.jquery操作文档
①操作文档类型:
内部插入、外部插入、包裹、替换、删除
②操作文档实例:
//将指定的内容追加到对象的内部
var div=$("#showdiv");div.append("<i>,饭</i>");
//将指定的内容添加到对象的内部的前面
var div=$("#showdiv");div.prepend("<i>你好,</i>");
//将制定的元素对象追加到指定的对象内容
var div=$("#showdiv");$("#u1").appendTo(div);
//将制定的元素对象添加到指定的对象内容前面
var div=$("#showdiv");div.prependTo("<i>你好,</i>");
div.after("<b>今天天气不错,适合学习</b>"); //将指定的内容追加到指定的元素后面
div.before("<b>今天天气不错,适合学习</b>"); //将指定的内容追加到指定的元素前面
insertAfter //把所匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore //把所匹配的元素插入到另一个、指定的元素元素集合的前面
$("#showdiv").empty() //清空元素对象中所有内容
5.jquery事件操作
元素对象.bind(“事件名”,fn):
//动态的给指定的元素对象追加指定的事件及其监听的函数
$("#btn2").bind(“click”,function(){alert(“我是bind绑定单击事件”)});
元素对象.unBind(“事件名”):
//移除指定的元素对象的指定事件
$("#btn3").unbind(“click”);
元素对象.one(“事件名”,fn):
//给指定的元素对象添加一次性事件,事件被触发执行一次即失效。
$("#btn3").one(“click”,function(){alert(“我是one”)});
页面载入事件:
$(document).ready(function(){alert(“我是jQuery”);})
6.jquery动画
$("#showdiv").show(3000);
$("#div01").hide(3000);
$(“div”).toggle(3000);
$("#showdiv").slideDown(3000);
$("#div01").slideUp(2000);
$("#showdiv").fadeOut(3000);