<!DOCTYPE html><!--标记文本为html-->
<html>
<head>
<meta charset="utf-8"><!--编码是utf-8 -->
<title>day01</title><!--标题-->
<script src="jquery-3.3.1.min.js">
</script><!--搭建环境-->
<script>
$(document).ready(
function(){
//第一种
// alert("hello world");
//二种
// if(confirm("你好！")){
// alert("yes");
// }else{
// alert("no");
// }
// 三种
// var c //声明变量，可以一开始就对它进行赋值 ；
// var b = 123;
// var d = '123';
// var a=prompt("请输入密码：");
// alert(a);
// function c(){
// b=1234;
// };
// c();
// alert(b);
// if(b===d){
// alert("相等");
// //注意这里要使用全等，===
// }else{
// alert("不相等");
// }
});
</script>
<style type="text/css">
#id{width:10px;height:100px;}
/* .d{
width:100px;
height: 100px;
display:none;
}*/
</style>
</head>
<body>
<!-- 常见的表单控件如下介绍 -->
<form action="x.html" method="post">
用户号:<input type="text" name="name" maxlength="10" value="s h i "placeholder="请输入账号！" disabled="disabled"><br/>
<!--form 表示表单，action 表示处理的文件，或者把数据传递到x.html文件中 ， value="s h i ":表示默认值为s h i ; placeholder="请输入账号！" ;禁用属性:disabled="disabled"-->
密码:    <input type="password" class="passwd" name="passwd" placeholder="请输入账号！" value="1"><br/>
<!-- type="password"  表示空格-->
<input type="checkbox" name="" checked="checked" value="cc" ><br/>
<!-- type="checkbox" 这是复选框的使用-->
<input type="radio" name="A" checked="checked" value="a">A
<input type="radio" name="A" value="b">B
<input type="radio" name="A" value="c">C
<input type="radio" name="A" value="d">D<br/>
<!-- 单选框 ， name相同即可实现单选框同一组 -->
<input type="button" name="bt" value="提交"><br/>
<input type="submit" name="" value="login"><br/>
<!--type="submit"提交数据，跳转页面 -->
<input type="reset" name=""><br/>
<!--重置按钮，重置按钮是无法重置value的值的，只能恢复网页的原始状态-->
<input type="hidden" name="" value="100"><br/>
<!--隐藏文本域-->
<input type="file" name=""><br/>
<!-- 点击可以选择本地文件，文件保存在form中，当点击submit时会把文件上传到action="test.php(或者其他文件中)" -->
<!-- 超链接的运用 -->
<a href="a.txt">下载a.txt</a><br/>
<a href="a.html">跳转到a.html</a><br/>
<a href="tel:18296842318">在手机端可以拨打电话</a><br/>
<a href="email">发送邮件</a><br/>
<!-- select与option联合起来一起使用 -->
<select>
<option>A</option>
<option selected="selected" value="B">B</option>
<!--selected="selected"的话默认是B -->
<option>C</option>
<option>D</option>
</select></form><br/>
<textarea rows="5" cols="200">
</textarea>
<!-- 多行文本内容框 -->
</form>
<div class="d">
c0,dispaly;
</div>
<div id="a" name="b" class="c">
id="a" name="b" class="c"的选择器。
<div>eq(0)
<div >div1</div>
</div>
<div class="c">eq(1)</div>
<div>eq(2)</div>
<p>hahap </p>
</div>
<div class="c">
哈c1
</div>
<div id="a" name="b1" class="c1">
.a.c的类选择器。2
<div class="c">#a中的c选择器</div>
</div>
<div id="a1">
a1的类选择器。3
</div>
<div id="a2">
a2的类选择器。4
</div>
<div class="a1">
a1 5ssgsgsgdisplay;
</div>
<div class="c">
c6
</div>
<div class="a2">
a7
</div>
<div class="a3">
a8
</div>
<h1>h1</h1>
<h2>h2</h2>
<div id="id"></div>
<div><p></p><div>
<div></div>
<div class="e">aaa</div>
<div class="e1">
<p>
<span>
dss
</span>
</p>
</div>
<script>
// var cnum=$(".c").length;//统计选择器的个数。
// alert(cnum);
// $("div").eq(0).css("color","red");
//$("div")表示是一个jQuery的选择器
// 改变css样式
//$("div").eq(0) ;这个eq(0)是相对于父元素的排行榜，第一个为0。
// $("#a").css("background","#ff0");//id选择器的使用
// $(".c").css("color","red");//类名选择器的使用
// $(".a.c").css("color","blue");//类名选择器的使用
// $(".c,.c1,#a1").css("color","red");//拼接选择器。
// $("*").css("color","red");//作用与页面中的所有
// $("#a div").eq(0).css("background","red"); //层次选择器。
// $("#a>.c").css("background","red"); //>只找子元素。
// $("#a+.c").css("background","red"); //下一个选择器。
// $("#a~.c").css("background","red"); //这个选择器后面的兄弟。
// $("#a").siblings(".c").css("background","red");//sibling:同辈的
// $("#a").siblings().css("background","red");//找同辈的选择器
// $("#a").parent().css("background","red");//找父辈，这个父辈是bady，
// $("#a").children().css("background","red");//子类中所有的元素。
//$("#a").find(".c").css("background","red");//找后代
// $(".c:first").css("background","red");//第一个标签。
// $(".c:last").css("background","red");//最后一个属性
// $(".c:not('#a')").css("color","red");//class为c ，并且id不为a的选择器，让他的字体变红
// $("div:even").css("background","red");//奇数行的选择器
// $("div:odd").css("background","red");//偶数行的选择器
// $("div:odd:first").css("background","red");//第一个偶函数的选择器
// $("div:odd:last").css("background","red");//最后一个偶函数的选择器
// $("div.eq(2)").css("background","red");//子类中排行第三的选择器
// $("div:gt(4)").css("background","red");//gt：表是>号；lt：表示<号；这里表示>4的选择。
// $(":header").css("background","red");//header表示选择<h1>~<h6>的标签。
// $("div:contains('哈')").css("background","red");//获取带有contains("关键字的选择器")
// $("div:empty").css("background-color","red");//获取div为empty的选择器
// $("div:has('.c')").css("background-color","red");//把含有.c的选择器，包括他自己本身都变成红色
// $("div:parent").css("background-color","red");//这里的parent，使所有的div多变成红色
// $("div:hidden").css("background-color","red");//让隐藏的选择的背景颜色变红。这里的结果是不可以看见的
// $("div:visible").css("background-color","red");//这里是让所有可见的选择器，变成红色。
// $("div").hide(); //隐藏所有的div选择器
// $("div").slideDown(2000);//下拉显示
// $("div").show();//显示所有的div选择器
// $("div").slideUp();//上拉隐藏
// $("div").slideToggle(2000);//与上一种方式相反
// $("div").fadeIn(2000);//在2s内慢慢显示出来
// $("div").fadeOut(2000);//在2s内慢慢隐藏
//.val .text .html
// alert($("option:selected").val());//弹出option中selected的选中的值，
// alert($("input:checked").val());
// alert($(".passwd").val());//这里是获取.passwd的value的值。
// $(".passwd").val("123");//修改.passwd的value的值。
// alert($(".e").text());//获取文本内容。
// alert($(".e").text("haha"));//修改文本内容。
// alert($(".e").html("<img src='1.jpg'/>"));
// html的方法是可以随时去生成html的代码的。
// alert($(".e1").html());
// alert($(".e").html());
// alert($(".e1").text());
// .text()的方法是会自动的省略代码的。
</script>
</body>
</html>
12-02
121
121
05-21
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
