本帖最后由 小石姐姐 于 2018-1-24 16:23 编辑
JavaWeb前端基础
Html:用来制作静态页面
文件是(.htm 或者.html)
Document的常用操作
*document.getElementById();通过Id获得元素
*document.getElementsByName():通过name属性获得元素
*document.getELementsByIdTagName():通过标签名获得元素
创建元素:
document.createElement();
document.createTextNode(): 创建文本
添加节点:
element.appendChild():在最后添加一个节点
element.insertBefore():
JQ:
js对象转为jQ对象:$(js对象名);
JQ对象转为JS对象: $d[0]
$d.get(0)
<!--使用之前一定要记得导包-->
什么JQ?
是JS框架,对js进行了封装
*js的常用框架:
JQuery,ExtJS,DWR...
JQ的使用:
传统页面加载只能有一次onload
$相当于jq对象:$(function(){
alert("jq");
});
jQ加载页面币JS效率高,jq是等页面的DOM树加载完后进行执行
,js是要等页面加载完成后才进行执行
jq写入方法:html("内容");
js对象和jq对象?
var $d=$("#d");
jq的效果操作:
show():
jq对象的.show();
jq对象.show("");//slow,mormal,fast;
jq对象.show(毫秒值)
jq对象.show("",function(){
});
slideDown():
slideIn();
fadeIn():---谈入
fadeOut():---谈出
animate():自定义动画
toggle();单击切换函数
层级选择器:
后代选择器:(body div)所有的都能找到
(选择器1+选择器2)找到下一个
子元素选择器:使用">"
基本过滤:
使用 “:”
odd奇数
even偶数
first第一个
last最后
<h2>JQuery的选择器</h2>
<!--
【基本选择器】(*****)
id选择器
* 用法:$(“#id”)
类选择器
* 用法:$(“.类名”)
元素选择器
* 用法:$(“元素名称”)
通配符选择器
* 用法:$(“*”)
并列选择器
* 用法:$(“选择器,选择器,选择器”)
【层级选择器】:
* 后代选择器:使用空格
* 所有后代包含孙子及以下的元素
* 子元素选择器:使用>
* 第一层的元素(儿子)
下一个元素:使用+
* 下一个同辈元素
兄弟元素:使用~
* 后面所有的同辈元素
【***基本过滤选择器】
:first
:last
:not(selector)
* :even - 偶数
* :odd - 奇数
* :eq(index)
:gt(index)
:lt(index)
:header
:animated
:focus
【内容选择器】
:contains(text)
:empty
:has(selector)
:parent
【属性选择器】
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN]
【表单选择器】
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
【表单属性选择器】
:enabled
:disabled
:checked
:selected
jQ里多个样式可以用空格隔开
triggle是或执行函数内容,并且执行浏览器的默认的函数操作
总结:
作用: trigger和triggerHandler两个方法的本质作用,调用其他元素中已经绑定的事件
trigger --- >不仅执行函数体,而且触发浏览器默认的这个函数的操作
triggerHandler---->只执行函数体,并不会触发浏览器默认的操作
使用bootStream时套引入如下:
<!--添加一个meta的标签-->
<meta name="viewport" content="width=device-width, initial-scale=1"> //不要忘记还有他
<!--引入两个必要的css-->
<link rel="stylesheet" href="../css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<!--引入两个js-->
<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>//jq一定要放在前面
<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
还要导入bootstream的js,css,fonts
|