[JavaScript知识库]js-jQuery-base

1.x 兼容ie678 不更新
2.x 不兼容ie678 不更新
3.x 不兼容ie678 更新

jq 与dom

<script>
    // $(document).ready(function () {
    //     //页面加载完执行
    // })
    $(function () {
        //相当于 原生load
        //$ 顶级对象 jQuery对象的简写
    });

    //获取dom对象
    var div = document.querySelector('div');//原生
    console.log(div);

    //jq获取dom对象  但是获取的是jq包装后的dom对象 是jq对象
    //两者是可以转换的
    var div_jq = $('div');
    console.log(div_jq);

    //jq->dom
    var jqToDom = div_jq[0];//div_jq.get(0);
    console.log(jqToDom);
    //do->dom
    var domToJq = $(div);
    console.log(domToJq);
</script>

选择器

<script>
    console.log('jq 选择器')
    //jq 选择器
    //$('css选择器')//css咋写就咋写 基本一致
    var nav = $('.nav');
    console.log(nav);

    var li = $('ul li');
    console.log(li);

    //隐式迭代
    //把所有匹配的元素内部进行遍历 对每一个元素进行相同操作
    li.css('background','pink');

    //筛选选择器
    console.log($('ul li:first'));
    $('ul li:eq(2)').css('width','30%')
    $('ul li:odd').css('background','blue');//偶数//even 偶数
    //子父兄
    console.log($('.child').parent());
    console.log($('.parent').children('.child'));
    //console.log($('.parent').find('选择器'))查找后代
    //兄弟
    console.log($('.dage').siblings('.child'));//兄弟 不包括自己·
    console.log($('.dage').nextAll());//同辈以后
    console.log($('.dage').prevAll());//同辈以前
    console.log($('.dage').eq(1));//

</script>

• jq-css样式修改：
  注意jq是可读可写的
  3种

<script>
    //css 1
    //var w = $('.css').css('width');//获取宽度
    //$('.css').css('width','300px');//修改宽度 数字可以不带单位 但一定要引号
    //2 对象形式
 /*   $('.css').css({
        width :'300px',
        height:400,
        backgroundColor : 'pink',
    });*/

    //法3 操作类 类名不要加点
    $('div').click(function () {
       // $(this).removeClass('css');
       // $(this).addClass('current');
        //切换类 有就去掉 没就加上
        $(this).toggleClass('current');
    })

</script>

与原生className 的区别 原生是覆盖原类名

• dom 属性操作

<input class="shuxing" index = "cc" value="xxxx" type="text">
<script>
    //获取属性值
    //$('.shuxing').prop('属性名');
    var w = $('.shuxing').prop('type');
    console.log(w);

    //自定义attr
    console.log($('.shuxing').attr('index'));

</script>

• 事件

<button class="btn"></button>
<ul>
    <li></li>
</ul>
<script>
    //事件 单个
    $('.btn').click(function () {
        console.log(233);
    })
    //多个
    $('.btn').on({
        click:function () {

        },
        mousedown:function () {

        },
    })
    //事件委托 触发的是li
    $('ul').on('click','li',function () {

    });

    //事件解绑
    //$('div').off();//解除所有事件
    $('div').off('click');
    $('ul').off('click','li');//解除委托

    //one 只能触发一次$('div').one('click');

    //自动触发事件
    $('div').click()
    $('div').trigger('click');
    $('div').triggerHandler('click');//不会触发元素默认行为

</script>

ajax 另写

基本是原始js的差不多 剩下的查一下官方文档或者https://jquery.cuishifeng.cn/index.html 查就行