jQuery学习笔记(2),存在错误指出还望多多指教!!!
内容(文本)操作:=>
普通文本(text()):相当于JS中的innerText;设置内容不支
持解析;
获取文本内容:$(选择器).text();
设置文本内容:$(选择器).text(目标文本);
HTML(html()):相当于JS中的innerHTML;设置内容支持解析
获取HTML内容:$(选择器).html();
设置HTML内容:$(选择器).html(目标html)
值(val()):
获取值:$(选择器).val();
设置值:$(选择器).val(设置的值);
代码演示:=>
<body>
<a href=”#”><h1>首页</h1></a>
<input type=”text” name=”user” value=’张三’>
<script type=”text/javascript”
src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$( function () {
// 获取文本->结果为:首页
console.log($(‘[href]’).text());
// 获取html->返回的结果带有<h1></h1>标签,结果为
:<h1>首页</h1>
console.log($(‘[href]’).html());
// text设置普通文本,不支持解析->结果
为:<b>Text</b>
$(‘a’).text(‘<b>Text</b>’)
//html设置的文本支持解析->结果为:HTML
$(‘a’).html(‘<b>HTML</b>’)
//val获取表单中的值->结果为:张三
$(‘input’).val();
//val设置表单中的值->结果为:张三丰
$(‘[name=”user”]’).val(‘张三丰’);
})
</script>
</body>
——————————————————-
节点操作:=>
节点过滤(关系节点):
父节点:
$(选择器).parent();获取上一级父级节点(父辈);
$(选择器).parents();获取父级节点(长辈);
$(选择器).parentsUntil(截止选择器);获取父级节点
的范围;
代码演示:=>
<body>
<ul>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
</ul>
<script type=”text/javascript”
src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$(function() {
//获取父节点,在body标签上添加的css属性
$(‘ul’).parent().css(‘border’, ‘5px solid
red’);
//获取父级节点,在body,html标签上添加上css样式
$(‘ul’).parents().css(‘border’, ‘5px solid
blue’);
//获取父级节点的范围(截止标签不包含在内),添加
css样式
$(‘ul’).parentsUntil(‘html’).css(‘border’, ‘5px
solid green’);
})
</script>
</body>
子节点:
$(选择器).children();获取子节点
$(选择器1).find(选择器);获取当前节点下符合条件
下的子节点;
代码演示:=>
<body>
<ul>
<li>标题1</li>
<li>标题2</li>
<li>标题3<span>取不到</span></li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
</ul>
<script type=”text/javascript”
src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$(function() {
//获取子节点,获取不到<span></span>标签
$(‘ul’).children().css(‘border’, ‘2px solid
blue’);
//获取符合条件的子节点,可以获取<span></span>标
签
$(‘ul’).children().find(“span”).css(‘border’,
‘2px solid red’)
})
</script>
</body>
兄弟节点:
$(选择器).siblings();获取当前节点的所有兄弟节点
(不包含当前节点);
$(选择器).prev();哥哥节点,获取当前节点上一个哥
哥节点;
$(选择器).prevAll();获取当前节点所有的哥哥节点;
$(选择器).next();弟弟节点,获取当前节点的下一个
弟弟节点;
$(选择器).nextAll();获取当前节点所有的弟弟节点;
$(选择器).nextUntil(截止选择器);获取当前节点到
截止节点范围的弟弟节点
$(选择器).prevUntil(截止选择器);获取当前节点到
截止节点范围的哥哥节点
代码演示:=>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<script type=”text/javascript”
src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$(function() {
// 获取兄弟节点,但不包含当前节点
$(‘h3’).siblings().css(‘color’, ‘blue’);
//获取上一个哥哥节点
$(‘h3’).prev().css(‘border’, ‘2px solid red’);
// 获取当前节点所有哥哥节点
$(‘h3’).prevAll().css(‘background-color’,
‘#FFAABB’);
//获取弟弟节点
$(‘h3’).next().css(‘border’, ‘2px solid
green’);
// 获取当前节点所有弟弟节点
$(‘h3’).nextAll().css(‘background-color’,
‘#AAEEFF’);
//获取弟弟节点的范围(不包括截止节点)
$(‘h3’).nextUntil(‘h6’).css(‘font-style’,
‘italic’);
//获取哥哥节点的范围(不包括截止节点)
$(‘h3’).prevUntil(‘h1’).css(‘font-style’,
‘italic’);
})
</script>
</body>
——————————————————
文档操作:=>
创建(新建) $(HTML)
添加:=>
外部添加:
前面: $(选择器).before(内容);
语法糖 :$(内容).insertBefore(选择器);
后面: $(选择器).after(内容);
语法糖:$(内容).insertAfter(选择器);
内部添加:
前面: $(选择器).prepend(内容);
语法糖:$(内容).prependTo(选择器);
后面: $(选择器).append(内容);
语法糖:$(内容).appendTo(选择器);
代码演示:=>
<body>
<!– 外部之前 –>
<div style=”border:2px solid blue”>
<!– 内部之前 –>
原有内容
<br>
<!– 内部之后 –>
</div>
<!– 外部之后 –>
<script type=”text/javascript”
src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$(function() {
//外部之前添加内容
$(‘div’).before(‘<span>Before</span><br>’);
// 语法糖
$(‘<span>insertBefore</span><br>’).insertBefore(‘div’);
//外部之后添加内容
$(‘div’).after(‘<span>After</span><br>’);
// 语法糖
$(‘<span>insertAfter</span><br>’).insertAfter
(‘div’);
//内部之前添加内容
$(‘div’).prepend(‘<span
style=”color:red”>Prepend</span><br>’);
// 语法糖
$(‘<span
style=”color:green”>Prepend</span><br>’).prependTo
(‘div’);
//内部之后添加内容
$(‘div’).append(‘<span
style=”color:red”>Apprepend</span><br>’);
// 语法糖
$(‘<span
style=”color:green”>apprependTo</span><br>’).appendTo
(‘div’);
})
</script>
</body>
周围添加:=>
外部:$(选择器).wrap(内容);
内部:$(选择器).wrapInner(内容);
代码演示:=>
<body>
<div style=”border:2px solid red”>原有内容</div>
<script type=”text/javascript”
src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$(function() {
//外部周围
$(‘div’).wrap(‘<p style=”border:5px solid
blue”></p>’);
//内部周围
$(‘div’).wrapInner(‘<div style=”border:5px
solid green”></div>’);
})
</script>
</body>
删除:=>
$(选择器).remove();删除选择器选中的整个节点(标签+内
容);
$(选择器).empty();删除选择器选中的整个节点(节点内
容);
$(选择器).unwarp();删除目标元素的父元素;
代码演示:=>
<body>
<div id=”d1″>原有内容1</div>
<div id=”d2″>原有内容2</div>
<span style=”color:red”>
<p>段落1</p>
<p>段落2</p>
</span>
<script type=”text/javascript”
src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$(function() {
//删除节点,节点div1内容连同标签一起删除
$(‘div:first’).remove();
//删除节点,节点div2内容删除标签还在
$(‘.d2’).empty();
// 删除父元素
$(‘p’).unwarp();
})
</script>
</body>
替换:=>
$(选择器).replaceWith(HTML);
语法糖: $(内容).replaceAll(选择器);
代码演示:=>
<body>
<p>段落1</p>
<p>段落2</p>
<div>层标签1</div>
<div>层标签2</div>
<script type=”text/javascript”
src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$(function() {
//替换p标签
$(‘p’).replaceWith(‘<span>Span</span>’);
//替换div标签
$(‘<div>DIV</div>’).replaceAll(‘div’);
//在控制台输入jQuery对象
console.log($());
})
</script>
</body>
——————————————————-
常用函数:=>
$.trim(变量);去掉字符串两侧空格;
$.type(变量);返回变量的类型;类似于JS中的typeof();
$. each ();用来遍历数组或对象;
语法:$.each(数组,function(索引,值){
代码
});
$(this).index([‘选择器’]);根据指定的选择器获取索引;
代码演示:=>
<body>
<ul>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
</ul>
<script type=”text/javascript”
src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$(function() {
var hi = ” hello, word “;
console.log(hi);
//去掉字符串两侧的空格
console.log($.trim(hi));
//返回变量类型,同JS中typeof();
console.log($.type(hi));
var arr = [‘奔驰’, ‘宝马’, ‘劳斯莱斯’];
console.log($.type(arr));
//遍历数组
$.each(arr, function(index, value) {
console.log(index + “:” + value);
});
// 遍历对象
var zhangsanfeng = {
‘username’: ‘张三丰’,
‘userage’: 140,
‘userkill’: “太极拳”
};
$.each(zhangsanfeng, function(label, value) {
console.log(“属性名:” + label + “属性值:” +
value);
});
//遍历选择器选中的结果
$(‘ul’).children().each(function(index, value)
{
//获取索引和值
console.log(index + ” ” + value);
//获取索引和文本内容
console.log($(this).index() + $(this).text
());
});
});
</script>
</body>
——————————————————-
事件:=>
鼠标事件:
click();单击事件
dblclick();双击事件
mouseover();鼠标滑过事件
mouseout();鼠标滑出事件
…
键盘事件:
keydown();向下按键
keyup();按键弹开
keypress();按键事件
文档事件:
ready();文档就绪事件
load();文档加载事件
表单事件:
focus()获取焦点
blur()失去焦点
change()变更事件
submit()提交事件
…
复合事件:
hover();鼠标悬停事件;
语法:$(选择器).hover(fn1,fn2);(注:fn1代表鼠标划入是的执行程序,fn2代表鼠标离开时执行的程序)
代码演示:=>
<body>
<div style=”width: 150px;height: 100px;background-color: #AABBFF”>
</div>
<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$(function() {
// 复合事件
$(‘div’).hover(function() {
$(this).html(‘我进来了’);
$(this).css(‘background-color’, ‘#FFEEAA’)
}, function() {
$(this).html(‘我离开了’);
$(this).css(‘background-color’, ‘#AABBFF’);
});
})
</script>
</body>
toggle();切换事件
事件触发:
$(选择器).事件名(事件执行程序,一般为匿名函数);
语法糖:$(选择器). bind (事件名,执行程序);
绑定多个事件,执行一个程序:
$(选择器).bind(事件名1,事件2…,执行程序);
代码演示:=>
<body>
<button>点我试试</button>
<div style=”width: 100px;height: 100px;background-
color: #FFAABB”>
</div>
<script type=”text/javascript”
src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$(function() {
//鼠标点击事件,在div中添加css样式和文本
$(‘button’).click(function() {
$(‘div’).css(‘background-color’,
‘#AADDFF’);
$(‘div’).html(‘<h1>试试就试试</h1>’);
});
//语法糖,鼠标双击事件,在控制台输出div中内容
$(‘div’).bind(‘dblclick’, function() {
console.log($(this).html());
});
//绑定多个事件,执行同一个程序
$(‘div’).bind(‘dblclick mouseover’, function()
{
console.log($(this).html());
});
})
</script>
</body>
绑定多个事件,执行多个程序:
$(选择器).bind({
事件1:执行程序1,
事件2:执行程序2,
…
});
代码演示:=>
<body>
<div style=”width: 150px;height: 100px;background-
color: #AABBFF”>
</div>
<script type=”text/javascript”
src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$(function() {
$(‘div’).bind({
// 事件1,鼠标滑过
‘mouseover’: function() {
$(this).html(‘我进来了’);
$(this).css(‘background-color’,
‘#FFEEAA’)
},
// 事件2,鼠标滑出
‘mouseout’: function() {
$(this).html(‘我离开了’);
$(this).css(‘background-color’,
‘#AABBFF’);
}
});
})
</script>
</body>
——————————————————-
小项目:<点击验证码进行刷新验证码>
<body>
<p>验证码点击更新</p>
<img src=”Captcha.php” id=”captcha”>
<img src=”Captcha.php” id=”cap”>
<!– 应用JS,点击验证码,进行刷新验证码 –>
<script type=”text/javascript”>
var cap = document.getElementById(‘cap’);
cap.onclick = function() {
cap.src = ‘Captcha.php?rand=’ + Math.random();
}
</script>
<!– 应用jQuery,点击验证码,进行刷新验证码 –>
<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
$(function() {
$(‘#captcha’).click(function() {
$(this).attr(‘src’, ‘Captcha.php?rand=’ + Math.random());
});
});
</script>
</body>
——————————————————-
动画:=>
基本动画:
隐藏:
hide([duration],[complete]);
duration参数为动画执行时间,可以是数字或者字符串(slow(慢速),normal(默认400毫秒),fast(快速));
complete参数为动画结束后执行的函数
显示:
show();
切换(也是复合事件):
toggle();
滑动动画:
向上滑动(隐藏):
slideUp();
向下滑动(显示):
slideDown();
滑动切换:
slideToggle();
淡入淡出:
淡出(隐藏):
fadeOut():
淡入(显示):
fadeIn();
切换:
fadeToggle();
代码演示:=>
<body>
<button id=”hide”>隐藏</button>
<button id=”show”>显示</button>
<button id=”toggle”>切换</button>
<div style=”width: 100px;height: 100px;background-color: blue”></div>
<script type=”text/javascript” src=”../../../jquery-3.3.1.min.js”></script>
<script type=”text/javascript”>
//就绪函数简写方式
$(function() {
//基本动画
//隐藏
$(‘#hide’).click(function() {
$(‘div’).hide(6000, function() {
alert(‘隐藏完毕’);
}); //此处的20000表示20秒隐藏,其间长宽以及透明度逐渐变小,此参数可以不设定;后一个参数匿名函数为执行后的效果
});
//显示
$(‘button:eq(1)’).bind(‘click’, function() {
$(‘div’).show(5000, function() {
$(this).text(‘动画展示结束’);
});
});
//切换
$(‘button:last()’).bind(‘click’, function() {
$(‘div’).toggle(2000);
})
})
</script>
</body>
