jQuery对象是一个类数组的对象,含有连续的整形属性以及一系列的
jQuery方法。它把所有的操作都包装在一个jQuery()函数中,形成了
统一(也是惟一)的操作入口。
其中我们用的非常频繁的一个函数是$()或者说是jQuery(),当我们调
用他的时候会根据传入的参数的不同而达到不同的效果。
1 jQuery(selector,context)
简要的说是:接收一个css选择器表达式(selector)和可选的选择器上下文(context),
返回一个包含了匹配的DOM元素的jQuery对象。
在这里插入代码片
<span>body span</span>
<span>body span</span>
<span>body span</span>
<div class="wrap">
<span>wrap span</span>
<span>wrap span</span>
<span>wrap span</span>
</div>
js:
$('span').css('background-color','red');//所有的span都会变红
$('span','.wrap').css('background-color','red');//只有.wrap中的span会变
2.属性选择器
在这里插入代码片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WOT</title>
<script src = 'jquery.min.js'></script>
</head>
<body>
<input type="text" username="ht">
<input type="text" username="mt">
<p username="lt">势如鲲鹏,怒啸长空</p>
</body>
</html>
$('[username]');
S.fn.init(3) [input, input, p, prevObject: S.fn.init(1)]
$('[username="ht"]');
S.fn.init [input, prevObject: S.fn.init(1)]
$('[username="mt"]');
S.fn.init [input, prevObject: S.fn.init(1)]
$('[type="text"]');
S.fn.init(2) [input, input, prevObject: S.fn.init(1)]
3.表单选择器
$(’:条件’) // 专属于form表单的筛选器
在这里插入代码片
<form action="">
<p><input type="text"></p>
<p><input type="password"></p>
<input type="button">
</form>
$('input[type="text"]')
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('input[type="password"]')
w.fn.init [input, prevObject: w.fn.init(1)]
$(':text') # 等价于上面第一个
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$(':password') # 等价于上面第二个
w.fn.init [input, prevObject: w.fn.init(1)]
在这里插入代码片
: 选择
$(':text') // 只能用于查找form表单内的包含text属性的
$(':password') // 只能查找form标签内部的
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...等等
表单对象属性
:enabled
:disabled
:checked
:selected
特殊情况
在这里插入代码片
$(':checked') # 它会将checked和selected都拿到
$(':selected') # 它不会 只拿selected
$('input:checked') # 当我们需要只拿到checked的时候需要自己加一个限制条件