HTML5---重点记录学习笔记

JQuery 语言中
$('.username')  选择器基于元素名选择元素 或者提取选择器内的元素
(例:选择器基于.username元素名选择其元素)

$(selector)
selector:返回给JQuery()的原始选择器

$(docoument).ready();  方法允许我们在文档完全加载后执行函数


type='text' ,       $('.username ').val()
获取(.username)选择器中的元素 为text文本  
.val()不写参数为获得参数
.val(123) 表示为文本模式设置参数123

$('.menu.selected').removeClass('selected');
解释:从选择器.menu中的子选择器.selected   (selected返回原始选择器)
删除指定的(selected原始选择器)
removeClass:从所有匹配的元素中删除全部或者指定的类。


$(this).addClass('selected');
解释:对于当前选择器添加原始选择器
为每个匹配的元素添加指定的类名。

<style>

        .ke
        {

            color: blue;
        }
 </style>
kecheng.addClass("ke"); 
kecheng为选择器叫xxx的所有元素.对所有元素操作，修改目标对象的class属性



$('.thumb').attr('src','1.jpg');
为选择器名为.thumb的元素 设置其src属性为1.jpg

$()对所有选择器的用法:
ID选择器 $("#example")
Class选择器 $(".large")
标签选择器 $("img")
子选择器 $("#login.username")
属性选择器 $("input[ type='checkbox']")



 $('.thumb').hide();  对选择器名为thumb的元素设置为隐藏 
 $('.thumb').show();  对选择器名为thumb的元素设置为显示




 淡进,淡出  鼠标移进去就会显示重新上传和删除.移出去就消失了
 $(xxx).fadeIn();
 $(xxx).fadeOut();


结论:$('.java') 实际返回一个数组/集合 同时操作所有匹配的目标元素
 var kecheng=$('.java');

for(var i=0;i<kecheng.length;i++)
{                      //原生DOM元素
    var e =kecheng[i];
    var je=$(e);
    console.log("课 + "+je.html())
}



alert()显示到控制台

JavaScript自定义类型语言

调用函数参数不需要定义类型
function Student(id,name,sex) {
           this.id=id;
           this.name=name;
           this.sex=sex;
           this.introduce= function () {
               console.log("hi, i  am "+this.name);

           };//末尾必须加上分号
}
function Teacher() {
            this.name=null;
            this.start = function () {
                console.log("上课了");
            };
 }
var s =  new Student(20180508126,"刘新伟","男");
s.introduce();

var t= new Teacher();
t.start();

DOM事件处理
<div class="ppp" onclick="test(this,event)" > 3号 </div>

this :指向被点中的DOM元素
event:包含事件对象的信息，如点击的位置 evt.x/evt.y



onmouseover 和 onmouseout 事件可用于在用户的鼠标移至
 HTML 元素上方或移出元素时触发函数。

CSS样式
id 和 class 选择器
在设置样式时的区别
id:#para1
class:.para1


内联样式
style="color:sienna;margin-left:20px"

多重样式
h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

背景
background-color 背景颜色
background-image 背景图像

文本的对齐方式
text-align:center; 居中对齐
font-size 设置文字大小像素



Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。


边框样式 :  border-style属性用来定义边框的样式
solid: 定义实线边框
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

border-width 属性为边框指定宽度

border-color 边框颜色

border-width   5px
border-style (required)  solid
border-color  red
border:5px solid red;

边框-单独设置各边
p
{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

外边距
margin  auto	设置浏览器边距。
%	定义一个使用百分比的边距

margin-top:100px;   上
margin-bottom:100px; 下
margin-right:50px; 右
margin-left:50px; 左

填充
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
上内边距是 25px
右内边距是 50px
下内边距是 25px
左内边距是 50px


匹配所有复选框 checkbox