jQuery 是一个 JavaScript 库，是一个简化了JavaScript的框架，代码简洁，但是在使用时必须加载.js文件。
在Hbuilder中可以创建.js文件。
一、$()和.css()
$('标签选择器') ：获取一个元素对象，或一组元素数组。
.css():为某个元素设置样式
- 原始JavaScript写法
<script type="text/javascript">
window.onload = function() {
var oBox = document.getElementById("box");
oBox.style.width = '100px';
oBox.style.height = '100px';
oBox.style.background = 'red';
oBox.style.border = '1px solid black';
}
</script>
- jQuery写法
<script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#box').css('width','100px');
$('#box').css('height','100px');
$('#box').css('background','red');
$('#box').css('border','1px solid black');
// 等同于上面jq,支持链式操作
// $('#box').css('width','100px').css('height','100px').css('background','red').css('border','1px solid black')
})
</script>
jQuery支持链式操作.css('width','100px').css('height','100px').css('background','red').css('border','1px solid black')可直接为一个对象或一组对象赋予多个属性。
当获取div标签时，当前页面可能存在多个div标签，若同时赋予同样的属性时，传统的javascript需要遍历每个div标签赋予属性，而jQuery不需要，直接$('div').css('','').css('','')...即可完成全部操作。
二、绑定事件的三种写法
<script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// $('li').click(function(){
// console.log(1)
// })
// $('li').on('click',function(){
// console.log(1);//等特效于上面事件
// });
$(document).on('click','li',function(){
console.log(1);//等特效于上面事件
})
// 一个事件的三种绑定方式
})
</script>
三、html()、val()、attr()函数
- html()获取标签中的内容。相当于innerHTML()
- val()获取form组件中输入的内容。
- attr('属性') 获取元素中的属性。
- attr('属性'，'属性值') 为元素设置某种属性并赋值。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
}
.test{
border: 5px solid #fc3 !important;
}
</style>
<script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('button').on('click',function(){
alert($('h1').html());
//val() 获取表单中输入的内容
$('#box').css('background',$('input').val()).attr('class','test');
// attr 操作属性,一个参数时是获取属性；两个参数时设置该属性（参数1）的值(参数2)
})
})
</script>
</head>
<body>
<p>
<h1>通过html()获取我的内容</h1>
<input type="text" name="" id="" value="" />
<button type="button">切换</button>
</p>
<div id="box">
</div>
</body>
</html>
四、属性选择器
JavaScript在style中通过标签选择器设置属性的方式
<style type="text/css">
[type = 'text']{
color: aqua;
}
</style>
jQuery写法
<script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('input[type="text"]').css('color','aqua');
/* ^=1 以1开头 */
/* $('input[value^=1]').css('color','red');*/
/* $=9 以9结尾 */
/* $('input[value$=9]').css('color','yellow');*/
/* *=4 包含4 */
/* $('input[value*=4]').css('color','green');*/
})
</script>
五、addClass,removeClass,toggleClass
代码场景：在type标签中，用不同的类选择器设置多种不同的样式。给一个标签添加一个类，切换时变成另一个类的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.class_one{
width: 100px;
height: 100px;
border: 1px #000000 solid;
}
.class_two{
background: red;
}
</style>
<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 添加类
$('#box').addClass('class_one');
// $('#box').addClass('class_two');
// // 删除类
// $('#box').removeClass('class_two');
$('#box').click(function(){
// 切换类
$('#box').toggleClass('class_two');
})
})
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>
六、hide（），show（）函数
元素对象.hide（） 隐藏元素
元素对象.show（） 显示元素
七、DOM操作
兄弟节点
①prev()上一个兄弟节点：元素对象.prev().css('background','red');为元素的上一个兄弟元素添加样式。
②next()下一个兄弟节点：元素对象.next().css('background','blue');为元素的下一个兄弟元素添加样式。
③prevAll()上面所有兄弟节点:元素对象.prevAll().css('background','red');为元素的上面所有兄弟元素添加样式。
④nextAll()下面所有兄弟节点：元素对象.nextAll().css('background','blue');为元素的下面所有兄弟元素添加样式。
⑤siblings()所有兄弟节点：元素对
象.siblings().css('background','red');为所有的兄弟节点添加样式。
父节点
①parent() 当前父节点：元素对象.parent()元素对象的当前父节点。
②parents() 当前所有父节点：元素对象.parents()元素对象的当前所有父节点。
③closest('标签')找到某个标签名字（类、id）的最近的父节点(包括自己)！！！常用
追加节点
①append()在末尾追加子节点
②prepend()在开头追加子节点
③before()在某个节点前添加兄弟节点
④after()在某个节点后添加兄弟节点
插入节点
①insertAfter() 在某个节点之后插入节点
②insertBefore() 在某个节点之前插入节点
删除节点
remove()
子节点
children():只找一级子节点,参数可选填
find():查找全部子节点,参数必填
八、索引和下标
index():返回的是数字，不传参表示的是在兄弟标签中排名，传参（标签类型）表示在某类型标签中排名第几（不考虑级别）。
eq()：与标签对象或对象数组联合使用，得到的是一个具体的标签对象。
- $('#look').index() 在同级标签中的位置。
- $('#look').index('div') 在所有div标签中的位置。
- $('div').eq(0) 得到第一个div标签对象。
九、高度
- $(window).height() 窗口可视区的高度
- $(document).height() 整个页面的高度
- $(document).scrollTop()纵向的滚动距离
十、经典练习
上下移动
1557069367(1).jpg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>1<button type="button" class="up">上移</button><button type="button" class="down">下移</button></li>
<li>2<button type="button" class="up">上移</button><button type="button" class="down">下移</button></li>
<li>3<button type="button" class="up">上移</button><button type="button" class="down">下移</button></li>
<li>4<button type="button" class="up">上移</button><button type="button" class="down">下移</button></li>
<li>5<button type="button" class="up">上移</button><button type="button" class="down">下移</button></li>
</ul>
<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var prev =null;
$('.up').on('click',function(){
prev=$(this).closest('li').prev();
$(this).closest('li').insertBefore(prev);
})
$('.down').on('click',function(){
prev=$(this).closest('li').next();
$(this).closest('li').insertAfter(prev);
})
</script>
</body>
</html>
选项卡切换
1557069436(1).jpg
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 div {
width: 200px;
height: 200px;
border: 1px #000 solid;
display: none;
}
.active {
background: red;
}
</style>
<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
$(document).on('click','input',function(){
$('input').removeClass('active');
$(this).addClass('active');
$('#div1 div').hide();
// eq表示元素的下标,他返回的是一个具体的元素
// index是获取元素索引,它返回的是索引值
$('#div1 div').eq($(this).index('input')).show();
})
})
</script>
</head>
<body>
<div id="div1">
<input type="button" value="1" class="active">
<input type="button" value="2">
<input type="button" value="3">
<div style="display: block;">111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>
懒加载
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0;
background: darkcyan;
}
#list{
list-style: none;
padding: 0;
margin: 0 auto;
width: 800px;
position: relative;
}
#list li{
height: 100px;
border-bottom: 1px dashed darkgray;
background: #fff;
}
</style>
<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
// $('#list').children("li:last-child") 最后一个子节点
$(document).on('scroll',function(){
// console.log($('#list').children("li:last-child").position().top );最后一个元素距离父级元素的距离
var h = $('#list').children("li:last-child").position().top;//最后一个元素距离有定位的祖先元素的距离
var keshi=$(document).scrollTop();// 屏幕滚动距离
var windowT= $(window).height();// 窗口的可视高度
if(h<(keshi+windowT)){
var num = 11;
var $aLi=$('<li>"num+1"</li><li>num+2</li><li>num+3</li>');
$('#list').append($aLi);
num = num+4;
}
})
})
</script>
</head>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
</ul>
</body>
</html>
只执行一次事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
// 实现事件只执行一次
$('button').on('click',function(){
alert('123');
$(this).off('click');
})
})
</script>
</head>
<body>
<button type="button">按钮</button>
</body>
</html>
网友评论