jQuery

他是一个javaScript的框架，简化js的开发

优化了html操作（dmo）

原始的操作

<body>
    <div id="div1">div1...</div>
    <div id="div2">div2...</div>
</body>

<script>
    var div1 =  document.getElementById("div1");
    var div2 =  document.getElementById("div2");
    alter(div1.innerHtml)
    alter(div2.innerHtml)
</script>


代码有重复，提取公共的方法，

<body>
    <div id="div1">div1...</div>
    <div id="div2">div2...</div>
</body>

<script>
    var div1 =  $("div1");
    var div2 =  $("div2");
    alter(div1.innerHtml)
    alter(div2.innerHtml)
    
    
</script>

function.js文件

function $(id){
    var obj = Documnet.getElementById(id);
    return obj;
}


javaScript框架：本质就是一些js的文件，知识对其js的原生代码进行封装而已

1.js的快速入门

1.下载JQuery

2.导入JQuery


<script src="../js/vendor/jquery-3.4.1.min.js"></script>


3.使用


let div1 = $("#div1");
alert(div1.html())


2.Jquery和js对象区别转化

jq和js方法不可互相调用

需要进行互相转化

js--->jq $(js对象)

jq--->js

 

3.选择器

筛选具有相似特征的元素（标签） 获取元素对象，进行控制对象

基本语法：

1.事件绑定


<div>
  <input type="button" value="点我" id="btn1">
</div>
<script>
  $("#btn1").click(function () {
      alert("abc")
  })
</script>

2.入口函数

$(function(){

})
 
 
 
 <script>
    $(function () {
        $("#btn1").click(function () {
            alert("abc");
        })
    })
  </script>
 
//方式二 
window.onload = function () {
       $("#btn1").click(function () {
           alert("abc");
       });
   }
 
window.onload 和$(function(){ }) 的区别

3.样式控制

获取对象，调用css方法，

分类

1.基本选择器

1.标签选择器

$("html标签名称") $("div")

2.id选择器

$("#id的属性值")

3.类选择器

$(".class的属性值")

4.并集选择器

$("选择器1，选择器2")

2.层级选择器

1.后代选择器

$("A B") 中间用空格隔开，儿子，孙子都选择

2.子选择器

$("A>B") 不包含孙子辈

3.属性选择器

1.属性名称选择器

$(function () {
        $("dtn1").click(function () {
            $("div[title]").css("backgroundColor","pink")
            //选择div标签中含有title属性的 
        })
    })

2.属性选择器

$(function () {
    $("dtn1").click(function () {
        $("div[title='test']").css("backgroundColor","pink")
        //选择div标签中含有title属性的 ,并且 title的值为test
        $("div[title!='test']").css("backgroundColor","pink")
        $("div[title^='test']").css("backgroundColor","pink")  //开头
        $("div[title$='st']").css("backgroundColor","pink")  //结尾
        $("div[title*='es']").css("backgroundColor","pink")  //包含
        $("div[title='test']").css("backgroundColor","pink")
    })
})

3.复合属性选择器

$(function () {
        $("dtn1").click(function () {
            $("div[id][title*='es']").css("backgroundColor","pink")
            //属性有id，有title 并且title值包含es
        })
    })

4. 过滤选择器

1.首元素选择器

$(function () {
    $("btn1").click(function () {
        $("div:first").css("backgroundColor","pink")
    })
})

//修改div第一个

2.尾元素选择器

$(function () {
    $("btn1").click(function () {
        $("div:last").css("backgroundColor","pink")
    })
})
//修改div 最后一个

3.非元素选择器

$(function () {
    $("btn1").click(function () {
        $("div:not(.one)").css("backgroundColor","pink")
    })
})
//修改div中 class 不是one 的

4.偶数选择器

$(function () {
    $("btn1").click(function () {
        $("div:even").css("backgroundColor","pink")
    })
})
//修改div索引值为偶数的   从0开始

5.奇数选择器

$(function () {
    $("btn1").click(function () {
        $("div:odd").css("backgroundColor","pink")
    })
})
//修改div索引值为奇数的   从0开始

6.大于索引选择器

$(function () {
    $("btn1").click(function () {
        $("div:gt(3)").css("backgroundColor","pink")
    })
})
//div索引大于3

7.等于索引选择器

$(function () {
    $("btn1").click(function () {
        $("div:eq(3)").css("backgroundColor","pink")
    })
})
//div索引等于3

8.小于索引选择器

$(function () {
    $("btn1").click(function () {
        $("div:lt(3)").css("backgroundColor","pink")
    })
})
//div索引小于3

9.标题选择器

$(function () {
    $("btn1").click(function () {
        $(":header").css("backgroundColor","pink")
    })
})
//div索引小于3

 

5.表单过滤选择器

1.可用元素选择器

$(function () {
    $("input").click(function () {
        $("imput[type='text']:enabled").val("aaa");
    });
})
//修改inoput标签中type为text，并且可用的值为  aaa

2.不可用元素选择器

$(function () {
    $("input").click(function () {
        $("imput[type='text']:disabled").val("aaa");
    });
})
//修改inoput标签中type为text，并且不可用的值为  aaa

3.选中选择器

$(function () {
    $("input").click(function () {
      alter( $("imput[type='checkbox']:checked").length) ;
    });
})
//选中的

4.选中选择器（下拉）

$(function () {
    $("input").click(function () {
      alter( $("select>option:selected").length) ;
    });
})
//选中的


4.DOM操作

1.内容操作

1.html( )

获取/设置元素的标签内容

2.text( )

获取/设置元素标签纯文本的内容

3.val( )

获取/设置元素的value属性值


<input id="myinput" type="text" name="username" value="张三" />
  <div id="mydiv">
    <p><a href="#" >标题</a> </p>
  </div>
 </div>

<script>
 $(function () {
      var value = $("#myinput").val();
     
     var html = $("#mydiv").html();
     
     var text = $("#mydiv").text();
  })
    
</script>


2.属性操作

1.通用属性

1. attr（）

获取/设置元素的属性

2.removeAttr（）

删除属性

3.prop（）

获取/设置元素的属性

4.removeProp（）

删除属性

2.对class属性操作

1. addClass（）

添加class

2.removeClass（）

删除calss

3.toggleClass（）

切换class

3.CRUD操作