web三要素
- 浏览器：浏览器发请求给服务器，下载服务器中的内容（HTML），执行HTML显示出内容。
- 服务器：接收浏览器的请求，发送响应结果给浏览器。
- http协议：浏览器与服务器的通讯协议。
主流浏览器：Chrome ， Firefox 等
hbuilderx 软件自带了一个内置服务器： 端口号默认是8848
web学习内容：
- html:用于勾勒出网页的结构和内容
- css:用于网页美化
- js:js操作的目标是html,css,是以这两者为基础的
web项目开发的技术：
HTML标签：
- 作用：填写并提交表单信息与服务器进行动态交互。
- 表单有两个基本部分：① 实现数据交互的可见的界面元素，比如文本框或按钮 ， ②提交后的表单处理。
- 相关标签： ① form标签 ：使用“form”元素创建表单， ②在“form”元素添加其他表单可以包含的控件元素。
form表单，使用成对的<form></form>标记：
主要属性
- action:定义表单被提交时发生的动作，通常包含服务方脚本的URL(比如JSP,PHP)
- method:指出表单数据提交的方式，取值为get或者post
- enctype:表单数据进行编码的方式
iframe标签： 在网页中，可以通过src的路径找到新的网页，嵌套在当前网页中
<body>
<!-- iframe标签： 在网页中，可以通过src的路径找到新的网页，嵌套在当前网页中。 -->
<iframe src="1.表单相关标签.html" width="100" height="100"></iframe>
<iframe src="../img/a.jpeg" width="100" height="100"></iframe>
<ul>
<!-- a标签的target ，指定为iframe标签的name值 ， 那么超链接的内容，则显示到
iframe标签中。 -->
<li><a href="../day1/1.html文件的结构.html" target="content">1.文件结构
</a></li>
<li><a href="../day1/2.文本相关标签.html" target="content">2.文本相关
</a></li>
<li><a href="../day1/3.有特殊样式的文本标签.html" target="content">3.特殊
样式的文本</a></li>
</ul>
<!-- 单击li中的超链接，把超链接的内容显示到iframe标签中。 -->
<iframe src="../day1/1.html文件的结构.html" width="300px" height="300px"
name="content" ></iframe>
</body>css语言
css(Cascading Style Sheets）:层叠样式表，又叫级联样式表，简称样式表，用于HTML文档中元素的样式定义，实现网页的美化，实现将内容和表现分离
1.css的三种使用方式
- 内联样式
- 样式定义在单个的HTML元素中
- 内部样式
- 样式定义在HTML页的头元素中
- 外部样式
- 将样式定义在一个外部的css文件中（.css文件）
- 由HTML页面引用样式表文件
2.css的语法规则
3.css的特征
① 继承性： 父元素的一些样式，会被其子元素继承。比如字体颜色。
② 层叠性： 一个元素可以有多个样式效果进行叠加。
③ 优先级： 浏览器默认样式< 标签的默认样式 < [外部样式/内部样式/内联样式]外部样式/内部样式/内联样式: 根据谁后写，谁优先。
4、css选择器
- 标签选择器: 根据标签的名字，选择到对应的标签(当前html页面中的该标签都被选择出
- 来。)。
- id选择器： 根据标签的id ， 选择标签。(一个html页面 ， id是唯一的， 只会选择出一个符号条件的标签).
- class选择器： 根据标签的class属性 ， 选择标签。( 一个html页面， class允许重复， 可以选择出多个符合条件的标签。)
- 分类选择器： 元素选择器和class/id选择器一起使用.
- 分组选择器： 选择器1 , 选择器2 ， 选择n....{样式}
- 派生选择器： 找子(嵌套在内部的第一层符号条件的标签元素) 选择器>选择器{}找子孙(嵌套在内部的所有符号条件的标签元素) 选择器 选择器{}
- 伪类选择器：伪类用于向某些选择器添加特殊的效果使用冒号(:)作为结合符，结合符左边是其他选择器，右边是伪类
- 常用伪类：
— :link 页面上从来没有点击过的链接
— :active 选择活动链接，并设置其样式：
— :visited 选择已访问的链接，并设置其样式：
— :hover 鼠标悬停的状态
— :focus 获取焦点的状态[对有键盘焦点的元素设置]
— :first-child 元素的第一个子元素添加样式
- 常用伪类：
js
变量的定义
- let 变量名；
- let 变量名=变量值;
- (变量的名字不能使用关键字)
数据类型
- string
- number
- boolean
- null
- undefined
运算符
- 算术运算符
- 关系运算符
- 逻辑运算符
- 赋值运算符
数据类型转换
- 隐式转换
- 数据类型转换函数
分支语句
- if...else
- if...
- if...else if....
循环语句
- for（let i =0 ; i < n ; i++）{}
- for循环同java语法规则
获取元素的方式
- document.getElementById(id值) ： 根据id查找元素，结果是一个元素对象
- document.getElementsByTagName(标签名字) ： 根据标签名查找，结果是一个元素的数组对象。
- document.getElementsByName(标签的name属性) ： 根据标签的name属性的值查找，结果是一个元素的数组对象。
- document.getElementsByClassName(标签class的值) ： 根据标签的class的值查找，结果是一个元素的数组对象。
修改和获取标签内部的内容：
- obj.innerHTML: 可以对文本和标签进行使用
- obj.innerText:只能对文本进行使用
- obj.value: 表单元素的value值的获取或者设置
修改标签的style
- obj.style.width/height
- obj.style.color
- .....
正则表达式
a .能出现那些字符「字符]，\d表示纯数字[e-9]，\w匹配字母数字[0-9a-zA-Z]
b. 出现的字符的个数{n}, {n , m} , +等价于{1,}, ?等价于{0,1},*等价于{0,}
c. 开始匹配^
d. 结尾匹配$
e. "."等价于任意内容
f. \用于转义，\.表示".本身
g. ()用作分组
h. |表示或
jquery
jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)
jquery就是js的函数库，jquery中封装了常用的函数。相比js，使用时可以直接调用函数，会更方便些
需要注意使用的是jquery对象还是dom对象
- 将jquery对象转换为dom对象： jquery对象[0]/.get(0)
- 将dom对象转换为jquery对象 ：$(dom对象)
jquery选择器
-
<body> <div id="d1"> <h1>jquery选择器</h1> <p> 1.id , class ,标签-基本选择器</p> <p> 2．层次选择器</p> <p class="impt"> 3.过滤选择器</p> <p class="impt"> 4.表单选择器</p> <p> 5.其他选择器</p> <input id="ipt1" value="100" /> <ul id="box"> <li>1</li> <li>1</li> <li>1 <ul> <li>2</li> <li>2</li> <li>2</li> </ul> </li> </ul> <h4>h3</h4> <h4>h4</h4> <h4>h5</h4> </div> <!-- 导入的js文件的script标签内部不能嵌套其他的js代码，如果嵌套了其他内容，导入的js文件无效 --> <script src="../js/jquery.js"></script> <script type="text/javascript"> //jquery的选择器函数:$(选择器)，选择器可以支持任意css的选择器。 $("#d1") // id选择器 $(".impt") // cLass选择器 $("h1") //标签选择器 $("p.impt").css("background", "green") //分类选择器 $("h1,p").css("color", "red") console.log($("*").length); //页面上所有的元素 // $("#box>li")//派生选择器，找符合条件的孩子 // $("#box li")//派生选择器，找所有的子孙 $("#box>li").css("border", "3px solid blue") $("#box li").css("color", "yellow") $("#box+h4").css("color", "pink") //离自己最近的弟弟 $("#box~h4").css("color", "pink") //出自己之外的符合条件(h4)的弟弟们 //功能： //1．获取d1中的html , text //--- text(),无参表示获取，有参表示设置 //--- html() ,无参表示获取，有参表示设置 console.log($("#d1").html()); console.log($("#d1").text()); // $("#d1").html("<p>修改了内容</p>") // $("#d1").text("<p>修改了内容</p>") console.log($("ipt1").val()); $("#ipt1").val("hello") console.log($("#d1").width()); $("#d1").width("50epx") console.log($("#d1").attr("id")); $("#d1").attr("id", "d3") </script> </body> -
<body> <div id="d1"> <p>:first</p> <P>:last</P> <p>:not</p> <p>:even(偶数) , :odd(奇数)</p> <p></p> <p class="impt">:odd</p> <p>:eq(index) ,等于</p> <p>:lt(index) ,小于</p> <p>:gt(index) ,大于</p> <p style="display: none;">我是看不见的</p> <a href="a.html">#a.html</a> <a href="">#b.html</a> <a href="#">#c.html</a> <input type="text" disabled="disabled" /> <input type="radio" checked="checked" />男 <input type="radio" />女 </div> <script src="../js/jquery.js"></script> <script> // 1. 把第一个p标签字体设置为蓝色 $("p:first").css("color","blue"); // 2. 最后一个p的背景色设置为黄色 $("p:last").css("background","yellow") //3. 找到不是class="impt"的所有p，然后设置绿色边框 $("p:not(.impt)").css("border" , "1px solid green") // 4. 基数的p设置背景色粉色， 偶数的设置灰色 $("p:odd").css("background" ,"pink") $("p:even").css("background" ,"gray") // 5. index = 2, 设置为字体25px , index >2 ,设置为30px , index < 2 设置为20px $("p:eq(2)").css("font-size","25px") $("p:lt(2)").css("font-size","10px") $("p:gt(2)").css("font-size","50px") // 6. 选出包含了元素的嵌套内容中保护了某个字符串的 console.log($("p:contains('index')")); // 7. 找出标签的文本内容是空的元素 $("p:empty").text("empty选出的标签") // 8 . :visible -可见的, :hidden - 隐藏的 $("p:visible").hide(); $("p:hidden").show() // 9. 属性选择器查找: 根据属性名字，或者属性名对应属性值。 // [属性名] ,[属性名=xx] $("a[href='#']").css("color" , "red") $("a[href!='#']").css("color" , "green") console.log($("p[class]").length); $("input[type='text']").css("color","red") // 10. :enabled , :disabled , :checked, :selected $("input:disabled").val("========") // 11. 表单选择器，可以根据表单的type进行选择 $("input:text").val("++++++++") console.log($("input:radio").length); </script> </body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
