jQuery笔记 02：jQuery对象（基本行为、选择器和工具方法）
作者：互联网
jQuery对象是一个伪数组，即有 0 到 length-1 的属性，且有 length 属性
$(function () {
var $div = $("div");
console.log($div);
// 类似于数组
for (let i = 0; i < $div.length; i++) {
console.log($div[i]);
}
});
基本行为
<button>测试一</button>
<button>测试二</button>
<button id="btn03">测试三</button>
<button>测试四</button>
<script>
var $btns = $('button');
// 获取jQuery对象中包含的dom元素的个数
console.log($btns.size(), $btns.length); // 4 4
// 获取jQuery对象中指定下标的dom元素
console.log($btns[1].innerHTML, $btns.get(1).innerHTML); // 测试二 测试二
// 遍历jQuery对象中的dom元素
$btns.each(function (index, item) {
// this指的是遍历出来的dom元素
console.log(index + '-' + item.innerHTML, this); // 0-测试一 1-测试二 2-测试三 3-测试四
})
// 获取当前元素在其兄弟元素中的下标
console.log($('#btn03').index()); // 2
</script>
选择器
基本选择器
<div id="div1" class="box">div1(class="box")</div>
<div id="div2" class="box">div2(class="box")</div>
<div id="div3">div3</div>
<span class="box">span(class="box")</span>
<br />
<ul>
<li>AAAAA</li>
<li title="hello">BBBBB(title="hello")</li>
<li class="box">CCCCC(class="box")</li>
<li title="hello">DDDDD(title="hello")</li>
</ul>
<script>
$(function () {
// 选择id为div1的元素
// $('#div1').css('background', 'tomato');
// 选择所有的div元素
// $('div').css('background', 'tomato');
// 选择所有class属性为box的元素
// $('.box').css('background', 'tomato');
// 选择所有的div和span元素
// $('div,span').css('background', 'tomato');
// 选择所有class属性为box的div元素
// $("div.box").css("background", "tomato");
// 选择所有的元素
$('*').css("background", "tomato");
});
</script>
层次选择器
<ul>
<li>AAAAA</li>
<li class="box">CCCCC</li>
<li title="hello"><span>BBBBB</span></li>
<li title="hello"><span>DDDDD</span></li>
<span>EEEEE</span>
</ul>
<script>
$(function () {
// 选中ul下面所有的span
// $('ul span').css('background', 'tomato');
// 选中ul下所有的子元素span
// $('ul>span').css('background', 'tomato');
// 选中class为box的下一个li
// $('.box+li').css('background', 'tomato');
// 选中ul下的class为box的元素后面的所有兄弟元素
$('ul .box~*').css('background', 'tomato');
});
</script>
过滤选择器
<div id="div1" class="box">class为box的div1</div>
<div id="div2" class="box">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br />
<ul>
<li>AAAAA</li>
<li title="hello">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two">BBBBB</li>
<li style="display: none">我本来是隐藏的</li>
</ul>
<script>
$(function () {
// 选择第一个div
// $("div:first").css("background", "tomato");
// 选择最后一个class为box的元素
// $(".box:last").css("background", "tomato");
// 选择所有class属性不为box的div（没有class属性也可以）
// $("div:not(.box)").css("background", "tomato");
// 选择第二个和第三个li元素（下标大于和小于 一步一步执行 下一步过滤执行的前提是上一次过滤的结果）
// $("li:gt(0):lt(2)").css("background", "tomato");
// $("li:lt(3):gt(0)").css("background", "tomato");
// 选择内容为BBBBB的li
// $("li:contains('BBBBB')").css("background", "tomato");
// 选择隐藏的li
// console.log($("li:hidden").length, $("li:hidden")[0]);
// 选择有title属性的li元素
// $("li[title]").css("background", "tomato");
// 选择所有属性title为hello的li元素
$("li[title=hello]").css("background", "tomato");
});
</script>
div {
width: 50px;
height: 100px;
background-color: red;
margin-top: 50px;
}
<div></div>
<div>div1</div>
<div>div2</div>
<div><span></span></div>
<div><p></p></div>
:empty 找到既没有文本内容也没有子元素的指定元素
$(function () {
var $div = $("div:empty");
console.log($div);
});
:parent 找到有文本内容或者有子元素的指定元素
$(function () {
var $div = $("div:parent");
console.log($div);
});
:has() 找到包含指定子元素的指定元素
$(function () {
var $div = $("div:has('span')");
console.log($div);
});
表单选择器
<form>
用户名: <input type="text" /><br />
密 码: <input type="password" /><br />
爱 好:
<input type="checkbox" checked="checked" />篮球
<input type="checkbox" />足球
<input type="checkbox" checked="checked" />羽毛球 <br />
性 别:
<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" />女<br />
邮 箱: <input type="text" name="email" disabled="disabled" /><br />
所在地:
<select>
<option value="1">北京</option>
<option value="2" selected="selected">天津</option>
<option value="3">河北</option>
</select><br />
<input type="submit" value="提交" />
</form>
<script>
$(function () {
// 选择不可用的文本输入框
// $(":text:disabled").css("background", "tomato");
// 显示选择爱好的个数
// console.log($(":checkbox:checked").length);
// 显示选择的城市名称
$(":submit").click(function () {
alert($("select>option:selected").html());
});
});
</script>
工具方法
// $.each(): 遍历数组或对象中的数据
var obj = {
name: "dudu",
age: 22,
setName: function (name) {
this.name = name;
},
};
$.each(obj, function (key, value) {
console.log(key, value); // name dudu
});
// $.trim(): 去除字符串两边的空格
console.log("---" + $.trim(" dudu ") + "---"); // ---dudu---
// $.type(obj): 得到数据的类型
console.log($.type(obj), $.type(obj.setName)); // object function
// $.isArray(obj): 判断是否是数组
console.log($.isArray([1, 2, 3]), $.isArray($("body"))); // true false
// $.isFunction(obj): 判断是否是函数
console.log($.isFunction(obj.setName)); // true
// $.parseJSON(json) : 解析json字符串转换为js对象/数组
var json = '{"name": "Tom", "age": 12}';
console.log($.parseJSON(json)); // Object { name: "Tom", age: 12 }
json = '[{"name": "Jerry", "age": 10}, {"name": "Tom", "age": 12}]';
console.log($.parseJSON(json));
标签：jQuery,02,console,box,tomato,background,div,选择器,css 来源： https://blog.csdn.net/Alice_Lee_Lee/article/details/118755071