JavaScript常用的命令, JQuery框架, Ajax异步IO技术等知识详解
js常用的命令, jquery框架, ajax异步io技术
对象模型-bom(browser object model)
文档对象模型-dom(document object model)
语法规范 ecmscripts - 主要使用 es 5.1 (最新是es 8)
1.javascript常用的命令
windonw
alert / promote / confirm
location href / reload() / replace()
history go() / forward() / back()
settimeout()/setinterval()
cleartiameout()/clearinterval()
document
getelementbyid() / tagname() / classname()
queryselector() / queryselectorall()
textcontent (文本)/ innerhtml(文本+标签) / nodevalue(节点)
图片处理, 抠图
background: url(img/url.jpg) norepeat -95px -15px;位置
事件冒泡和事件捕获
事件冒泡: child --> parent 从下往上传播 (ie)
事件捕获: parent --> child 从上往下传播
阻止事件的传播
evt.stop.propagation(), 事件到此为止, 不再继续传播
evt参数
evt参数表示的是时间对象, 绑定了和事件有关的所有信息, 如果事件回调函数中要用到事件相关的属性和方法, 最好就是指定evt参数
this 时间源, 谁调用函数谁就是事件源
j s 中的三元条件运算
function getstyle(elem) {
return window.getcomputedstyle ? window.getcomputedstyle(elem) : elem.currentstyle
}
2.jquery框架
基本命令
在window.jquery = function () {}绑定
var $ = window.jquary;
jquary('#id') = $('#id')
jquery.noconflict(); //将 $ 函数不用 用 jquery 代替 解决引入多个库的 $ 冲突, 将原来使用 $ 的地方换为 jquery
$('#id') 选择elem 转化为 jqelem
jqelem.fadein(1000) 淡入
jqelem.fadeout(1000) 淡出
jqelem.on('click', function () {}) 绑定事件
jqelem.attr('class/type/', '设置值'); 设置 属性
jqelem.css('', '') 设置 css style
$('#id').one('click', function () {}) 只点击一次 执行函数
$('#id').each(function (){}) 对选中的p 的每一个执行操作
$("#id").text('abc') 将字符串作为 #id 标签的的内容写入
.html('') 加标签
$("id").val() 读取该标签里面的值
// 链式开火车式编程 可以对一个 elem 进行多种方法一次顺序操作 元素还是原来的这个元素
事件传播
???????????????????????????????????
jquary对象
不需要考虑浏览器兼容性问题
jquary 的本质是一个数组 包含着所有的获得的元素
如果需要将jquary 还原成原生的js对象 - 下标运算可以得到 或 get(index)
$(item)
1. $(function()) 绑定该函数是页面加载完成后进行的回调函数
2. $(selector) 传入的参数是一个选择器 通过选择器获得对应的元素,并将其处理成 3. $(elem) 传入的参数是一个原生 js 对象 event.target / this
将原生 js 对象转变为 jqyary 对象 jquary 有更多的属性和方法
4. $(tag) 传入的是标签 创建标签对应的元素 并处理成 jquary 对象
查找元素
- 选择器
- * / element / #id / .class / selector1, selector2
- ancestor descendant / parent>child / previous+next / previous~siblings
- 筛选器
- 基本筛选器：:not(selector) / :first / :last / :even / :odd / :eq(index) / :gt(index) / :lt(index) / :animated / :focus
- 内容筛选器：:contains('…') / :empty / :parent / :has(selector)
- 可见性筛选器：:hidden / :visible
- 子节点筛选器：:nth-child(expr) / :first-child / :last-child / :only-child
- 属性筛选器：[attribute] / [attribute='value'] / [attribute!='value'] / [attribute^='value'] / [attribute$='value'] / [attribute|='value'] / [attribute~='value']
- 表单：:input / :text / :password / :radio / :checkbox / :submit / :image / :reset / :button / :file / :selected / :enabled / :disabled / :checked
执行操作
- 内容操作
- 获取/修改内容：html() / text() / replacewith() / remove()
- 获取/设置元素：before() / after() / prepend() / append() / remove() / clone() / unwrap() / detach() / empty() / add()
- 获取/修改属性：attr() / removeattr() / addclass() / removeclass() / css()
- 获取/设置表单值：val()
- 查找操作
- 查找方法：find() / parent() / children() / siblings() / next() / nextall() / prev() / prevall()
- 筛选器：filter() / not() / has() / is() / contains()
- 索引编号：eq()
- 尺寸和位置
- 尺寸相关：height() / width() / innerheight() / innerwidth() / outerwidth() / outerheight()
- 位置相关：offset() / position() / scrollleft() / scrolltop()
- 特效和动画
- 基本动画：show() / hide() / toggle()
- 消失出现：fadein() / fadeout() / fadeto() / fadetoggle()
- 滑动效果：slidedown() / slideup() / slidetoggle()
- 自定义：delay() / stop() / animate()
- 事件
- 文档加载：ready() / load()
- 用户交互：on() / off()
css() 和 attr() 区别
但css()是用来操纵元素style{}的，而attr()是用来操作元素固有的属性的，且attr()的权重比css()要大，它会覆盖css()的样式。
$("#txt").css("display","none")
$("#txt").css({"display":"none","width":"5px",....}) $("#txt").attr("title","zz")
3.ajax异步io技术
异步获取服务器数据
( 异步 -不阻塞 ) (同步 - 阻塞 排队等待)
服务器取得相应数据 (json/xml) , 就可以对页面进行局部刷新,就可以在不中断用户体验的前提下刷新页面
瀑布式加载
javascript 发送http请求默认只支持同源策略, 只能取自己网站的数据
如果要跨域取数据 是需要对方提供数据的服务器是支持的
如果对方支持模式 jsonp
服务器设置 cross-origin: * ; 支持跨域取数据
代码示例, 原生, 无jquary
<body>
<p id="mm"></p>
<button id="loadbtn">加载</button>
<script src="js/jquery1.12.min.js"></script>
<script>
//javascript 发送http请求默认只支持同源策略
$(function() {
$('#loadbtn').on('click', function() {
var url = 'https://api.tianapi.com/meinv/?key=30cb00f0e0f6c2f605ba1ebca41c3282&num=2';
$.getjson(url, function(obj) {
for(var i = 0; i < obj.newslist.length; i += 1) {
// $ 就是 jquary
$('#mm').append(
$('<img>').attr('src', obj.newslist[i].picurl).attr('width', '300')
);
};
});
});
});
</script>
</body>
jquery-ajax代码
1. $.getjson(url, function() {}) // 请求成功执行function函数
2. $.ajax({
'url':'',
'type': '' ,
'data': {
'key': '',
'num': ''
},
'datatype': 'json', //默认为json 也可以使用 xml 其他格式
'success': function(){} //请求成功 进行的函数
'error': function(){} //失拜 执行的函数
})
ajax 加载图片 瀑布式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="mm"></p>
<button id="loadbtn">加载</button>
<script src="js/jquery1.12.min.js"></script>
<script>
$(function() {
$('#loadbtn').on('click', function() {
var url = 'https://api.tianapi.com/meinv/?key=30cb00f0e0f6c2f605ba1ebca41c3282&num=2';
$.getjson(url, function(obj) { // obj 通过url 是得到的 jquery对象数组
for(var i = 0; i < obj.newslist.length; i += 1) {
$('#mm').append(
$('<img>').attr('src', obj.newslist[i].picurl).attr('width', '300')
);
};
});
});
});
</script>
</body>
</html>