css框架jquery下载 jquery框架怎么用

下载：

第一步：在官网下载jQuery：

https://jquery.com/

第二步：将下载的jQuery引入页面就可以开始使用：

<script src="jquery.js所在的路径"><\/script>

常用方法介绍：

一、选择器

jQ所有的选择器都是以数组的形式返回；

1. id选择器：

$("#box1");  //box1为ID名
	注意：jq的DOM元素必须解析之后才可以用原生jsDOM属性和方法；

2. class选择器

$(".cont") //类似css的class选择器

3. 属性选择器

$("span [abc=hello][qwe]")  //选中span中有属性abc且值为hello 和有属性qwe的span标签

4. 包含：后代

$(".msg h2")  //选中class为msg 中的所有 h2 标签

5. 群组

$("#box,.cont,h2")  //选中页面中所有的ID为box  class为cont  标签h2的元素

6. 下一个兄弟

$(".msg+span")

7. 第一个或最后一个

$(".list li:first") //class为list内的第一个li标签
    $(".list li:last")  //class为list内的最后一个li标签

二、属性操作

1.prop
如果设置的是内置属性，会可见
如果设置的是自定义属性，会不可见

$("#box").prop("title","这是一个title"); //页面中可以看到title属性和值
    $("#box").prop("qwe","这是一个qwe"); //页面中无法看到属性qwe和值 因为这是一个自定义的属性  不可见

2.attr
内置和自定义属性都可以在页面中显示

$("#box").attr("title","这是一个title"); //页面中可见title属性和值
    $("#box").attr("qwe","这是一个qwe"); //页面中可见qwe属性和值

三、样式操作

jQuery样式的操作方法为$("#box").css()
当接收的参数为一个时：
			字符：获取
			对象：批量设置
			数组：批量获取
当接收的参数为两个时：
			第一个为要设置的属性；
			第二个为要设置的值

$("#box").css("width","100px"); //设置元素ID为box的宽为100  可以不写px
	$("#box").css({
        width:"100px",
        height:200,
        background:"red",
        opacity:0.5,
        fontSize:30,
        lineHeight:"100px"
    });  //设置多个属性和值
	$("#box").css("width") //获取改元素的宽

四、元素的内容操作

1. html：封装了原生js的innerHTML

$("#box").html(""); //设置内容为空 即删除#box内的所有内容
    $("#box").html("hello"); //设置内容为hello 如果已有内容则是将所有内容修改为hello
    $("#box").html("<h1 abc='qwe'>hello</h1>")；//在#box加入标签， 如果已有内容则是将所有内容修改为h1标签

2. text：封装了原生js的innerText

$("#box").text("");//设置内容为空 即删除#box内的所有内容
    $("#box").text("hello");//设置内容为hello 如果已有内容则是将所有内容修改为hello
    $("#box").text("<em>hello</em>");//设置内容为hello 如果已有内容则是将所有内容修改为<em>hello</em>  注意：与原生js的innerText一样无法读取标签 输入什么就显示什么

3. val：封装了原生js的value

$("input").val("");//设置value为空
    $("input").val("hahaha");//设置value为hahaha
    $("input").val("<b>hahaha</b>");//设置value为<b>hahaha</b>  无法识别标签  输入什么就显示什么

五、事件的绑定

jq中所有的事件绑定，都是DOM2级，意味着全部可以重复绑定

1. on绑定，off删除
   on绑定可以实现事件委托，及，向事件处理函数中传参
   on的参数：
   1.事件类型，还可以起名，为了将来删除方便
   2.事件委托的元素，可省略
   3.向事件处理函数中传递的数据，可省略
   4.事件处理函数，注意，如果向时间里出函数中传参了，那么要通过事件对象的data属性找到
   off删除，删除事件类型+名字

$("#box").on("click.c2",function(){  //绑定点击事件 起名为c2
        console.log(2);
    })

    $("#box").off("click.c1"); //删除名为c2的点击事件

2. one方法：绑定一次性事件，触发之后，自动删除

$("#box").one("click",function(){  //点击一次之后，此点击事件自动删除
        console.log(1);
    	})

3. 基础绑定，直接使用事件名绑定

$("#box").click(function(){
        console.log("点击")
    })
    $("#box").mousemove(function(){
        console.log("移动")
    })
    $("#box").dblclick(function(){
        console.log("双击")
    })
    $("#box").mousedown(function(){
        console.log("按下")
    })

4. hover方法绑定事件
   进入:mouseentwe
   离开:mouseleave
   不带事件冒泡

$("#box").hover(function(){
        console.log("鼠标进入")
    	},function(){
        console.log("鼠标离开")
    	})

5. ready方法绑定事件
   加载

$(document).ready(function(){
        console.log("页面结构加载完成")
    })

六、jq的DOM操作

元素节点

1. 创建：

var s = $("<span>"); //创建span标签

2. 插入
   要插入的父元素.appendChild(ele);
   append:插入指定父元素的最后一个子元素

$("#box") //被s插入了
    $("#box").append(s);
    
    s.appendTo($("#box")); //把s插入到$("#box")中

prepend:插入指定父元素的第一个子元素

$("#box").prepend(s);
    s.prependTo($("#box"));

before:给指定元素，添加上一个兄弟

$("#box").before(s);

after:给指定元素，添加下一个兄弟

$("#box").after(s);

3. 删除

$(".box").remove();  //删除指定元素
	 $("#box").empty(); // 删除所有子元素

4. 修改

$("#box").replaceWith() //获取标签自身同时删除自己

5. 克隆

var b = $("#box").clone(); //没参数 默认为false
        $("body").append(b); 
	
	var b = $("#box").clone(true); //参数为true  除了克隆结构，还会克隆事件
        $("body").append(b);

七、jQ的元素的尺寸类获取

console.log($("#box").innerWidth());    // width + padding
    $("#box").innerWidth(200);      // 抵消掉padding，剩下的全给width

    console.log($("#box").outerWidth());    // width + padding + border
    ("#box").outerWidth(300);      // 抵消掉padding+border，剩下的全给width

    console.log($("#box").offset());    // margin + position
    console.log($("#box").offset().left);    // margin + position
    console.log($("#box").offset().top);    // margin + position
     $("#box").offset({left:100,top:100});  // 抵消掉margin，剩下的全给position


    console.log($("#box").position());    // position
    console.log($("#box").position().left);    // position
    console.log($("#box").position().top);    // position