JQuery知识点

######一【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=$(".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);