JavaScript 第九天
1.1 jQuer 简介
JavaScript是前端浏览器的脚本语言,是原生语言。
JavaScript有很多功能代码 大牛们提前写好了 (使用的就是JavaScript)这套代码命名为 jQuery
也就是说 jQuery是使用JavaScript写好的第三方库
学习jQuery 就是学习别人写了哪些功能代码 如何使用 上层调用 ,如果想知道大牛怎么写的 就叫做 底层原理
1.2 jQuery 安装
第一种方式 网络链接
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
第二种范本 本地链接
A 在js文件夹上面右键新建 js文件
B 命名为 jq 选择模板 jquery-3.4.1-min.js
C 在html中 通过 script标签的 src引入
<script type="text/javascript" src="js/jq.js"></script>
https://jquery.cuishifeng.cn/
1.3 jQuery 核心和选择器
使用原生js完成点击按钮改变背景颜色
<body>
<button id="foo">改变颜色</button>
<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript">
var btn = document.querySelector("#foo");
btn.onclick = function(){
document.body.style.backgroundColor = "red";
}
</script>
</body>
我们发现 使用js进行操作的时候 首先我们需要将内容获取。
jQuery核心 就是在jQuery中如果获取页面标签
JavaScript方式 jQuery
document.querySelector("#foo"); $("")
document.querySelectorAll("选择器");
<body>
<button id="foo">改变颜色</button>
<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript">
$("#foo").click( function(){
$("body").css( "backgroundColor" , "blue" );
} );
</script>
</body>
1.4 jQuery 中的css
我们使用原生的js代码给页面标签添加样式
foo.style.backgroundColor = "red";
foo.style.width = "666px";
在jQuery中 可以使用 css的函数进行样式的设定
<body>
<button id="foo">改变颜色</button>
<ul>
<li>你好世界</li>
<li>你好世界</li>
<li>你好世界</li>
<li>你好世界</li>
<li>你好世界</li>
<li>你好世界</li>
<li>你好世界</li>
<li>你好世界</li>
<li>你好世界</li>
<li>你好世界</li>
</ul>
<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript">
$("#foo").click(function() {
$("li:lt(1)").css({
"color": "red" ,
"background-color": "blue",
"width":"120px",
"height":"666px"
});
});
</script>
</body>
1.5 jQuery 中的事件
在JavaScript中 事件的添加是这个样子的:
foo.onclick = function(){
}
在jQuery中 事件的添加是这个样子的:
$("#foo").click( function(){} );
基本上就是 js的事件 干掉on
jQuery还有一种写法
<body>
<button id="foo">改变颜色</button>
<ul>
<li>你好世界</li>
<li>你好世界</li>
<li>你好世界</li>
<li>你好世界</li>
<li>你好世界</li>
<li>你好世界</li>
<li>你好世界</li>
<li>你好世界</li>
<li>你好世界</li>
<li>你好世界</li>
</ul>
<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript">
var a = prompt("请输入你想要的效果");
$("#foo").on( a ,function(){
$("li:lt(1)").css({
"color": "red" ,
"background-color": "blue",
"width":"120px",
"height":"666px"
});
} );
</script>
</body>
1.6 jQuery 中的属性和筛选
<script type="text/javascript">
foo.onclick = function(){
var arr = document.querySelectorAll(".bar");
for(var i=0;i<arr.length;i++){
arr[i].checked = true;
}
}
</script>
此时jQuery版本是这个样子的
<button id="foo">改变颜色</button>
<input type="checkbox" class="bar" />
<input type="checkbox" class="bar" />
<input type="checkbox" class="bar" />
<input type="checkbox" class="bar" />
<input type="checkbox" class="bar" />
<input type="checkbox" class="bar" />
<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript">
$("#foo").click( function(){
$(".bar").prop("checked" , true);
});
</script>
HTML代码/文本/值 JavaScript
html([val|fn]) foo.innerHTML
text([val|fn]) foo.innerText
val([val|fn|arr]) 输入框.value
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.s {
background-color: red;
color: green;
}
</style>
</head>
<body>
<button class="s">天猫</button>
<button>店铺</button>
<button>宝贝</button>
<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript">
$("button").click( function(){
$(this).addClass("s").siblings().removeClass("s");
});
</script>
</body>
1.7 jQuery 的效果
jQuery开发了一套强大的动画特效js代码 让我们不知不觉就完成动画。
<body>
<ul>
<li >宝马
<ul>
<li>M3</li>
<li>M4</li>
<li>M5</li>
</ul>
</li>
<li >宝骏
<ul>
<li>730</li>
<li>520</li>
<li>310</li>
</ul>
</li>
<li >保时捷
<ul>
<li>718</li>
<li>911</li>
<li>918</li>
</ul>
</li>
</ul>
<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript">
$("li").click( function(e){
$(this).children().stop().slideToggle();
e.stopPropagation();
} );
</script>
</body>
1.8 jQuery 文档处理
文档处理就是DOM操作的增删改
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
select {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<select multiple="multiple" id="left">
<option value="">狮子头</option>
<option value="">牛肉丸</option>
<option value="">毛肚</option>
<option value="">虾滑</option>
<option value="">鱼豆腐</option>
</select>
<select multiple="multiple" id="right"></select>
<div>
<button>去右边</button>
<button>全去右边</button>
<button>去左边</button>
<button>全去左边</button>
</div>
<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript">
$("button:eq(0)").click(function() {
$("#left option:selected").appendTo("#right");
})
$("button:eq(1)").click(function() {
$("#left option").appendTo("#right");
})
</script>
</body>