DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>val函数操作多值元素title>
<script type="text/javascript" src="../js/jquery-3.6.0.js" >script>
<script type="text/javascript">
/* 文档准备好后将向id值为shici的元素前插入h2标题内容为子建诗 */
$(function(){
var h2var = "子建诗
"
$("#shici").before(h2var);
})
/* 点击'核算用餐总费用'按钮实现计算用餐总费用 */
/* 并将其添加到追加到div中，所有p段落之后 */
function countMoney(){
var sum = 0;
var labArr = $('div:last label');
labArr.each(function(i){
var text = this.innerText;
sum += parseInt(text);
});
//$('div:last').append("总费用:"+sum);
$('div:last br:last').after("总费用:"+sum+" ￥");
}
script>
head>
<body id="body_">
<div id="shici">
<p>煮豆燃豆萁p>
<p>豆在釜中泣p>
<p>本是同根生p>
<p>相煎何太急p>
div>
<div>
水煮鱼：<label>89label><br>
锅包肉：<label>45label><br>
麻辣鸡丝：<label>50label><br>
div>
<button onclick="countMoney()">核算用餐总费用button>
body>
html>
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>val函数操作多值元素title>
<script type="text/javascript" src="../js/jquery-3.6.0.js" >script>
<script type="text/javascript">
/* 为第一个段落添加css，设置字体颜色为红色，大小为25像素 */
function doCss(){
//$('p:first').css('color','red').css('font-size',25);
$('p:first').css({'color':'#ffCC99','font-size':36});
}
/* 为最后一个div中的段落添加背景色，奇数行为lime色，否则为pink色 */
function doCss2(){
$('div:last p').css('backgroundColor',function(i){
if (i%2 === 0)
return 'pink';
return 'lime';
});
}
script>
head>
<body id="body_">
<p>
横看成岭侧成峰<br>
远近高低各不同<br>
不识庐山真面目<br>
只缘身在此山中<br>
p>
<div>
<p>折戟沉沙铁未销p>
<p>自将磨洗认前朝p>
<p>东风不与周郎便p>
<p>铜雀春深锁二乔p>
div>
<br>
<button onclick="doCss()">为第一个段落添加cssbutton>
<button onclick="doCss2()">为最后一个div中的段落添加背景色button>
body>
html>
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>is函数和hasClass函数title>
<script type="text/javascript" src="../js/jquery-3.6.0.js" >script>
<script type="text/javascript">
var contents = ['谁行谁不行','谁醒谁不醒','醒者在五行','醒者也不行'];
/* 在contents数组中查找目标数据 */
function inArrayFind(obj){
var index = jQuery.inArray(obj,contents);
if (index != -1) {
alert("找到了，索引是 "+index);
}else{
alert("未找到"+index);
}
}
/* 所有p段落内容中查找目标数据 */
function inArrayFind2(obj){
var arr = [];
var pArr = $('p');
pArr.each(function(i){
arr[i] = this.innerText;
});
alert($.inArray(obj,arr));
}
script>
head>
<body id="body_">
<p>煮豆燃豆萁p>
<p>豆在釜中泣p>
<p>本是同根生p>
<p>相煎何太急p>
<button onclick="inArrayFind('谁醒谁不醒6')">inArray函数测试1button>
<button onclick="inArrayFind2('本是同根生')">inArray函数测试2button>
body>
html>
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>is函数和hasClass函数title>
<script type="text/javascript" src="../js/jquery-3.6.0.js" >script>
<script type="text/javascript">
var userJsonStr = '{"name":"东方不败","sex":"男","pwd":"111111"}';
/* 将userJsonStr 转换为一个对象,
访问此对象属性添加到对应的form元素中
*/
$(function(){
var user = $.parseJSON(userJsonStr);
$('#userName',$('#f1')).val(user.name);
$('#password',$('#f1')).val(user.pwd);
if (user.sex === '男') {
$('#sexM',$('#f1')).attr('checked',true);
}else{
$('#sexF',$('#f1')).attr('checked',true);
}
});
script>
head>
<body id="body_">
<form id="f1">
<input name="name" id="userName"><br>
<input name="pwd" id="password" type="password"><br>
<input name="sex" id="sexM" type="radio" value="1">男
<input name="sex" id="sexF" type="radio" value="0">女
form>
body>
html>
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>val函数操作多值元素title>
<script type="text/javascript" src="../js/jquery-3.6.0.js" >script>
<script type="text/javascript">
/* 将p段落替换为 保留原段落中html内容,偶数行字体为蓝色
奇数行字体颜色为红色 */
function replaceP(){
var pArr = $('p');
pArr.each(function(i){
if (i % 2 === 0) {
$(this).replaceWith(""+this.innerHTML+"
");
}else{
$(this).replaceWith(""+this.innerHTML+"
");
}
})
}
/* 清空第一个form中子元素 */
function emptyForm(){
$('form:first').empty();
alert($('form:first').attr('id'));
}
script>
head>
<body id="body_">
<form id="f1">
姓名：<input name="name" value="KING"><br>
地址：<input name="address" value=""><br>
年龄：<input name="age" value=""><br>
form>
<p>煮豆燃豆萁p>
<p>豆在釜中泣p>
<p>本是同根生p>
<p>相煎何太急p>
<button onclick="replaceP()">替换P段落并保持原内容button>
<button onclick="emptyForm()">清空第一个form中子元素button>
body>
html>
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>val函数操作多值元素title>
<script type="text/javascript" src="../js/jquery-3.6.0.js" >script>
<script type="text/javascript">
function doWrap(){
var divNew = "";
$('p').wrap(divNew);
}
function showWrap(){
var parr = $('#div0 p');
parr.each(function(){
alert(this.innerHTML);
});
}
function consoleWrap(){
$('p').unwrap();
}
function wrapInputs(){
var formnew = "";
$('input').wrap(formnew);
}
script>
head>
<body id="body_">
<p>煮豆燃豆萁p>
<p>豆在釜中泣p>
<p>本是同根生p>
<p>相煎何太急p>
<button onclick="doWrap()">将子建诗用div包围button>
<button onclick="showWrap()">显示包围效果button>
<button onclick="consoleWrap()">取消包围button><br><br>
<button onclick="wrapInputs()">使用form包围所有input元素button><br><br>
<input id="user" name="user" />
<input id="pwd" name="pwd" type="password" />
<input id="sub" type="submit" value="提交" />
body>
html>
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>val函数操作多值元素title>
<script type="text/javascript" src="../js/jquery-3.6.0.js" >script>
<script type="text/javascript">
var dropObj;
$(function(){
$('#first').data('name','国王');
});
function removeAllP(){
dropObj = $('p').remove('[id="first"]');
}
function detachAllP(){
dropObj = $('p').detach('[id="first"]');
}
function showData(){
var data = dropObj.data('name');
alert(data);
}
script>
head>
<body id="body_">
<p id="first">魔戒再现p>
<p class="c">双塔奇兵p>
<p type="a">王者归来p> <br>
<button onclick="removeAllP()">使用remove删除所有P段落button>
<button onclick="detachAllP()">使用detach删除所有P段落button>
<button onclick="showData()">显示数据button>
body>
html>
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>is函数和hasClass函数title>
<style type="text/css">
.cla{
font-size:25px;
color:red;
}
style>
<script type="text/javascript" src="../js/jquery-3.6.0.js" >script>
<script type="text/javascript">
/* 判断第一个div的最后label是否包含class 名称 cla */
function doIs(){
var res = $('div:first label:last').is('.cla');
alert(res);
}
/* 判断最后一个p段落紧随其后的img src属性值是不是dingshuqi.jpg */
function doIs2(){
var res = $('p:last+img').is('[src="签名.png"]');
alert(res);
}
/* 对象obj是否包含class名称cla,如果有移除它 */
function findClass(target,claName){
if (target instanceof $) {
alert(target.is('.'+claName+''));
}else{
alert($(target).is('.'+claName+''));
}
}
script>
head>
<body id="body_">
<div id="div2">
<label id="f">东方之国label>
<label class="cla cla2 cla3" onclick="findClass($(this),'cla3')">神州大地label>
div>
<button onclick="doIs()">判断第一个div的第一个元素是不是labelbutton>
<p>你好p>
<img src="签名.png"/>
<button onclick="doIs2()">判断最后一个p段落之后的img src属性值是不是签名.pngbutton>
body>
html>
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>is函数和hasClass函数title>
<script type="text/javascript" src="../js/jquery-3.6.0.js" >script>
<script type="text/javascript">
var userJsonStr = '{"name":"东方不败","sex":"男","pwd":"111111"}';
/* 将userJsonStr 转换为一个对象,
访问此对象属性添加到对应的form元素中
*/
var array = ['红楼梦','西游记','水浒传'];
var f = function(){};
var n = 2E2;
var nullVar = null;
// alert($.isArray(array));
// alert($.isFunction(f));
// alert($.isNumeric(n));
// alert($.isEmptyObject(nullVar));
function useTrim(){
var userStr = $('#userName').val();
alert(userStr+" 长度是 ："+userStr.length);
alert($.trim(userStr));
alert($.trim(userStr).length);
}
script>
head>
<body id="body_">
<form id="f1">
<input id="userName"><br>
<input id="password" value="123456" type="password"><br>
form>
<p class="c_1" onclick="add_Class('c_2')">中国人p>
<button onclick="useTrim()">去掉空格button>
body>
html>
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>val函数操作多值元素title>
<script type="text/javascript" src="../js/jquery-3.6.0.js" >script>
<script type="text/javascript">
var goodsArr = ["荣耀6X","麦芒9","华为P10"];
/* 文档准备好后将goodsArr中元素依次前置到div中3个段落中; */
$(function(){
var pArr = $('div p');
pArr.each(function(i){
$(this).prepend(""+goodsArr[i]+":");
});
});
/* 为form元素在最后添加一个提交按钮 */
$(function(){
var submitBut = "
";
$('form').append(submitBut);
});
script>
head>
<body id="body_">
<form id="f1">
<input id="userName" value="king"><br>
<input name="password" id="password" value="123456" type="password"><br>爱好<br>
<input name="likes" type="checkbox" value="majiang" checked>麻将
<input name="likes" type="checkbox" value="lanqiu">篮球
<input name="likes" type="checkbox" value="youxi" checked>游戏
form>
<div>
<p>1256￥p>
<p>2000￥p>
<p>3000￥p>
div>
body>
html>