冯佳丽_20210119冯佳丽
知识点总结
1、常见的事件
<body onload="ready()">
<input type="button" value="点我呀" onclick="testClick()"/><br />
<img src="img/2.jpg" width="350px" ondblclick="changeImage(this)">
<br>
<input type="text" onfocus="clearText(this)" onblur="setData(this)" value="请输入用户名..." />
<hr />
省份：
<select onchange="changeTest(this)">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sc">四川</option>
<option value="sx">陕西</option>
</select>
<br />
<!-- 如果该表单需要根据触发函数的返回值决定是否可以提交，那么必须在触发方法之前加 上return关键字-->
<form action="success.html" onsubmit=" return submitTest()">
用户名：<input type="text" name="userName" />
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
// 点击事件
function testClick(){
alert("点击了");
}
// 双击事件
function changeImage(imgObj){
imgObj.src = "img/1.jpg";
}
// 获取焦点
function clearText(inputObj) {
inputObj.value = "";
}
//失去焦点
function setData(inputObj) {
inputObj.value = "请输入用户名...";
}
//下拉框内容发生变化的时候会触发
function changeTest(selectObj) {
alert("当前改变后内容是：" + selectObj.value);
}
//表单提交的时候触发的方法
function submitTest() {
//如果表单提交的时候触发的方法返回的是false，那么该表单不允许提交，返 回true才允许提交。
alert("表单马上要提交了..");
}
//加载事件
// function ready() {
// alert("页面的元素已经被加载完毕了..");
// }
</script>
</body>
2、jQuery概述
jQuery是一个JavaScript框架，目的：简化JS开发。
本质上是一个外部的js文件，在该文件中封装了很多js代码,实现了很多功能。
轻量级：1）学习难易程度、2）该框架对项目的影响程度
框架：是完成某种功能的半成品软件
3、js与jQuery
| js | jQuery | |
|---|---|---|
| 相互转化 | js --> jq $(js对象) 或 jQuery(js对象) | jq --> js jq对象[索引] 或 jq对象.get(索引)注意：jq对象本质上是js数组 |
| 页面加载事件 | \((function(){})或者\)(document).ready(function(){}) | window.onload=function(){} |
| 事件绑定 | jq对象.click(function(){}) 回调函数 | js对象.onclick=function(){} |
| css样式设置 | jq对象.css('样式名','样式值')或者 jq对象.addClass() | js对象.style.样式名=样式值 |
4、jQuery选择器
和js的选择器用法基本相同
//部分操作案例
<div class="big_box">
<div id="samll_box">
<p>123</p>
<p>456</p>
<a href="#">789</a>
</div>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</div>
<!-- 导入jquery -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
// 选择.big_box选择器的所有兄弟元素
var a=$(".big_box ").siblings();
console.log(a)
// 选择的元素中的第一个元素
var b=$(".big_box :first");
console.log(b)
// 得选择的元素中的最后一个元素
var c=$("#samll_box :last");
console.log(c)
// 不包括指定内容的元素
// 不包含p元素标签选择器
var d=$("#samll_box :not(p)");
console.log(d)
// 偶数选择器
var e=$("#samll_box :even");
console.log(e)
// 奇数选择器
var f=$("#samll_box :odd");
console.log(f)
// 等于索引选择器
var g=$("#samll_box :eq(2)");
console.log(g)
// 大于索引选择器
var h=$("#samll_box :gt(0)");
console.log(h)
// 小于索引选择器
var l=$("#samll_box :lt(1)");
console.log(l)
//获得标题（h1~h6）元素
var ff=$(":header");
console.log(ff)
})
</script>
心得体会
1、jQuery和js的用法差不多，js学好，感觉jQuery就很简单了。
2、不熟练，发愁，代码不敏感，不熟悉，写个功能基本的东西都要百度半天，基础的东西陌生了。
近期评论