jQuery的选择器
jQuery的内容选择器
:empty :parent :contains(text) :has(selector)
$(function () {
//:empty 作用是找内容为空的 既没有文本又没有子元素的指定元素
var $div = $('div:empty');
console.log($div);
//:parent 作用是找有内容 有文本或有子元素的指定元素
var $div1 = $('div:parent');
console.log($div1);
//:contains(text) 作用是找有内容并且内容包含括号中传入的字符串的内容
var $div2 = $('div:contains("i am div")');
console.log($div2);
//:has(selector) 作用是找有子元素并且子元素是括号中传入的指定子元素
var $div3 = $('div:has("span")');
console.log($div2);
})
jQuery的属性
对象里边保存的变量就是属性
对象.属性名称 = 值 赋值
对象[‘属性名称’] = 值 赋值
对象.属性名称 获得值
对象[‘属性名称’] 获得值
jQuery的属性和属性节点
任何对象都有属性 但只有dom对象有属性节点
属性节点就是html标签中的属性（比如id name class都是）
dom元素.setAttribute(‘属性名称’，‘值’); 赋值
dom元素.getAttribute(‘属性名称’); 获得值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="../jQuery/jquery-1.12.4.js"></script><!-- 引入jQuery库 -->
<script>
$(function () {
function Person(){
}
var p = new Person();//对象
p.name = 'inj';//属性 第一种赋值
console.log(p.name);
p['name'] = 'chen';
console.log(p.name); //第二种赋值
var span = document.getElementsByTagName('span')[0];//
span.setAttribute('name','inj');//设置属性节点
span.getAttribute('name');//获取属性节点
})
</script>
<body>
<span name = 'xs'></span>
<!-- 在html标签中添加的属性(比如上面的name)就是属性节点 -->
<!-- 在浏览器中找到span的dom元素后，dom中的都是span对象的属性 -->
<!-- span对象的属性中有的attributes属性，他的内容都是属性节点 -->
</body>
</html>
jQuery中的attr方法
attr是用于获得或者设置属性节点的值
传一个参数时，代表获取属性节点的值
传两个参数时，代表设置属性节点的值
removeAttr是用于删除属性节点
传入的参数为字符串的属性节点 它会找到这个属性节点并将有该属性节点的元素直接删除
在字符串中用空格隔开可以指定多个属性节点
<script>
$(function(){
$('span').attr('class');//获取dom元素span并且用attr获得他的属性节点名为class的值
//注意：这里我写了两个span但是他只会返回第一个指定元素的获取到的属性节点值
$('span').attr('class','box');//获取dom元素span并且用attr修改他的属性节点名为class的值为box
//注意：如果是要用attr设置的话找到多少指定元素就修改多少个属性节点的值，而且在为设置时没有指定的属性节点 系统会在每一个指定元素新增该属性节点
$('span').removeAttr('class');
$('span').removeAttr('class name');
});
</script>
<body>
<span class="span1" name = 'it666'></span>
<span class="span2" name = 'inj'></span>
</body>
jQuery中的prop方法
prop特点跟attr一样
removeProp特点跟removeAttr一样
在属性节点返回的是布尔值的时候就用prop 其他的用attr
<script>
$(function(){
//prop特点跟attr一样
$('span').eq(0).prop('demo','it666');//eq(0)就是找到的所有span元素中的第一个
$('span').eq(11).prop('demo','inj');
$('span').prop('demo');
//removeProp特点跟removeAttr一样
$('span').removeProp('demo');
//注意点：prop不仅可以操作属性，还可以操作属性节点
$('span').prop('class');
$('input').prop('checked'); //返回布尔值
$('input').attr('checked'); //返回就是字符串 普通的值
//所有对于这个来说prop要好于attr 因为返回布尔值会更加直观 判断起来也比较简单
//在属性节点返回的是布尔值的时候就用prop 其他的用attr
})
</script>
<body>
<span class="span1" name = 'it666'></span>
<span class="span2" name = 'inj'></span>
<input type="checkbox" checked>
</body>
jQuery的操作类的相关方法
<script>
$(function () {
var btns = document.getElementsByTagName('button');
btns[0].onclick = function(){
$('div').addClass('class1 class2');//作用添加一个类 传入的为字符串 添加多个类 就在字符串内用空格隔开
}
btns[1].onclick = function(){
$('div').removeClass('class2');//作用删除一个类 传入的为字符串 删除多个类 就在字符串内用空格隔开
}
btns[2].onclick = function(){
$('div').toggleClass('class2');//作用切换类 传入的为字符串 dom节点存在传入的内容的类就删除 没有就添加
}
})
</script>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>
jQuery操作文本值
<script>
$(function () {
var btns = document.getElementsByTagName('button');
btns[0].onclick = function(){
$('div').html('<p>i am p<span>i am span</span></p>');//html方法和原生js的innerHTML作用一样 传入参数为字符串 就是设置添加代码片段
}
btns[1].onclick = function(){
console.log($('div').html());//无参数 就是获取指定dom节点的后代元素
}
btns[2].onclick = function(){
$('div').text('<p>i am p<span>i am span</span></p>');//text和原生js的innerText一样 传入参数为字符串 就是设置指定元素的内容
}
btns[3].onclick = function(){
console.log($('div').text());//无参数 就是获取指定dom节点的内容
}
btns[4].onclick = function(){
$('input').val('xxxxxxx');//大体同上 只不过功能是设置input的value内容
}
btns[5].onclick = function(){
console.log($('input').val());//无参数 就是获取指定input的内容
}
})
</script>
<body>
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
<div></div>
<input type="text" name="" id="">
</body>