十三. jq书写代码的3种位置
"""js中等待页面加载完毕"""
# 等待页面加载完毕再执行代码
window.onload = function(){// js代码
}"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){// js代码
})
# 第二种
$(function(){// js代码
})
# 第三种
"""直接写在body内部最下方"""
十四. 动画效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><style>#d1 {height: 1000px;width: 400px;background-color: red;}</style>
</head>
<body><div id="d1"></div><script>/*.hide(msec) // 隐藏.show(msec) // 显示.slideUp(msec) // 向上卷起.slideDown(msec) // 向下展开.fadeOut(msec) // 淡出.fadeIn(msec) // 淡入.fadeTo(msec, opacity) // 透明度渐变 更改透明度值来产生淡入或者淡出效果*//*$('#d1').hide(5000);$('#d1').show(5000);$('#d1').slideUp(5000);$('#d1').slideDown(5000);$('#d1').fadeOut(5000);$('#d1').fadeIn(5000);$('#d1').fadeTo(5000, 0.5);*/
</script>
</body>
</html>
十五. jq实现类始于js中数组对象方法.forEach()或者.map()的.each方法: 2种.each方法实现方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="d1" username="jason">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div><script>/*$('div').each(function (index, obj) {});$.each($('li'), function (index, obj) {});*/// 第一种写法:$('div').each(function (index) { // 指定一个参数返回索引console.log(index);});$(['aaa', 'bbb', 'ccc']).each(function (index, obj) { // 也可以指定2个参数, 第二个参数返回遍历对象的索引对应的值.console.log(index, obj);});// 第二种写法:$.each($('div'), function (index, obj) {console.log(index, obj); // obj返回了标签对象});
</script>
</body>
</html>
十六. jq实现隐藏的标签属性
/*
$('div').data('info', 'value');
$('div').first().data('info');
$('div').last().removeData('info')
*/$('div').data('info', '回来吧，我原谅你了!'); // 设置让标签帮我们存储数据 并且用户肉眼看不见
$('div').first().data('info'); // 查看
$('div').last().data('info');
$('div').last().removeData('info') // 移除
$('div').last().data('info');
总结
# jq书写代码的3种位置:第一二重: head中, 需要预加载$(document).ready(function () {})$(function () {})第三种: body底部可以直接书写# 动画效果: 最后display会等于none隐藏: jq对象.hide(mesc)展现: jq对象.show(mesc)上卷: jq对象.slideUp(mesc)下展: jq对象.slideDown(mesc)淡出: jq对象.fadeIn(mesc)淡入: jq对象.fadeOut(mesc)透明度渐变: jq对象.fadeTo(mesc, opacity)# jq实现类始于js中数组对象方法.forEach()或者.map()的.each方法: 2种.each方法实现方式第一种:$('div').each(function (index, obj) {})$([1, 2, 3]).each(function (index, obj) {})第二种:$.($('div'), function (index, obj) {})$.([1, 2, 3], function (index, obj) {})提示: 2者对任意类型的对象, 都可以进行遍历, 使用each就替代掉了for循环遍历取值参数: index表示获取到的标签对象obj索引位置. obj就是索引对象. 其中index,和obj参数都是可选的.# jq实现隐藏的标签属性:设置: .data(attrName, attrValue)获取: .data(attrName)删除: .removeData(attrName)
十七. js里定义的$ 和jquery的$冲突解决
// 1. 解决多个库变量名冲突的方法: 将jQuery的$变量控制权交给index.js
jQuery.noConflict(); // Conflict,中文:冲突,读音:[/ˈkɒnflɪkt/]
console.log($);// 2. JQuery使用自制性函数: 将jQuery对象当作形参赋值给$符
(function($) {$(document).ready(function() {console.log($);// 使用id选择器: 使用jquery下的css方法,为box文本设置红色字体$('#box').css('color','red');});
})(jQuery);
)
