jquery——dom元素
一、jquery简介
Jquery：是一个轻量级的js函数库，是开源的框架库。
1.所需基础知识：HTML和css
2.包括功能：（1）html元素选取
（2）html元素操作
（3）html事件函数
（4）html DOM遍历和修改
（5）css操作
（6）js特效和动画
（7）AJAX
（8）大量插件
3.引入方式：和webjs引入方式一致
（其中引入jquery库）
4.注意：（1）js和jquery可以混合使用
（2）可以写加载事件也可以不写
（3）$:为顶级变量，类似jquery对象
二、DOM元素
1.获取DOM元素方法
（1）*获取所有对象元素
（2）tagname获取
（3）id获取
（4）class获取
（5）>获取
（6）空格获取
（7）混合使用
代码如下：
- 1
- 2
- 3
- 4
- 5
- 6
篮球
注意： jquery选择器：可使用css1、css2、css3选择器来获取元素
选择器：
：focus 获得焦点元素
first、last:获取第一个或最后一个
：not 除了not的那一项，获取其他的
：even 偶数获取元素
：odd 奇数获取元素
：eq 根据索引获取元素
：lt/:gt 获取索引小于/大于某一个数的元素
：has 获取当前的元素里面必须的谁
：parent 获取的元素必须有子集 元素 或者文本
：nth-child(3) 根据序号获取元素
checked 匹配checkbox radio 被选择元素等。
2.动态创建DOM元素
创建的元素显示到界面——appendchild
jquery追加 包裹方法 ：
- 追加方法：
（1）append appendTo 追加到当前元素的内容之后
（2）prepend prependTo 追加到当前元素的内容之前
（3）after before 追加到当前元素之后或之前
（4）insertafter insertbefore 追加到当前元素之后或之前
- 包裹的方法
（1）wrap 包裹当前匹配元素
（2）unwrap * unwrap 移除当前匹配元素的包裹元素
（3）wrapAll 将所有匹配元素用一个包裹
（4）wrapInner 用标签包裹匹配元素的内容 * * * replaceWith 用元素替换匹配元素 * replaceAll 写法颠倒
清空当前匹配元素的所有内容 empty
remove() 移除元素
动态创建代码如下：
3.操作DOM元素
jquery操作dom元素的属性和方法：
jquery可以进行隐式迭代
（1）设置元素的文本值innerHTML、innerTEXT
html/text:获取或设置元素的文本或HTML值
代码示例中有
（2）根据索引获取元素eq(index)
（3）获取或设置元素值val()
（4）给元素添加类addClass()
（5）给元素移除类名称removeClass()
（6）类别的切换toggleClass()
- 设置属性的方法：
（1）attr("id","user")//设置属性
id:参数
user:值
remove(id)/remove(user) // 移除属性
- 一次性设置多个属性：
$("input").attr({
id:
"data-list"：
})
注意：一次性可以设置多个属性，但一次性只能获取一个属性
（2）prop(name|properties|key,value|fn)设置属性
name:属性名称
properties：属性名/值对对象
key,function(index,attr)
- 属性名称
- 返回属性值的函数，第一个参数作为当前元素的索引值，第二个参数为原先的属性值
注意：jquery操作css:可一次性设置多个属性，不可一次性获取多个属性。
对象.style
代码如下：
//获取或设置元素值 val()
$("input").val("321");
//给元素添加类 addClass
$("input").addClass("txt txt1");
//给元素移除类名称 removeClass
$("input").removeClass("txt1");
//类别的切换 toggleClass 有则删没有则加
$("input").toggleClass("txt");
//设置属性的方法 attr 参数1 名称 参数2 值 设置或者获取
$("input").attr("id", "user");
console.log($("input").attr("id"));
$("input").attr("data-user", "maodou");
console.log($("input").attr("data-user"));
//移除属性
$("input").removeAttr("id");
$("input").removeAttr("data-user");
$("input").removeAttr("class");
// 一次性设置多个属性
$("input").attr({
id: "username",
"data-list": "list"
});
//prop 设置属性 获取
console.log($("input[type=checkbox]").prop("checked"));
//$("input[type=checkbox]").prop("checked", true);
$("input[type=checkbox]").prop("checked", function (index, value) {
console.log(index);
return !value;
});
$("input[type=checkbox]").prop("id", "checked");
$("input[type=checkbox]").removeProp("id");
//css() 设置或者获取元素的样式 设置一个或者多个
//$("#block").css("border","1px solid black");
$("#block").css({
width: "100px",
height: "100px",
border: "1px solid black",
backgroundColor: "red"
});
console.log($("#block").css("backgroundColor"));
console.log($("#block").css("border"));
//offest //获取当前的相对偏移量 返回值是对象 left top
console.log($("#block").offset());
console.log($("#block").position());
//scrollTop 当前元素 相对滚动条到顶部的距离 （谁有滚动条就谁） y
//scrollLeft 当前元素 相对滚动条到左边的距离 （谁有滚动条就谁） x
console.log($(window).scrollTop());