前端框架-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对象转jQuery
var box=document.getElementById("box")
box.innerHTML="123"
$(box).html("555") #转换成jQuery

#jQuery对象转JS
jq获取的元素类似于集合，获取的元素是一组
$("#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属性的名称为java
removeAttr()
$("#box").removeAttr("class");

#prop 设置属性/获取属性,只能处理系统自带的标签属性
$("#box").prop({
            "class":"xiaopo",
            "title": "hahah"
        });

removeProp()

#处理Class方法
addClass
removeClass
    传class 移除你传的那个
    没有  移除全部
$("#box").addClass("wrap box1 box2");#添加多个
$("#box").removeClass("");#删除所有
$("#box").removeClass("box2 box1"); #删除指定

toggleClass 有就删没有则加
$("#box").toggleClass("on");

操作class类名
jq  对应      js
html()    innerHTML
text()    innerText
val()     value

在jq里面，设置某个值的时候，一般自带遍历
          获取某个值的时候，一般获取第一个

#CSS样式
.css()
.width()
.height()

innerWidth / innerHeight 算了padding
outerWidth / outerHeight 算了 padding+border

position()
    该对象有top /left 属性
    代表到定位父级的 top/left的值
    不算 margin 和padding
offset()
   该对象有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);