一、jq选择器

二、属性操作

三、jq轮播图

四、样式操作

五、jq动事件

六、jq动画

七、自定义动画

八、jq动画案例

一、jq选择器

- css3语法选择器
```js
$('css3选择器位')
```
- 索引匹配
```js
$('div:eq(0)')
$('div').eq(0)
```
- 内容
```js
$('div:contains(标签文本内容)')
// 注: 采用模糊匹配
```

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq选择器</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<ul class="ul1">
<li class="li l1">ul1 l1</li>
<li class="li l2">ul1 l2</li>
<li class="li l3">ul1 l2</li>
</ul>
<ul class="ul2">
<li class="li l1">ul2 l1</li>
<li class="li l2">ul2 l2</li>
<li class="li l3">ul2 l3</li>
</ul>
</body>
<script>
// console.log($); // 1.采用css3语法
// $('css3选择器')
console.log($('.ul1 .l2').text()); console.log($('.l1 ~ .l2').text()); console.log($('.l1, .l2, .l3').text()); // 2.css3之前jq已有的自身选择器
// 偶数位
// 注: 不加结构时, 将所有li作为考虑整体从上之下进行排序, 查找索引为偶数位的(0,2...)
console.log($('.ul1 .li:even'));
// 奇数位
console.log($('.ul2 .li:odd'));
// 匹配索引 *****
console.log($("ul").eq(0));
// $("ul")页面中的所有ul, 取第n个ul
// -- $("ul")[n] => 得到第n索引位js对象, 本非jq对象
// -- $("ul").eq(n) => 得到第n索引位jq对象
// -- $("ul:eq(n))" => 得到第n索引位jq对象 // 3.通过内容进行匹配
// 内容只有包含l1即可, ul1 l1 | ul1 l2 | ul1 l3 | ul2 l1
console.log($('li:contains(l1)').text()) </script>
</html>

二、属性操作

- 文本
```js
// 赋值: 有参数
$('.box').html('<i>beat box</i>');
// 取值: 无参数
console.log($('.box').text());
// 表单内容
// $('.inp').val("input 内容 为 value");
console.log($('.inp').val());
```
- 属性
```js
// 取
console.log($('img').attr('alt'));
// 设
$('img').attr('src', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1611571505,2177664062&fm=26&gp=0.jpg')
// 增
$('img').attr('abc', function () {
    return "ABC";
})
```
- 类名
```js
$(this).addClass('active'); // 添加
$(this).removeClass('box');  // 删除
// 如果有active 删除, 反之添加
$(this).toggleClass('active');  // 切换
```

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性操作</title>
<script src="js/jquery-3.3.1.js"></script>
<style>
.active {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box"></div>
<input class="inp" type="text" value="12345"> <img src="" alt="提示">
<!--表单元素的布尔类型属性, 不写为false, 书写后,不管值为什么, 均为属性名-->
<!--eg: checked="checked" | checked="" | checked-->
<input class="ck" type="checkbox" checked="false">
</body>
<script>
// 文本内容操作
// html() | text() | val() // 赋值: 有参数
$('.box').html('<i>beat box</i>');
// 取值: 无参数
console.log($('.box').text());
// 表单内容
// $('.inp').val("input 内容 为 value");
console.log($('.inp').val());
</script>
<script>
// 属性操作
console.log($('img').attr('alt'));
$('img').attr('src', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1611571505,2177664062&fm=26&gp=0.jpg')
$('img').attr('abc', function () {
return "ABC";
}) // $('.ck').prop("checked", "true"); // 了解
// $('.ck').attr("checked", "true");
</script>
<script>
$('.box').click(function () {
// $(this).addClass('active'); // 添加
// $(this).removeClass('box'); // 删除 // 如果有active 删除, 反之添加
$(this).toggleClass('active'); // 切换
})
</script>
</html>

三、jq轮播图

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style >
* {
/*不允许选择文本, 网页文本不能负责*/
user-select: none;
}
body, ul {
margin: 0;
padding: 0;
list-style: none;
}
.scroll {
width: 1226px;
height: 460px;
margin: 0 auto;
background-color: orange;
position: relative;
cursor: pointer;
}
.scroll_view {
width: 100%;
height: 100%;
position: relative;
}
.scroll_view li {
background: red;
width: 100%;
height: 100%;
font: normal 100px/460px 'STSong';
text-align: center;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.scroll_view li.active {
opacity: 1;
transition: .5s;
}
.left {
position: absolute;
top: 170px;
left: 0;
background-color: #eee;
font-size: 100px;
}
.left:hover, .right:hover {
cursor: pointer;
background-color: #333;
}
.right {
position: absolute;
top: 170px;
right: 0;
background-color: #eee;
font-size: 100px;
} .scroll_tag {
position: absolute;
right: 10px;
bottom: 10px;
}
.scroll_tag li {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #333;
border: 3px solid #ddd;
float: left;
margin: 0 10px;
}
.scroll_tag li.active {
background-color: #ccc;
border: 3px solid #333;
}
</style>
</head>
<body>
<div class="scroll">
<ul class="scroll_view">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="scroll_toggle">
<li class="left">&lt;</li>
<li class="right">&gt;</li>
</ul>
<ul class="scroll_tag">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
// 页面文档树加载完毕回调
$(function () {
var page_index = 0;
var length = $('.scroll_view li').length;
var toggle_time = 1000;
var timer = 0; // 无限轮播
timer = setInterval(toggleRole, toggle_time, 1); // 悬浮停止,移走轮播
$('.scroll').mouseenter(function () { // 悬浮停止
clearInterval(timer);
}).mouseleave(function () { // 移走轮播
timer = setInterval(toggleRole, toggle_time, 1);
}); // 右轮播
$('.right').click(function () {
toggleRole(1);
});
// 左轮播
$('.left').click(function () {
toggleRole(-1);
});
// 切换依据
function toggleRole(role_num) {
page_index += role_num;
// role_num:1向右切换, role_num:-1向左切换
if (role_num > 0) {
if (page_index >= length) { // 右切换临界点
page_index = 0;
}
} else {
if (page_index < 0) { // 左切换临界点
page_index = length - 1;
}
}
toggleState(page_index);
}
// 切换状态
function toggleState(index) {
$('.scroll_view li').removeClass('active').eq(index).addClass('active');
$('.scroll_tag li').removeClass('active').eq(index).addClass('active');
}
})
</script>
</html>

四、样式操作

```js
// 取值
console.log($('.box').css('font-size'));
// 设值
$('.box').css('color', 'deeppink')  // 单一属性设值
    .css({  // 设置多个属性值
        // 1.就是给css()函数赋值一个js对象
        // 2.key为字符串类型,可以省略"",前提要使用js语法,小驼峰命名法
        // 2.属性值为数值+单位方式,可以省略单位, 尽量全部用字符串数据赋值
        width: '300px',
        'height': 300,
        'background-color': 'cyan',
        borderRadius: '30px'
    })
    .css('width', function(index, oldWidth) {  // 逻辑单一属性设值
        if (index == 0) {
            // 延迟1s
            // var b_time = new Date().getTime();
            // while (new Date().getTime() - b_time < 1000){}
            return 1.5 * parseInt(oldWidth);
        }
        return oldWidth;
    })
```

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式操作</title>
<script src="js/jquery-3.3.1.js"></script>
<style>
.box {
font-size: 100px;
}
</style>
</head>
<body>
<div class="box">12345</div>
<div class="box">67890</div>
</body>
<script>
// 取值
console.log($('.box').css('font-size')); // 设值
$('.box').css('color', 'deeppink')
.css({
// 1.就是给css()函数赋值一个js对象
// 2.key为字符串类型,可以省略"",前提要使用js语法,小驼峰命名法
// 2.属性值为数值+单位方式,可以省略单位, 尽量全部用字符串数据赋值
width: '300px',
'height': 300,
'background-color': 'cyan',
borderRadius: '30px'
})
.css('width', function(index, oldWidth) {
if (index == 0) {
// 延迟1s
// var b_time = new Date().getTime();
// while (new Date().getTime() - b_time < 1000){}
return 1.5 * parseInt(oldWidth);
}
return oldWidth;
}) </script>
</html>```js
// 取值
console.log($('.box').css('font-size')); // 设值
$('.box').css('color', 'deeppink') // 单一属性设值
.css({ // 设置多个属性值
// 1.就是给css()函数赋值一个js对象
// 2.key为字符串类型,可以省略"",前提要使用js语法,小驼峰命名法
// 2.属性值为数值+单位方式,可以省略单位, 尽量全部用字符串数据赋值
width: '300px',
'height': 300,
'background-color': 'cyan',
borderRadius: '30px'
})
.css('width', function(index, oldWidth) { // 逻辑单一属性设值
if (index == 0) {
// 延迟1s
// var b_time = new Date().getTime();
// while (new Date().getTime() - b_time <){}
return 1.5 * parseInt(oldWidth);
}
return oldWidth;
})
```

五、jq动事件

- 绑定方式
```js
// 第一种 on
// 四个参数: 事件名, 委派的子级, {key-value传入的数据}, 事件回调函数
$('.box').on('click', 'span', {name: 'hehe'}, function(ev){})
// 第二种
// 两个参数: {key-value传入的数据}, 事件回调函数
$('.box').click({name: 'hehe'}, function(ev){})
```
- 事件对象
```js
// 为jq事件对象, 兼容js事件对象
// 坐标: ev.clientX | ev.clientY
// 按键: ev.keyCode
// 数据: ev.data.key名  =>  eg:ev.data.name
```
- 冒泡与默认动作
```js
// 冒泡: ev.stopPropagation();
// 默认动作: ev.preventDefault();
```
- 委派
```js
$('.box').on('click', 'span', {name: 'hehe'}, function(ev){})
// 注: 通过父级box来绑定点击事件,其实将事件委派给其子级span标签
```

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq事件</title>
<style>
.box, .ele, .sub {
width: 100px;
height: 100px;
background-color: orange;
}
.sup {
width: 200px;
height: 200px;
background-color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="box">box</div> <a href="https://www.baidu.com">别动</a> <div class="ele">ele</div> <div class="sup">
<div class="sub"></div>
<span>123</span>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
/*
// 1.事件的绑定语法
$('.box').on('click', function () {
console.log('你丫点我了!!!')
});
$('.box').click(function () {
console.log('你丫又点我了!!!')
}); // 2.事件对象
$(document).click(function (ev) {
console.log("父级点击了");
// jq事件对象, 兼容js事件对象
console.log(ev);
// 鼠标点
console.log(ev.clientX, ev.clientY);
});
$(document).keydown(function (ev) {
// jq事件对象, 兼容js事件对象
console.log(ev);
// 鼠标点
console.log(ev.keyCode);
}); // 3.冒泡与默认动作
$('a').click(function (ev) {
console.log("默认动作取消了");
// 取消默认动作1
ev.preventDefault();
// 取消默认动作2
// return false;
})
$('.ele').click(function (ev) {
// ev.cancelBubble = true; // 未兼容
// 阻止冒泡
ev.stopPropagation();
console.log("子级点击了");
})
*/
</script>
<script>
var name = "张三"; /*
$('.sub').click();
$('.sub').on('click', {name: name, age: 8}, function (ev) {
ev.stopPropagation();
console.log(ev);
console.log(">>>", ev.data.name)
});
*/ // 将sup的点击事件委派给自己的span子级
$('.sup').on('click', 'span', {}, function (ev) {
// ev.stopPropagation();
console.log("==================");
});
$('.sup').on('click', {}, function (ev) {
// ev.stopPropagation();
console.log("++++++++++++++++");
}) </script>
</html>

六、jq动画

- 系统预定义
```js
// time_num: 动画持续的时间
// finish_fn: 动画结束后的回调函数
// 1. hide(time_num, finish_fn) | show(time_num, finish_fn) | toggle(time_num, finish_fn)
// 2. slideUp() | slideDown() | slideToggle()  参数同上
// 3.fadeOut() | fadeIn() | fadeTo() | fadeToggle()    参数同上
```

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq动画</title>
<style>
.ele {
width: 100px;
height: 100px;
background-color: orange;
margin-top: 10px;
}
</style>
</head>
<body>
<button class="b1">消失</button>
<button class="b2">显示</button>
<button class="b3">切换</button>
<div class="ele e1"></div>
<hr>
<button class="b4">消失</button>
<button class="b5">显示</button>
<button class="b6">切换</button>
<div class="ele e2"></div>
<hr>
<button class="b7">消失</button>
<button class="b8">显示</button>
<button class="b9">切换</button>
<div class="ele e3"></div>
<div class="ele e4"></div>
<div class="ele e5"></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$('.b1').click(function () {
$('.e1').hide(500, function () {
console.log("动画结束了, 你可以再干一些事")
});
});
$('.b2').click(function () {
$('.e1').show(500, function () {
console.log("动画结束了, 你可以再干一些事")
});
})
$('.b3').click(function () {
$('.e1').toggle(500, function () {
console.log("动画结束了, 你可以再干一些事")
});
})
</script>
<script>
$('.b4').click(function () {
$('.e2').slideUp(500, function () {
console.log("动画结束了, 你可以再干一些事")
});
});
$('.b5').click(function () {
$('.e2').slideDown(500, function () {
console.log("动画结束了, 你可以再干一些事")
});
})
$('.b6').click(function () {
$('.e2').slideToggle(500, function () {
console.log("动画结束了, 你可以再干一些事")
});
})
</script> <script>
$('.b7').click(function () {
$('.e3, .e4, .e5').fadeOut(500, function () {
console.log("动画结束了, 你可以再干一些事")
});
});
$('.b8').click(function () {
$('.e2 ~ .ele').fadeIn(500, function () {
console.log("动画结束了, 你可以再干一些事")
});
})
$('.b9').click(function () {
$('.e3, .e4, .e5').fadeToggle(500, function () {
console.log("动画结束了, 你可以再干一些事")
});
})
</script>
</html>

七、自定义动画

- 自定义动画
```js
// 参数: 做动画的样式们 {}, 动画持续时间, 运动曲线, 动画结束后的回调函数
animate({
    width: 300,
    height: 500
}, 300, 'linear', function() {
    // 动画结束后回调
})
// 动画本体采用的是css动画
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义动画</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: orange;
}
</style>
</head>
<body>
<button class="btn">消失</button>
<button class="btn">显示</button>
<div class="box"></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$('.btn').eq(0).on('click', function () {
$('.box').animate({
width: 0
}, 1000, 'linear', function () {
console.log("动画结束了!!!")
})
});
$('.btn').eq(1).on('click', function () {
$('.box').animate({
width: 300
}, 'slow', 'swing', function () {
console.log("动画结束了!!!")
})
}) </script>
</html>

八、jq动画案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq动画案例</title>
<style>
.wrap {
width: 600px;
height: 200px;
border: 5px solid black;
margin: 0 auto;
position: relative;
overflow: hidden;
/*overflow: auto;*/
}
.btn {
text-align: center;
margin-top: 50px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.scroll {
width: 2000px;
position: absolute;
}
.scroll li {
width: 200px;
height: 200px;
font: 500 50px/200px 'STSong';
text-align: center;
background-color: yellow;
float: left;
}
.scroll li:nth-child(2n) {
background-color: pink;
}
</style>
</head>
<body>
<div class="btn">
<button class="btn1">&lt;</button>
<button class="btn2">&gt;</button>
</div>
<div class="wrap">
<ul class="scroll">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<!--
<script>
// 滚动条滚动(overflow)产生的距离
// console.log($('.wrap').scrollLeft()); // 和绝对定位匹配使用
// console.log($('.scroll').position().left); // 和固定定位匹配使用
// console.log($('.scroll').offset()); // 滚动scroll的总长度
var scroll_total = $('.scroll').width();
// 显示的总宽度,也就是一次性最大滚动的长度
var wrap_width = $('.wrap').width();
$('.btn1').click(function () {
// 往左已滚动的长度, 是负值
var scroll_left = $('.scroll').position().left;
// 剩余的可滚动的长度: 总长抛出显示的一个平面长度,再减去已经滚动到左侧的长度
// 注scroll_left是负值,使用用+运算
var less_long = scroll_total - wrap_width + scroll_left;
// 通过剩余的可滚动长度计算出下一次能滚动的长度
var next_scroll = less_long > wrap_width ? wrap_width : less_long;
// 动画: left为从当前已滚动的长度(scroll_left)再滚动(减去)下一次可滚动的长度
$('.scroll').animate({
left: scroll_left - next_scroll
})
}); $('.btn2').click(function () {
// 往左已滚动的长度, 是负值
var scroll_left = $('.scroll').position().left;
// 往右剩余的可滚动的长度
var less_long = -scroll_left;
// 通过剩余的可滚动长度计算出下一次能滚动的长度
var next_scroll = less_long > wrap_width ? wrap_width : less_long;
$('.scroll').animate({
left: scroll_left + next_scroll
})
})
</script>
--> <script>
// 不能被点击
var disable_click = false; $('.btn1').click(function () {
if (!disable_click) { // 能被点击时
disable_click = true; // 动画过程中, 应该不能再被点击
$('.wrap').animate({
scrollLeft: $('.wrap').scrollLeft() + 600
}, 300, function () {
disable_click = false; // 动画结束后,可以重新被点击
})
}
});
$('.btn2').click(function () {
if (!disable_click) {
disable_click = true;
$('.wrap').animate({
scrollLeft: $('.wrap').scrollLeft() - 600
}, 300, function () {
disable_click = false;
})
}
})
</script> </html>

web开发:jquery高级的更多相关文章

  1. 静态Web开发 JQuery

    伍章 JQuery 1节介绍JQuery和顶级对象 <<锋利的JQuery>>JQuery官网: http://jquery.com (下载jquery工具)JQuery在线A ...

  2. Web开发——jQuery基础

    参考: 参考W3School:jQuery 教程 参考:jQuery 参考手册 参考(常用):jQuery API 测试 JavaScript 框架库 - jQuery 测试 JavaScript 框 ...

  3. Web开发——jQuery进阶

    参考: 参考:http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html 参考:Asynchronous J ...

  4. Web 开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十七】

    <Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  5. 值得 Web 开发人员学习的20个 jQuery 实例教程

    这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...

  6. Web 开发人员不能错过的 jQuery 教程和案例

    jQuery 把惊喜延续到设计领域,处处带来极大的灵活性,创造了许多体验良好的设计,而且拥有不错的性能.这里分享一组 Web 开发人员不能错过的 jQuery 教程和案例,帮助你更好的掌握 jQuer ...

  7. 对于 Web 开发很有用的 jQuery 效果制作教程

    如果你的项目中需要响应式滑块,炫丽的图片呈现,对话框提示,轻巧动画等效果,jQuery 是完美的解决方案.凭借这个快速,易用的 JavaScript 库,可以轻松处理语言之间的交互,它给人最快速的 W ...

  8. Web 开发最有用的50款 jQuery 插件集锦——《综合篇》

    这篇文章是<Web 开发最有用的50款 jQuery 插件集锦>系列的最后一篇,整个系列向大家分享了在网站开发中非常有帮助的 50 款 jQuery 插件,这些插件按用途主要有以下类别:网 ...

  9. Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》

    <Web 开发最有用的50款 jQuery 插件集锦>系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插 ...

  10. [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

随机推荐

  1. Spring Boot自定义Mapper的SQL语句

    代码如下: 先创建一个Provider类: public class RptEbankFsymtTranflowingProvider { public String select(String or ...

  2. STM32命名规则解析

  3. GCE 部署 ELK 7.1可视化分析 nginx

    目录 一.准备 1.1.服务器环境准备 二.安装 ES 2.1.遇到小问题 三.安装 Kibana 四.安装 Logstash 一.准备 我这边有一个网站放在了 Google VM 上面,所以打算在购 ...

  4. Python3 Selenium自动化web测试 ==> 第一节 起始点之Python单元测试框架 unittest

    前置步骤 Python版本:3.6.4 selenium版本:3.11.0 >>> import selenium >>> help(selenium) IDE:P ...

  5. 用Python给你的代码上个进度条吧 | 【代码也要面子的】

    微信公众号:AI算法与图像处理如果你觉得对你有帮助,欢迎关注.转发以及点赞哦-( ̄▽ ̄-)~ 前言 最近在跑一些代码的时候,很烦...因为有时候不知道这段程序什么时候能执行完,现在执行哪里了,如果报错 ...

  6. brew update慢,brew install慢如何解决?

    主要是资源访问太慢造成的,替换默认源镜像就行. brew使用国内镜像源 这里用中科大的,另外还有清华的可用     1 2 3 4 5 6 7 8 9 10 # 步骤一 cd "$(brew ...

  7. icell更改用户管理员

    管理员页面是http://127.0.0.1:8080/PORTAL/tsysLoginController/admin超级管理员是http://127.0.0.1:8080/PORTAL/tsysL ...

  8. Linux 下安装 redis5.0

    1.redis 安装 wget http://download.redis.io/rele... tar -zxvf redis-5.0.5.tar.gz cd redis-5.0.5.tar.gz ...

  9. 最新精仿Chinaz中国站长网整站源码带全部数据带采集功能

    用范围: 站长网源码演示地址:php源码运行环境:  phpChinaz站长网对于广大站长来说,是不会陌生的,现在几乎成为了每个站长都必须上的网站了.这次分享的是Chinaz站长网的源码,包含了chi ...

  10. 第十章 ZYNQ-MIZ701 DDR3 PS读写操作方案

      本编文章的目的主要用简明的方法在纯PS里对DDR3进行读写. 本文所使用的开发板是Miz701 PC 开发环境版本:Vivado 2015.4 Xilinx SDK 2015.4 10.0本章难度 ...