前端框架-10-jQuery入门

前端框架-jQuery框架简介

1.jQuery是什么：

• 用原生js封装好的非常多代码的框架
• jq是用js封装的，能用jq实现的，用js都能实现
• js能实现的，jq有些不能实现
• jq的API只对自己开放 jq不能用js的API js也不能用jq的API
  jQuery官方库
  jQuery的API库

2.jQuery简单实用

jQuery常用$、jQuery符号作为关键字

#函数调用$(function () {    alert(1)})#id调用 $("#box").html("aaa")jQuery("#box").html("555");#class调用 $(".box1").html("bbb")#标签调用$("p").html("111");#append添加内容var obj = $("<div><p>我是p标签</p></div>")$("#box").append(obj);#JS对象转jQueryvar box=document.getElementById("box")box.innerHTML="123"$(box).html("555") #转换成jQuery#jQuery对象转JSjq获取的元素类似于集合，获取的元素是一组$("#box p").get(0).style.color="red"$("#box p")[0].style.color="red" #单个元素$("#box").get(0).innerHTML = "9999";#jQuery修改样式$("#box p").css("color","red");#所有元素$("#box p").eq(2).css("color","red"); #指定单个元素#jQuery标签遍历$("#box p").each(function (n) {//n是序号    $(this).html('我是'+n);#jQuery调用    this.innerHTML="我是原生"+n  #原生调用})----------------------------------------------------------------#jQuery 属性操作#attr 设置属性/获取属性，也可以自定义标签属性var $box = $("#box").attr("id");//读操作,id的名称alert($box);$("#box").attr("class","python");//设置class属性名称为python$("#box").attr("test","java");//自定义test属性的名称为javaremoveAttr()$("#box").removeAttr("class");#prop 设置属性/获取属性,只能处理系统自带的标签属性$("#box").prop({            "class":"xiaopo",            "title": "hahah"        });removeProp()#处理Class方法addClassremoveClass    传class 移除你传的那个    没有  移除全部$("#box").addClass("wrap box1 box2");#添加多个$("#box").removeClass("");#删除所有$("#box").removeClass("box2 box1"); #删除指定toggleClass 有就删没有则加$("#box").toggleClass("on");操作class类名jq  对应      jshtml()    innerHTMLtext()    innerTextval()     value在jq里面，设置某个值的时候，一般自带遍历          获取某个值的时候，一般获取第一个#CSS样式.css().width().height()innerWidth / innerHeight 算了paddingouterWidth / outerHeight 算了 padding+borderposition()    该对象有top /left 属性    代表到定位父级的 top/left的值    不算 margin 和paddingoffset()   该对象有top /left 属性   代表到浏览器窗口的 top/left的值$("#box").css({    "width":"200px",    "background":"blue",    "height":"200px"});   alert($("#box").css("width"));//200px   alert($("#box").innerWidth());//600   alert($("#box").outerWidth());//620   alert($("#box").offset().left); alert($("#box").position().left);