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   }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpwfxw.html