jQuery学习记录2--参考素材B站李南江老师的jQuery+Ajax视频

write less，do more（写的更少，做的更多）–jQuery官方

五.jQuery内容选择器

(1)empty的作用：找到既没有子元素和文本内容的指定元素
var $div=("div:empty");
console.log($div);

(2)parent的作用：找到有子元素或文本内容的指定元素
var $div1=("div:parent");
console.log($div2);

(3)contains(text)的作用：找到包含指定文本内容的指定元素
var $div3=("div:contains('我是div')");
console.log($div3);

(4)has(selector)的作用：找到包含指定子元素的指定元素
var $div4=$("div:has('span')");
console.log($div4);

body内:
<div></div>
<div>我是div</div>
<div><span></span></div>
<div><p></p></div>

六.属性和属性节点

1.什么是属性？

对象保存的变量就是属性

2.如何操作属性？

（1）js中的方法：对象.属性名称=值；
对象.属性名称；
对象[“属性名称”]=值；
对象[“属性名称”]；

（2）jQ中的方法：
prop方法：

$("span").eq(0).prop("name");//如果传递一个参数，代表获取属性的值 
*注意：eq（0）表示选择所有span标签中第1个span
$("span").eq(0).prop("demo","666");//如果传递两个参数，代表设置属性的值
 *注意：如果设置的属性不存在系统会自动新增。

removeProp方法:

$("span").removeProp("class name");
 *注意：该方法会把找到的所有该标签下的属性删除
       如果想进行多删除操作，就把两个属性之间用空格隔开

注意：该方法也可以操作属性节点，方法与attr和removeAttr方法一致

3.什么是属性节点？

在html标签中添加的属性就是属性节点，
例：<span name ="it666"></span>，再该html标签下的name就是属性节点

4.如何操作属性节点？

（1）使用setattribute方法设置属性节点的值

var span =document.getElementsByTagName("span")[0];//获取DOM元素 
span.setAttribute(" name//属性节点名"," lnj//值");//设置属性节点的值
span.getAttribute(" name//属性节点名")//获取属性节点的值;

（2）使用attr方法

作用：获取或者设置属性节点的值，可以传递一个参数，也可以传递两个参数

$("span").attr("class");//如果传递一个参数，代表获取属性节点的值 
 *注意：无论找到多少个元素，都只返回第一个元素指定属性节点的值
$("span").attr("class","lnj");//如果传递两个参数，代表设置属性节点的值
 *注意：无论找到多少个元素，都会统一设置值。
       如果设置的属性节点不存在系统会自动新增。

（3）使用removeAttr方法

作用：删除属性节点

$("span").removeAttr("class name");
 *注意：该方法会把找到的所有该标签下的属性节点删除
       如果想进行多删除操作，就把两个属性节点之间用空格隔开

5.属性和属性节点有什么区别？

任何对象都有属性，但是只有DOM对象才有属性节点

6.prop方法和attr方法的区别与在实际操作中该怎样选取？

<input type=" checkbox" cheched>//在body中写
$("input").prop("checked");//返回为true/false
$("input").attr("checked");//返回为checked/undefined

总结：官方推荐在操作属性节点时，具有true或false两个属性的属性节点，使用prop（），其他使用attr（）

七.jQ的操作类的相关方法

1.addClass（class|fn）添加类

$("div").addClass("class1 class2");
//获取div标签，在其class中添加class1和class2的类
*注意：多添加用空格隔开

2.removeClass（class|fn）删除类

$("div").removeClass("class1 class2");
//获取div标签，在其class中删除class1和class2的类
*注意：多添加用空格隔开

3.toggleClass（class|fn）切换类

作用：有就删除，没有就添加

八.jQ文本值相关操作

1.html（[val|fn]）添加值

$("div").html("<p><span>文字</span></p>");
//获取div标签，在其中添加文字和创建子标签，类似innerHTML（）

2.text（[val|fn]）添加文本

$("div").html("<p><span>文字</span></p>");
//获取div标签，在其中添加文字，类似innerHTML（）
*注意：不会创建子标签

3.value（[val|fn]）添加值

$("input").vale("我是输入框");
//获取input标签，在其中添加文字

九.jQ操作样式方法

1.逐个设置

$("div").css("width","100px");
//获取div标签，在其中添加width并设置值

2.链式设置

$("div").css("width","100px").css("height","100px");
//获取div标签，在其中添加width并设置值，和添加height并设置值
*注意点：如大于三步建议分开

3.批量设置

$("div").css({width:"100px",height:"100px"});
//获取div标签，在其中添加width并设置值和添加height并设置值

4.获取CSS样式

$("div").css("width");
//获取div标签，获取其中width的值

十.jQ尺寸和位置操作

1.width（[val|fn]）设置宽度

$(".father").width("500px");
//用类名获取，将width修改为500px

2.height([val|fn]) 设置高度

$(".father").height("500px");
//用类名获取，将height修改为500px

3.offset([val|fn])

作用：获取元素距离窗口的偏移位

$(".father").offset().left;
//用类名获取元素，展示元素距离最左侧边框的偏移位
$(".father").offset({
  left:10
});//可以直接这样修改

4.position([val|fn]）

作用：获取元素距离定位元素的偏移位(也就是距离其父元素的距离)

$(".father").position().left;
//用类名获取元素，展示元素距离最左侧边框的偏移位
*注意：position方法只能获取不能设置

$ $快捷方法$

(1)在浏览器中查看属性节点
第一步：按f12
第二步：点击Sources
第三步：点击该网页源码
第四步：右侧有Watch，Watch右侧有个加号
在搜索框写：document.getElementsByTagName(“标签名”)
第五步：搜索后就会展示出该标签下的全部属性及属性参数
第六步：展开attributes下显示的就是属性节点