收藏
批改状态：不合格
老师批语：看清公告中的作业要求, 是将前面课程中的案例,用jQuery进行改写
1、和JS原生语法获取DOM元素样，在jQuery中，必须将原生的DOM对象转为jQuery对象才可以用jQuery对象的方法，基本的转化方法就是使用$()函数（工厂函数），比如$(firstLi)，$('li')……li是指所有li元素
2、jQuery的操作
属性操作
$(firstLi).attr('class', 'red')
$('li:last-of-type').addClass('bigger')
css操作
$('li:nth-of-type(2)').css('color', 'red')
$('h1').css({
'color': 'green',
'background-color': 'yellow',
'border': '1px solid black'
});
内容操作
$('li:first-of-type').text() 没有参数就是在获取文本内容
$('li:first-of-type').('这是一段新的内容') 有参数就是更改文本内容
$('li:nth-of-type(3)').html('JavaScript是通用的<span style="color: red">前端编程</span>语言'); 可以解析HTMLd代码
$('input').val(200) 没有参数就是获取值，有参数就是更改
DOM操作
$('li:first-of-type').parent().append('<li>jQuery啦啦啦</li>') 等价于 针对第一个li的父元素，为其添加子元素
与parent()类似的遍历操作 还有 children(), find(), next(), prev()
与append()类似的改动操作还有prepend(), after(), before()。append()=appendChild()，prepend()=insertBefore()，
过滤操作first(), last(), eq(), filter(), not()
$('li').first().css('background-color', 'lightgreen');
$('li').eq(2).css('background-color', 'lightgreen'); eq是从0开始
$('li').filter('.red').css('background-color', 'lightblue'); filter()是指定筛选条件,指定class为red的
事件
$('li:first-of-type').click(function () { } 或者 $('li:first-of-type').on('click', function () { }
总计一下，就是 .事件(回调函数）或者 on(事件，回调函数)
3、通过jQuery的Ajax函数完成前后端数据验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery的AJAX函数</title>
</head>
<body>
<label for="user_id">用户ID</label>
<input type="text" name="user_id" id="user_id" value="1">
<button>查询</button>
<!--加载jQuery-->
<script src="jquery.js"></script>
<script>
$('button').on('click', function () {
$.ajax({
/*1、请求类型*/
type: 'POST',
/*请求的服务器处理程序*/
url: 'get_data.php',
/*成功回调*/
success: callback,
/*服务器返回的数据类型*/
dataType: 'json',
/*发送到服务器的数据,默认转为 键值对*/
data: 'user_id=' + $('input').val()
});
});
/*当然也可以使用$.post()简化*/
/*
$('button').on('click',function () {
var url = 'get_data.php';
var data = 'user_id=' + $('input').val();
var dataType = 'json';
$.post(url, data, callback, dataType );
});
*/
/*这个data就是指服务端程序返回的内容*/
function callback(data) {
var result = '';
switch (data.status) {
case 1:
result += data.message.name + ': ' + data.message.email;
break;
case 0:
result += data.message;
break;
default:
result += '未知错误';
}
$('button').after('<p>').next().html(result); /*在button后面添加一个P标签，针对这个P标签添加内容*/
};
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
