Jquery基础知识01

1:$(document).ready()function{}和window.onload()的区别。
   1:$(document).ready()function{} 该方法等到Dom结构绘制完毕后可以执行，不必等到加载完毕。
   window.onload(){} 必需等到图片所有元素加载完毕后才能执行。
  2：window.onload(){}不能写多个，而$(document).ready(){}可以写多个。
  3：$(document).ready(){}的简化写法 $(function(){});
2:简述三种选择器
  1：$("#id")根据Id来查找。
  2：$(".class")根据样式来查找。
  3：$("p)根据标签来查找。
3:Jquery选择器对元素或单个元素进行操作。
  1:根据父节点来通过选择器查找子节点
    $("P") 查找所有P标签
    $("p.intro") 查找所有p元素的class属性为intro的标签。
   $("p#demo") 查找所有p元素id为demo的标签。
2：属性选择器 []XPath 表达式来选择带有给定属性的元素。
   $("[href]")选取所有带有href属性的元素。
   $("[href='#']")选取所有href属性等于#的元素。
   $("[href$='.jpg']")选取所有href属性以.jpg结尾的元素。
  $("div#demo.intro")选取div元素中，id为demo的div元素的class属性为intro
  $("ul li:first") 每个ul的第一个li标签。
  $("input[type='text']"表示type为text的标签
4:Jquery事件
  1:Jquery命名冲突
    Jquery中以$作为jQuery的简介
    如果想替换$则调用 var jq=jQuery.noConflict();使用jq来代替$.
  2: 1:$(document).ready(function); 将函数绑定到文档就绪事件 当文档加载完毕。
      2:$(selector).click(function);
      3:$(selector).dbclick(function);
     4:$(selector).focus(fucntion);
     5:$(selector).mouseover(function);
5:Jquery隐藏/显示
    Jquery以hide() show() 来隐藏显示。
   $(selector).hide(speed,callback);
   $(selector).show(speed,callback);
   可选speed参数来控制速度，可取slow,fast,或毫秒。
   可选callback参数是显示隐藏后执行的函数名称。 可以是匿名函数也可以是函数名。
   toggle()函数，隐藏的时候显示，显示的时候隐藏。
6:Jquery获得内容和属性
   text()-设置返回元素的文本内容。
   html()-设置返回所选元素的内容(包含HTML标签).
   val()-返回字段的值。
   获取元素的属性
   attr()方法用于获取属性值,同时也可以设置属性值。
   如$("#w3s").attr("href");
  设置属性值 $("#w3s").attr({'href':'www.baidu.com','title':'百度一下'});
   text() html() val()的回调函数
  回调函数有两个函数，被跌选元素列表中当前元素的下标，以级原始(旧值),然后以函数新值返回字符串。
  $("#text").text(function(i,oldtext){
  return "oldtext:"+oldtext+"new Html: hello <br> world<br> index:"+i;});
7:添加元素
  append()-在被选元素结尾插入内容。
  prepend()-在被选元素开头插入内容。
  after()-在被选元素之后插入内容。 《 -------- 块级插入
  before()-在被选元素之前插入内容。
  //以HTML形式创建元素
  var temp1="<p>Text</p>";
  //以Jquery形式插入元素
  var temp2=$("<p></p>").text("Text.");
  var temp3=document.createElement("p");
  temp3.innerHTML="Text.";
  $("button").after(temp1,temp2,temp3);
8:删除元素
  remove()删除被选元素和其子元素。
  empty() 删除其子元素。
  remove(".class") 带一个参数，允许对被删元素过滤。
9:Jquery操作Css
  1:添加一个Css样式
  addClss()向被选元素添加一个或多个类
  $('div').addClass("blue"); $('div').addClass("blue demo");
  2:去除一个样式也是可以删除多个样式。
  $('div').removeClass("blue");
  3:toggleClass() 方法 添加或删除某个class 有则删除 没有则添加
  4:css()方法返回被选元素一个或多个样式属性。
  css("propertyname");
  如$("p").css("background-color");
  css("propertyname","value");设置指定Css的样式属性。
  如$("p").css("background-color","yellow");
  设置多个Css样式属性
  $("p").css({"background-color":"yellow","font-size":"40px"});
10:Jquery操作长度
   1：得到长度和宽度。 （不包括内边距、边框或外边距）。
   $("#div2").width(); $("#div2").height();添加元素是设置高度和宽度如$("#div2").width(500) $("#div1").height(500);
  2: innerWidth()返回元素的宽度(包括内边距）元素的高度(包括内边距）
  $("#div2).innerWidth() 和$("#div2").innerHeight();
  3: outerWidth()和outerHeight()返回元素的宽度和高度（包括内边距和边框）如outerWidth(true)返回的是，
  即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。
  4：$(document).width()得到的是（HTML文档的宽度和高度)
  $(window).width()得到的是浏览器窗口的宽度和高度。
11:Jquery的遍历
   Jquery遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。
  以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
特点：父节点 兄弟节点，子节点。
  1:遍历-祖先
     parent()方法返回被选元素的直接父亲，只会向上一级Dom()书遍历。
    $("span").parent();
    parents()方法返回被选元素的所有祖先元素(上级元素)直到Html文档。
   $("span").parents();
   parents()可以带一个参数如 $("span").parents("ul");span的祖先并且是ul元素
   parentsUntil()方法返回介于两个给定的元素之间的所有祖先元素。
   $("span").parentsUntil("div")返回span到div之间的元素。
2:遍历-后代(后代指的是 子 孙，曾孙等）
  children()返回被选元素的所有子元素，只对下一级dom进行操作。
  $("div).children();
  过滤子元素
  $("div").children("p.1") 返回类名为1的p元素并且是子元素。
  find()返回的是被选元素的后代元素，直到最后一个。
  $("div").find("span") 查找div元素的所有span元素后代。
  $("div").find("*"); 返回所有的后带元素。
3:遍历-同胞(同胞拥有相同的父元素），遍历元素的同胞元素。
  遍历所有的兄弟节点。
  $("p").siblings();返回被选元素所有的兄弟元素。
  $("p").siblings("p")返回属于h2的兄弟元素的所有<p>元素。
  返回下一个兄弟元素 next().
  $("p").next();
  nextAll()方法返回所有的下一个兄弟元素。
  nextUntil()方法返回介于两个元素之间的同胞元素
  $("p").nextUntil("h6") 返回的是p到h6之间的元素。
  prev()返回上一个兄弟节点 prevAll()返回所有的上一个兄弟节点 prevUntil()返回介于两个
  元素之间的兄弟节点（向上).
4:$.each遍历
1：遍历被选中元素
  $(selector).each(function(index,element){
     index选择当前位置 element当前元素
  });
  <ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Soda</li>
 </ul>
$(li).each(function(index,element){  alert(index)//0-1-2  alert($(element).html()) coffee milk soda   this   }

2：Js对象转换为Jquery对象
    var ele= $(element) js对象变为了Jquery
   Jquery对象转换为js对象
   var $v =$("#v") ; //jQuery对象
   var v=$v[0]; //js对象
2：遍历数组
   1:var arr=['nba','cba','cuba','ufc'];
   $.each(arr, function(){ alert(this); });
   $.each(arr,function(index,element){
   alert(arr[index]) alert(index) alert(this)
   });
3:遍历Json数据
  var obj=['china':'中国','usa':'美国','rusiaa':'俄罗斯'];
   $.each(obj,function(key,value){
 alert(obj[key]);
 });

12:Jquery()的过滤
   三个最基本的过滤元素方法 first(),last(),eq()基于在一个元素中的位置来选一个特定元素。
   filter()和not()允许选取匹配和不匹配某项指定的标准元素。
  first()方法返回被选元素的首个元素。$("div p").first().
  last()方法返回被选元素的最后一个元素 $("div p").last();
  eq()方法返回被选元素中带有索引号 01 $("div p").eq(2) div中第三个p标签。
  fliter()方法不匹配的元素会从集合中删除，匹配的会被返回 $("p").fliter(".demo");
  not()方法返回所有不匹配的元素 $("p").not(".intro");

13:事件监听

Jquery事件监听
$(selector).bind(event,data,function,map);
event 必须 ，规定添加到元素的一个或多个事件，由空格分隔。 如click onmouseout onmouseover事件
data 可选，规定传递到函数的额外参数。
function 必需，规定当事件发生是的函数。要执行的方法
map 规定事件映射（{event：function，event：function，...})包含要添加的事件和事件发生时要执行的函数。
1：添加监听事件
$('input[type="text"]').bind("click",function(){
// alert("444");
$(this).css("border","");
$(this).next().hide();
});
2：传递参数
$('p').bind("click",{msg:"你刚点击了"},handlername);
function handlername(e){
alert(e.data.msg); e.data 得到数据
}
3：事件映射 使用事件映射，向被选元素添加事件。
   $('button').bind({
   click:function(){alert("333")'},
   onmouseout:function(){$(body).css("background-color","red")},
  onmouseout:function(){$(body).cdd("background-color","white")}});
  Js事件监听
  js监听是通过addEventListener（）方法来实现
  addEventListener(event,function,useCapture);
  event:事件名 如click mouseover 不要使用 on前缀。
  function 可以是一个方法，也可以是一个函数名，可以传递参数。
  useCapture 事件句柄是在 True（捕获阶段执行） false（冒泡阶段执行）。可选参数
  js去除事件监听 removeEventListener()；
 removeEventListener(event, function, useCapture)
  event：事件名。
  function：要去除的方法。
  useCapture:指定移除事件句柄的阶段 true - 事件句柄在捕获阶段移除 false- 默认。事件句柄在冒泡阶段移除.
14：Json数据的加载和转换
  1:eval('('+data+')');可以将Json字符串转换位Json数据。 //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号
  2：JSON.parse（string）将Sring转换成Json对象。
  3：JSON.stringify(obj)将JSON对象转换成String对象。