收藏
批改状态：合格
老师批语：
$()函数的常用场景:选择元素,创建元素，执行回调等
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<a href="">这是a标签</a>
<ul id="big">
<li class="one">One</li>
<li class="one">Two</li>
<li class="two">Three</li>
</ul>
<script src="../jquery.js"></script>
<script>
//选择元素
$('a').css('color','blue');
//创建元素在父级下
$("<li>我是新的Four</li>").appendTo($('ul'));
$('.two').append($('<li>',{class:'five',text:'我是第五',click:function(){alert('Five')}}));
//回调
$('li').each(function()
{
$(this).css('backgroundColor','red');
})
</script>
</body>
</html>:jQuery常用的选择器操作,重点在层级和表单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<ul>
<li class="one"><h3>外</h3>
<ul>
<li><h3>内</h3></li>
</ul>
</li>
<li id="one">Two</li>
<li></li>
</ul>
<script src="../jquery.js"></script>
<script>
//通用选择器
$('*').css('color','red');
$('li').css('fontSize','2em');
$('.one').css('border','2px solid');
$('#one').css('border','5px double');
//层级选择器
$('li:first > h3').css('color','green');//只选择子级
$('li:first h3').css('color','green');//选择所有
//定位到第一内容是内的li，一定要加上：last才能正确选择
$("li:contains('内'):last").css('backgroundColor','blue');
//表单选择器
$('input[type="text"]').addClass('highlight'); // 属性选择器
$(':input').not(':submit').not(':disabled').addClass('highlight');
console.log($(':checkbox:checked').val()); // 当前选中的值
console.log($(':checkbox').not(':checked').val()); //未被选中的值
console.log($(':checkbox').val()); //默认返回被选中的值
console.log($(':input :selected').val()); // 注意过滤器之间必须要加空格,类:input并不针对
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
常用的DOM操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="operateDOM.css">
<script src="jquery-3.3.1.js"></script>
<script src="operateDOM.js"></script>
<style>
p{
width: 250px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<button>设置属性</button>
<button>获取属性</button>
<button>移除属性</button>
<button>设置值</button>
<button>获取值</button>
<button>设置html内容</button>
<button>获取html内容</button>
<button>设置text内容</button>
<button>获取text内容</button>
<div>
<input type="text" id="txt"/>
</div>
</body>
<script src="../jquery.js"></script>
<script>
$(document).ready(function () {
//设置属性
$("button:eq(0)").click(function () {
$(this).attr("title","我是一个按钮");
});
//获取属性
$("button:eq(1)").click(function () {
var a = $("button:eq(0)").attr("title");
console.log(a);
});
//移除属性
$("button:eq(2)").click(function () {
$("button:eq(0)").removeAttr("title");
});
//设置值 有一个参数为设置值
$("button:eq(3)").click(function () {
$("#txt").val("我是val设置输入的内容");
});
//获取值 没有参数为获取值
$("button:eq(4)").click(function () {
console.log($("#txt").val());
});
//设置html内容
$("button:eq(5)").click(function () {
$("div").html("<p>通过html（）方法设置html内容</p>");
});
//获取html内容
$("button:eq(6)").click(function () {
console.log($("div").html());
});
//设置text内容
$("button:eq(7)").click(function () {
$("div").text("通过text（）方法设置文本内容");
});
//获取text内容
$("button:eq(8)").click(function () {
console.log($("div").text());
});
});
</script>
</html>点击 "运行实例" 按钮查看在线实例
: jQuery与原生javascript相比，有哪些优势，哪些劣势。
问答: jQuery与原生javascript相比，有哪些优势，哪些劣势。
答：使用jQuery最大的好处是少写多做。
优点：
扩展能力好，抽象层次高，开发效率高，不需要太多经验也可以上手
代码兼容性较好，消除了JavaScript跨平台兼容问题。
相比其他JavaScript和JavaScript库，jQuery更容易使用。
jQuery支持AJAX。
缺点：
由于不是原生JavaScript语言，理解起来可能会受到限制。
项目中需要包含jQuery库文件。如果包含多个版本的jQuery库，可能会发生冲突。
业务简单时框架里的大部分代码是无用的，框架掩盖了一些问题的本质，对新手积累经验无益。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
