jquery的基本操作

添加删除类名：

$("div").click(function() {
    //类名都不需要加点
    //添加类
    // $(this).addClass("container");
    //删除类
    // $(this).removeClass("box");
    //切换某个类名
    $(this).toggleClass("box");
});

属性操作：

// 1. element.prop("属性名") 获取元素的固有属性值
//获取 a 上面的href属性
$("a").prop("href");
//设置 a上面的 title属性
$("a").prop("title", "我们都要好好的");

// 2. 元素的自定义属性用 attr() 来获取
console.log($("div").attr("index")); //获取
$("div").attr("index", "4444444"); //设置

内容文本值：

// 1. 获取和设置元素内容 html()
console.log($("div").html());               // 获取
$("div").html("我是是设置过的内容");          // 设置

// 2. 获取和设置元素文本内容 text()
console.log($("div").text());               // 获取
$("div").text("我是是设置过的文本内容");      // 设置

// 3. 获取和设置表单值  val()
console.log($("input").val());              // 获取
$("input").val("好哥哥");                    // 设置

jq的遍历

// 1、$("div").each()方法遍历
$("div").each(function(index, domEle) { 
//回调函数的2个参数:第一个是索引,第二个是DOM对象   
});
// 2、$.each()方法遍历
$.each($("div"), function(index, domEle) {
   //each方法里第一个是遍历的元素，第二个回调函数（参数和上面一样）
});

jq创建、删除对象

//创建对象，用变量保存
var li = $("<li>我是后来创建的li</li>");
// 2. 添加元素
	// 内部添加 是父子关系
// $("ul").append(li);  //添加到元素的后面
$("ul").prepend(li); //添加到元素的前面

	// 外部添加 是兄弟关系
var newDiv = $("<div>我是后来创建的div</div>");
// $("div").after(newDiv);  //添加到当前元素的后面
$("div").before(newDiv); //添加到当前元素的前面

//删除元素
$("ul").remove();    //直接干掉自己

//清空元素
$("ul").empty();        //清空这个元素
$("ul").html("")        //也是清空这个元素

jq绑定事件

// 第一种方法 $("").click(function() {}); 
$("div").click(function() {
      //需要执行的代码          
});

// 第二种方法 用on()方法来绑定事件
// 用 on 一次绑定多个事件,执行的代码一样的可以这样,不同事件用空格隔开
$("div").on("click mouseenter", function() {
    //需要执行的代码 
});

// 如果执行代码不一样 通过对象的方法来写入
$("div").on({
    click: function() {
        //需要执行的代码 
    },
    mouseenter: function() {
        //需要执行的代码 
    }
});

// 事件委派
$("ul").on("click", "li", function() { //ul上绑定事件，靠他的li来触发
    //需要执行的代码 
});

//只需要执行一次的事件 可以用 one()
$("p").one("click", function() {
    console.log(6666666); //只能触发一次
});


//卸掉元素身上的事件  off()
$("div").off(); //为空时是全部卸掉
$("div").off("click");  // 卸掉指定的事件   
// 卸掉事件委派
$("ul").off("click", "li");

事件的自动触发

// 自动触发元素的事件
// (1) 元素.事件()
$("div").click();

// (2) 元素.trigger("事件")
$("div").trigger("click");

// (3) 元素.triggerHandler("事件")
$("input").triggerHandler("focus"); //没有光标的默认行为

jq的阻止默认行为和阻止事件冒泡

// 阻止事件的冒泡行为  e.stopPropagation()
// 阻止默认行为        e.preventDefault()  

jq的对象拷贝

//$.extend(true, targetObj, Obj)
//true 或者 false   决定它是深拷贝，还是浅拷贝
//浅拷贝：把原来对象里的复杂数据类型地址拷贝给目标对象
//深拷贝：把原来对象里的复杂数据直接复制一份给目标对象，如果有不冲突的属性，会合并到一起
//targetObj是赋值给的元素
//Obj是 复制的元素

jq元素尺寸点的获取

//修改直接在里面修改数字，不需要加单位
// width() height()  取得匹配元素的高与宽，只包含宽高
console.log($("div").width());
// innerWidth() innerHeight()  取得匹配元素的高与宽，包含宽高 + padding
console.log($("div").innerWidth());
// outerWidth() outerHeight()  取得匹配元素的高与宽，包含宽高 + padding + border
console.log($("div").outerWidth());
// outerWidth(true) outerHeight(true)  取得匹配元素的高与宽，包含宽高 + padding + border + margin
console.log($("div").outerWidth(true));

jq的元素位置

// 1. offset()  获取当前元素到文档的距离
// 2. position() 获取当前元素到最近具有相对定位的父级距离 
 // 3. scrollTop() scrollLeft() 设置或获取元素被卷去的头部和左侧