前端框架-10-jQuery入门

小灰灰 2022-06-05 06:08 262阅读 0赞

# 前端框架-jQuery框架简介 #

### 1.jQuery是什么： ###

*  用原生js封装好的非常多代码的框架
 *  jq是用js封装的，能用jq实现的，用js都能实现
 *  js能实现的，jq有些不能实现
 *  jq的API只对自己开放 jq不能用js的API js也不能用jq的API  
    [jQuery官方库][jQuery]  
    [jQuery的API库][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);

[jQuery]: http://www.bootcdn.cn
[jQuery_API]: http://jquery.cuishifeng.cn/index.html