JQ第二天

作者: knot98 | 来源:发表于2018-10-23 15:42 被阅读0次

jq初始,选择器,事件,内容操作,样式操作
JQ第二天
JQ原理
JQ处理单选框radio（获取值改变值修改样式）
仿写JQ方法
前端
非常有用二
JQuery&bootstrap
shell学习
shell 下处理json工具jq安装

JQ高级

一、选择器

1、css语法匹配

   标签   |     类    |     id    |       交集
$('div') | $('.div') | $('#div') | $('div#div.div')

群组 | 后代 | 兄弟
伪类 | 属性

2、索引匹配

:eq(index) | :gt(index) | :lt(index)

二、文本、属性与类

1、文本

html([val|fn])     // HTML文本
text([val|fn])     // 普通文本 
val([val|fn|arr])  // 表单值

2、属性

attr(name|pro|key,val|fn)  // 获取属性，添加属性
removeAttr(name)           // 删除属性
prop(n|p|k,v|f)            // 
removeProp(name)           //

3、类

addClass(class|fn)         // 添加一个新类名
removeClass([class|fn])    // 删除指定类名
toggleClass(class|fn[,sw]) // 切换类名

三、事件

1、on绑定

$('.box').on('click', {num: 10}, function(ev) {
    console.log(ev.data.num)
})
// 数据由ev.data存储

2、非on事件

$('.box').click({num: 10}, function(ev) {
    console.log(ev.data.num)
})
// 数据由ev.data存储

3、解绑

$('.box').off()

四、文档操作

1、内部插入

append(content|fn)  // 添加
appendTo(content)
prepend(content|fn)
prependTo(content)

2、外部插入

after(content|fn)
before(content|fn)
insertAfter(content)
insertBefore(content)

3、包裹

wrap(html|ele|fn)
unwrap()
wrapAll(html|ele)
wrapInner(html|ele|fn)

4、替换

replaceWith(content|fn)
replaceAll(selector)

5、删除

empty()
remove([expr])
detach([expr])

6、复制

clone([Even[,deepEven]])

五、动画

1、基本

show([s,[e],[fn]])    // 显示
hide([s,[e],[fn]])    // 隐藏
toggle([s],[e],[fn])  // 切换（显隐）
// 参数(动画快慢 , 运动曲线 ， 每次动画结束后的回调函数)

2、滑动

slideDown([s],[e],[fn])    // 
slideUp([s,[e],[fn]])      // 
slideToggle([s],[e],[fn])  // 滑动显隐
// 参数(动画快慢 , 运动曲线 ， 每次动画结束后的回调函数)

3、淡入淡出

fadeIn([s],[e],[fn])      // 
fadeOut([s],[e],[fn])     // 
fadeTo([[s],o,[e],[fn]])  // 
fadeToggle([s,[e],[fn]])  // 淡入淡出显隐
// 参数(动画快慢 , 运动曲线 ， 每次动画结束后的回调函数)

4、自定义

animate(p,[s],[e],[fn])   //

六、结构关系

children([expr])   // 所有子级
parent([expr])     // 父级
parents([expr])    // 所有父级
next([expr])       // 下一个兄弟
nextAll([expr])    // 下面的兄弟
prev([expr])       // 上一个兄弟
prevAll([expr])    // 上面的兄弟
siblings([expr])   // 兄弟们

JQ高级纯代码部分

一、JQ选择器

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jq选择器</title>
    <style type="text/css">
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            width: 150px;
            background-color: orange;
        }
        ul:after {
            content: "";
            display: block;
            clear: both;
        }
        li {
            width: 50px;
            height: 50px;
            background-color: red;
            border-radius: 50%;
            float: left;
        }
    </style>
</head>
<body>
    <ul class="ul">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    // console.log($);

    // 获取页面所有的li
    // 1.css语法匹配
    // var $lis = $('li');
    // var $lis = $('ul li');
    var $lis = $('.ul>li');
    console.log($lis);

    // 整体操作
    // i) 操作样式
    $lis.css({
        'background-color': 'cyan'
    })
    // ii) 事件
    $lis.on('click', function () {
        var index = $(this).index();
        console.log(index);
        var width = $(this).width();
        console.log(width);
    })


    // 获取最中间一列
    $('li:nth-child(3n-1)').on('click', function () {
        console.log("中间列");
    })
    // 可以绑定多个事件

    // 最后一排
    // 2.索引匹配
    $('li:gt(5)').on('click', function () {
        console.log("最后一4排");
    })

    // 对角线
    // $('li:even').on('click', function () {
    //  console.log("对角线");
    // })

    $('li:not(:nth-child(2n))').on('click', function () {
        console.log("对角线");
    })

</script>
</html>

二、文本属性类相关操作

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文本属性类相关操作</title>
    <style type="text/css">
        div {
            background-color: red;
        }
        /*jq内部已经操作*/
        /*[hidden] {
            display: none;
        }*/
        div.active {
            background-color: cyan!important;
        }
    </style>
</head>
<body hidden>
    <div class="div">12345</div>
    <input type="text">
    <a href="">前往百度</a>
</body>
<script src="js/jquery-3.3.1.js"></script>
<!-- 内容 -->
<script type="text/javascript">
$(function () {
    var $div = $('div');
    console.log($div);

    // text操作
    console.log($div.text());  // 无参就是获取原有的文本
    // $div.text('上山打老虎');  // 有参就是对文本的修改

    // 追加文本
    // 1.
    // $div.text($div.text() + '上山打老虎');
    // 2.
    $div.text(function (index, old) {
        var target = '上山打老虎';
        return old + target;
    })

    // html操作
    $div.html("<b>天下第一衰,转运!!!</b>");

    // val操作
    $('input').val("霉运");
    // 失去焦点事件
    $(':input').on('blur', function () {
        console.log($(this).val());
    })
})
</script>

<!-- 样式 -->
<script type="text/javascript">
$(function () {
    // 赋值: 链式赋值
    $('div').css("width", "200px").css("height", "200px");
    // 取值: 行间式 | 计算后样式
    console.log($('div').css("width"));
    console.log($('div').css("background-color"));

    // 对象赋值
    $('div').css({
        width: 300,  // 默认添加单位
        height: "300px",
        "background-color": "pink",  // key为css连接语法,js不支持这样的标识符,用字符串形式表示
        borderRadius: '50%'  // 小驼峰命名
    })
    $('div').css({
        width: "300px",
        height: "300px",
        backgroundColor: "pink",
        borderRadius: '50%'
    })

    // 回调函数形式
})
</script>

<!-- 属性 -->
<script type="text/javascript">
$(function () {
    // 解决jq加载过程中,页面出现样式变化导致的闪烁问题
    $('body').removeAttr('hidden');

    $('a').attr("href", "https://www.baidu.com");
})
</script>

<!-- 类 -->
<script type="text/javascript">
$(function () {
    $('div').on("mouseover", function () {
        console.log(123);
        $(this).addClass("active");  // 追加一个新类名
    })
    $('div').on("mouseout", function () {
        $(this).removeClass("active");  // 删除指定类名
    })

    $('div').on("click", function () {
        $(this).toggleClass("active");  // 切换类名
    })
})
</script>

</html>

三、事件

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style type="text/css">
        .div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="div"></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
    var a = 10;

    var $div = $('.div');
    // on事件: on(事件名, {key:value}参数, 回调函数)
    $div.on('click', {num: a}, function (ev) {
        // jq事件对象
        console.log(ev);
        // 参数的获取
        console.log(ev.data.num)
        // 鼠标点击点
        console.log(ev.clientX, ev.clientY);
    })
    // 再绑定一个点击事件
    $div.click({num: a}, function (ev) {
        console.log(ev.data.num * 2)
    })

    // 非on事件: 事件名({key:value}参数, 回调函数)
    $(document).keydown(function (ev) {
        // jq事件对象
        console.log(ev);
        // 点击键
        console.log(ev.keyCode);
    })

    // 事件的解绑
    $div.off()  // 解绑所有

})
</script>
<script type="text/javascript">
$(function () {
    // 冒泡
    $('div').on('click', function (ev) {
        console.log(ev);
        // 组织冒泡
        ev.stopPropagation();
        console.log('div click');
    })
    $('body').on('click', function () {
        console.log('body click');
    })

    $('div').on('contextmenu', function (ev) {
        // 取消默认事件
        ev.preventDefault();
        // return false;
    })
})
</script>
</html>

四、文档操作

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文档操作</title>
    <style type="text/css">
        .div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    
</body>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
    // 1.创建
    var $div = $("<div></div>");
    // 2.设置
    $div.addClass("div");
    $div.on('click', function () {
        console.log('div click');
    })
    // 3.添加
    // $('body').append($div);
    $div.appendTo($('body'));
})
</script>
</html>

五、动画

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button class="b1">隐藏</button>
    <button class="b2">显示</button>
    <button class="b3">显隐</button>
    <button class="b4">slide显隐</button>
    <button class="b5">fade显隐</button>
    <div class="box"></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $('.b1').on('click', function () {
        $('.box').hide()
    })
    $('.b2').on('click', function () {
        $('.box').show()
    })
    $('.b3').on('click', function () {
        $('.box').toggle()
    })
    $('.b4').on('click', function () {
        $('.box').slideToggle()
    })
    $('.b5').on('click', function () {
        $('.box').fadeToggle(1000, "linear", function () {
            console.log("动画完成");
        })
        // 参数: 时间, 运动曲线, 动画结束后的回调函数
    })
</script>
</html>

jq初始,选择器,事件,内容操作,样式操作
jq初始 jq选择器 jq事件 jq内容操作 jq样式操作
JQ第二天
JQ高级一、选择器 1、css语法匹配 2、索引匹配二、文本、属性与类 1、文本 2、属性 3、类三、事件 ...
JQ原理
jq的基本结构 jq入口函数分析常用的jq方法 JQ 工具方法
JQ处理单选框radio（获取值改变值修改样式）
1、JQ获取radio的值//HTML //JQ 2、JQ获取radio的选中状态 3、JQ改变radio的选中状...
仿写JQ方法
原生js仿写jq 仿写jq的click方法仿写jq的on事件仿写jq的eq方法仿写jq的 css方法仿写j...
前端
1.JQ动画 2.JQ循环
非常有用二
1.jQuery 插件库[http://www.jq22.com/jq4-jq1] Look for less ,...
JQuery&bootstrap
内容回顾 jQuery的书写步骤引入JQ的包（xxx.js）书写JQ代码$(function(){ JQ代码...
shell学习
1>jq内建函数输出所有的keys 语法： jq keys 例如：cat json_raw.txt | jq ...
shell 下处理json工具jq安装
1.下载jq地址为https://stedolan.github.io/jq/download/ 2.选择jq 1...