简介
jQuery：（js query：查询 ）前端出现之间就已经存在，（write less,do more）做的更多写的更少
CRUD（增删改查）：create read update delete
核心工能：查询
jQuery一个优秀的js函数库（封装了BOM、DOM）
plugins:插件（依赖于jQuery的库）
jQuery的不同版本：
- 1.X
兼容老版本IE
文件更大 - 2.X
部分IE8及以下不支持
文件小，执行效率更高 - 3.X
完全不在支持IE8及以下版本
提供了一些新的API
提供不包括ajax/动画API的版本
jQuery是一个函数返回的是一个实例对象
测试时使用未压缩的文件
上线时使用压缩文件
引入jQuery
- 本地引入（先下载在引入
- 远程引入（直接通过CDN远程库引入）https:/www.bootcdn.cshiy
使用jQuery的两大利器
当函数用时：
(
X
X
X
)
当
对
象
用
时
：
(XXX) 当对象用时：
(XXX)当对象用时：.XXX()
XXX:DOM元素
- jQuery核心函数（$/jQuery）直接可用
<script>
// 原生DOM
window.onload = function() {
var btn1 = document.querySelector("#btn1");
var userName = document.querySelector("#userName");
btn1.onclick = function() {
console.log(userName.value);
}
}
</script>
<script>
// 使用jQuery
$(function() {
$('#btn2').click(function() {
var userName = $('#userName').val();
console.log(userName);
})
})
</script>
<body>
用户名：<input type="text " id="userName">
<button id="btn1">使用原生</button>
<button id="btn2">使用jQuery</button>
</body>
//绑定文档加载完成后再执行的监听
$(function() {})
- jQuery核心对象：（没有名称）执行 ( ) 返 回 的 函 数 （ 执 行 j Q u e r y 函 数 得 到 它 ） j Q u e r y ： 为 了 标 明 j Q u e r y 对 象 在 取 名 字 的 时 候 都 会 加 一 个 ()返回的函数（执行jQuery函数得到它） jQuery：为了标明 jQuery对象在取名字的时候都会加一个 ()返回的函数（执行jQuery函数得到它）jQuery：为了标明jQuery对象在取名字的时候都会加一个;
<script>
// 使用jQuery
$(function() {
var $btn2=$('#btn2');
$btn2.click(function() {
var userName = $('#userName').val();
console.log(userName);
})
})
</script>
jQuery核心函数
函数也可以是对象
.
X
X
X
(
)
当
.XXX() 当
.XXX()当后面直接跟（）时才是函数
函数的参数不同功能也不同
作为一般函数调用：$(param)
- 参数为函数:当DOM加载完成后,执行此回调函数
- 参数为选择器字符串:查找所有匹配的标签，并将它们封装成jQuery对象
- 参数为DOM对象:将dom对象封装成jQuery对象（然后可以使用jQuery对象的方法）
- 参数为htmL标签字符串（用得少):创建标签对象并封装成jQuery对象
<script>
// 参数为函数:当DOM加载完成后,执行此回调函数
$(function() {
// 参数为选择器字符串: 查找所有匹配的标签， 并将它们封装成jQuery对象
$('#btn').click(function() {
// 参数为DOM对象:将dom对象封装成jQuery对象(this就是一个DOM对象指的是<button>)
// 读写合一当html()为读，html(参数)为写
console.log($(this).html());
// 参数为htmL标签字符串（用得少):创建标签对象并封装成jQuery对象
$('<input type="text" name="msg3"><br>').appendTo('div')
})
})
</script>
<script>
// each()隐式遍历
// var arr = [1, 2, 5, 8, 9];
// $.each(arr, function(index, item) {
// console.log(index + ': ' + item);
// });
// trim()取出两端空格
var str = ' hello world ';
console.log("---" + str.trim() + "---");
console.log("---" + $.trim(str) + "---");
</script>
<script>
//each()隐式遍历
var arr = [1, 2, 5, 8, 9];
$.each(arr, function(index, item) {
console.log(index + ': ' + item);
});
</script>
jQuery核心对象
伪数组
是一个object对象，但是它只有长度与数组中元素下标两个属性，没有数组特别的方法：forEach()、push()、pop();
理解
- jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)
- jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作dom
jQuery对象的.方法/属性
基本行为
<script>
$(function() {
$buttons = $('button');//得到的是一个伪数组
//size()/length获取页面总共有几个按钮
console.log($buttons.size() + " " + $buttons.length);
//[index]/get(index)获取下标为index的DOM元素
console.log($buttons[1].innerHTML + " " + $buttons.get(1).innerHTML);
//each()遍历
$buttons.each(function(index, item) {
console.log(index + " " + item.innerHTML);
})
//index()返回获取到的DOM元素的下标
console.log($('#btn3').index());
})
</script>
<body>
<button>测试1</button>
<button>测试2</button>
<button id="btn3">测试3</button>
<button>测试4</button>
</body>
选择器
基本选择器
- #id : id选择器
<script>
//$('#box').css('backgroundColor', 'red');
$('#box').css({
// 'backgroundColor': 'red',
// backgroundColor: 'red',
'background-color': 'red',
// 'fontSize': '24px'
});
</script>
<body>
<div id="box">div1 id="box"</div>
<div class="box">div2 class="box"</div>
<span>span标签</span>
<ul>
<li>1--1</li>
<li class="index">2--2 class="index"</li>
<li class="box">3--3 class="box"</li>
<li class="index">4--4 class="index"</li>
</ul>
</body>
- eLement :元紊选择器
<script>
$('span').css('backgroundColor', 'red');
</script>
<body>
<div id="box">div1 id="box"</div>
<div class="box">div2 class="box"</div>
<span>span标签</span>
<ul>
<li>1--1</li>
<li class="index">2--2 class="index"</li>
<li class="box">3--3 class="box"</li>
<li class="index">4--4 class="index"</li>
</ul>
</body>
- .cLass :属性选择器
<script>
$('.box').css('backgroundColor', 'red');
</script>
<body>
<div id="box">div1 id="box"</div>
<div class="box">div2 class="box"</div>
<span>span标签</span>
<ul>
<li>1--1</li>
<li class="index">2--2 class="index"</li>
<li class="box">3--3 class="box"</li>
<li class="index">4--4 class="index"</li>
</ul>
</body>
- *:任意标签
<script>
$(' * ').css('backgroundColor', 'red');
</script>
<body>
<div id="box">div1 id="box"</div>
<div class="box">div2 class="box"</div>
<span>span标签</span>
<ul>
<li>1--1</li>
<li class="index">2--2 class="index"</li>
<li class="box">3--3 class="box"</li>
<li class="index">4--4 class="index"</li>
</ul>
</body>
选择类名为box与span元素
<script>
$('.box,span').css('backgroundColor', 'red');
</script>
<body>
<div id="box">div1 id="box"</div>
<div class="box">div2 class="box"</div>
<span>span标签</span>
<ul>
<li>1--1</li>
<li class="index">2--2 class="index"</li>
<li class="box">3--3 class="box"</li>
<li class="index">4--4 class="index"</li>
</ul>
</body>
选择类名为box的div与span元素
<script>
$('div.box,span').css('backgroundColor', 'red');
</script>
<body>
<div id="box">div1 id="box"</div>
<div class="box">div2 class="box"</div>
<span>span标签</span>
<ul>
<li>1--1</li>
<li class="index">2--2 class="index"</li>
<li class="box">3--3 class="box"</li>
<li class="index">4--4 class="index"</li>
</ul>
</body>
层次选择器
查找子元素，后代元素，兄弟 的选择器与css中相同
<script>
// 后代选择器 ancestor descendant 选择ul中的span元素
// $('ul span').css('backgroundColor', 'red');
//子代选择器father>son 选择ul下的子元素span
// $('ul>span').css('backgroundColor', 'red')
// 相邻选择器 previous+nextElement 选择类名为box的下一个li元素
// $('.box+li').css('backgroundColor', 'red')
//兄弟选择器 previous~nextElements 选择ul下类名为box后的span元素
$('ul>.box~span').css('backgroundColor', 'red')
</script>
过滤选择器
:first选择匹配到的第一个DOM元素
:last选择匹配到的最后一个DOM元素
:even选择匹配到下标为奇数DOM元素
:odd选择匹配到下标为奇数DOM元素
:contains(value)选择匹配到的内容为value的DOM元素
:not(selector)选择所有元素去除不匹配给定的选择器的元素
:hidden选择所有隐藏的元素
:lt(index)选择匹配集合中所有索引值小于给定index参数的元素
:gt(index)选择匹配集合中所有索引值大于给定index参数的元素
<script>
// 选择匹配到的第一个div标签
// $('div:first').css('backgroundColor', 'red');
// 选择匹配到的最后一个div标签
// $('div:last').css('backgroundColor', 'red');
//选择内容为aaaaa的div标签
// $('div:contains(aaaaa)').css('backgroundColor', 'red');
// 选择class属性不为hello的li标签
// $('li:not(.hello)').css('backgroundColor', 'red');
// 选择第二个和第三个li标签
// $('li:lt(3):gt(0)').css('backgroundColor', 'red');
// 选择隐藏的li标签
// console.log($('li:hidden'));
// console.log($('li:hidden')[0]);
// 选择属性为title的li标签
// $('li[title]').css('backgroundColor', 'red');
// 选择属性title为ok的li标签
// $('li[title=ok]').css('backgroundColor', 'red');
// 选中下标为3的li标签
// $('li:eq(3)').css('backgroundColor', 'red');
// 选中下标为偶数的li标签
// $('li:even').css('backgroundColor', 'red');
// 选择下标为奇数的li标签
// $('li:odd').css('backgroundColor', 'red');
</script>
<body>
<div class="box">aaaaa</div>
<div class="title">bbbbb</div>
<div class="box">aaaaa</div>
<div class="index">ccccc</div>
<ul>
<li title="ok">ddddd</li>
<li class="hello">aaaaa</li>
<li title="box">eeeee</li>
<li class="hello">fffff</li>
<li class="index">ggggg</li>
<li style="display:none">我是隐藏的</li>
</ul>
</body>
扫一扫
1457
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
