Lanms Blog

Javascript常用的命令
Publish: 2019/3/23   

浏览器对象模型-BOM(Browser Object Model)

文档对象模型-DOM(Document Object Model)

语法规范 ECMScripts - 主要使用 ES 5.1 (最新是ES 8)

1.Javascript常用的命令

示例代码可在这篇笔记中查找, 这里是整理过后的一些总结

background: url(img/url.jpg) norepeat -95px -15px;位置

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 (){}) 对选中的div 的每一个执行操作
$("#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()

3.Ajax异步IO技术

代码示例, 原生, 无JQuary

    <body>
        <div id="mm"></div>
        <button id="loadBtn">加载</button>
        <script src="js/jquery1.12.min.js"></script>
        <script>            
            //JavaScript 发送HTTP请求默认只支持同源策略
            $(function() {
                $('#loadBtn').on('click', function() {
                    var url = 'http://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>
        <div id="mm"></div>
        <button id="loadBtn">加载</button>

        <script src="js/jquery1.12.min.js"></script>
        <script>
            $(function() {
                $('#loadBtn').on('click', function() {
                    var url = 'http://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>



← 给Git设置alias别名 Git团队开发流程 →

Powered by Hexo, Theme designs by @hpcslag.
Style-Framework Tocas-UI designs by @yamioldmel