1.jQuery的extend扩展：
<script src="./jquery-1.12.4.js"></script>
<script>
/* extend()函数用于将一个或多个对象内容合并到目标对象 */
/* $.extedn([deep],target,object1,object2) */
/* deep,可选,是否深度合并对象 默认false*/
/* target object类型，目标对象，其他对象成员属性附加到该对象上 */
/* objct2 需要被合并的对象 */
var object1 = {
apple:0,
banana:{weight:52,price:100},
cherry:97
};
var object2 = {
banana:{price:200},
durian:100
};
/* 默认false，不深度合并对象，banana的值会被object2的值直接覆盖 */
/* console.log( $.extend(object1,object2)); */
/* 把deep改为true，表示深度合并对象 banana的对象的值相同的属性会被覆盖
不相同的仍然保留 */
console.log( $.extend(true,object1,object2))
</script>
jQuery的extend扩展练习：
<script src="./jquery-1.12.4.js"></script>
<script>
/* function fn1(obj,flag){
var object2 = {
banana:{price:200},
durian:100
};
console.log($.extend(flag,obj,object2));
}
fn1(Object,false)
*/
/* 1.把car1进行深度合并，把值打印到控制台上 */
/* 2.把car1进行 不深度合并，把值打印到控制台上 */
var car1 = {
color:{name:'水晶白',price:'1000w'}
}
var car2 = {
carname:'保时捷',
color:{name:'帅库黑'}
}
console.log( $.extend(car1,car2))
/* console.log( $.extend(true,car1,car2)) */
function showCar(obj){
var car1 = {
color:{name:'水晶白',price:'1000w'}
}
$.extend(true,car1,obj)
console.log(car1);
document.write(`汽车的颜色：${car1.color.name}<br>`)
document.write(`汽车的价格：${car1.color.price}`)
}
showCar()
</script>
2.$.fn.extend()扩展一个或多个实例属性和方法：
<body>
<button class="btn1">全选</button>
<!-- <button class="btn2">取消全选</button> -->
<h1>爱好</h1>
睡觉：<input type="checkbox" >
吃：<input type="checkbox">
喝：<input type="checkbox">
<!-- $.fn.extend()函数为jQuery扩展一个或多个实例属性和方法 -->
<script src="./jquery-1.12.4.js"></script>
<script>
/* $.fn是jQuery的原型对象
$.fn.extend()方法用于为jQuery的原型添加新的属性和方法
这些方法可以再jQuery实例对象上调用 */
/* $.fn.extend({
consoleFn:function(){
console.log('我自己给jq打印方法');
}
})
$('body').consoleFn();
$('body').css('background','pink') */
$.fn.extend({
checked1:function(){
/* this 代表jq对象 input元素的集合 */
console.log(this);
this.each(function(i,e){
console.log(i,e);
e.checked = true
})
}
})
$.fn.extend({
checked2:function(){
//this 代表jq对象 input元素的集合
console.log(this);
this.each(function(i,e){
console.log(i,e);
e.checked = false
})
}
})
var flag = true
$('.btn1').click(function(){
if(flag){
$(this).text('取消全选')
$('input').checked1();
flag = false
}else{
$(this).text('全选')
$('input').checked2();
flag = true
}
})
/* $('.btn2').click(function(){
$('input').checked2()
}) */
</script>
</body>
3.jQuery的框架分析：
<style>
.div1 {
background-color: red;
width: 150px;
height: 150px
}
.blue{
background: blue;
}
</style>
</head>
<body>
<div class="div1" ></div><button>点我</button>
<!-- jQuery源码的第一行到最后一行是一个匿名函数 -->
<script src="./3.框架分析.js"></script>
<script>
/* console.log($);
$() */
/* $('.div1', 'background', 'red')
$('.div1', 'width', '200px')
$('.div1', 'height', '200px') */
/* $('.div1').css('background','red')
$('.div1').hide()
$('.div1').addClass('.div1') */
/* $('.div1').addClass('blue') */
$('button').click(function(){
$('.div1').addClass('blue')
})
</script>
</body>
jQuery的js源码：
/* ()括起来的目的是 把()内部的代码解释成一个表达式 */
//JQ框架源代码
(function(){
/* console.log('Hellow 你好'); */
/* var a = '你好 同学'
$ = function $ (){
document.write(a)
} */
function $(element){
let ele = document.querySelector(element)
console.log(ele);
ele.css = function(key,value){
ele.style[key] = value
}
/* 实现show和hide的方法 */
ele.hide = function(){
this.style.display = 'none'
}
ele.show = function(){
this.style.display = 'block'
}
/* 实现jq的removeClass 和 addClass */
ele.removeClass = function(className){
console.log(this.className);
/* let str = this.className.replace(className,'')
console.log(str); */
this.className = this.className.replace(className,'')
}
ele.addClass = function(className){
/* 原生的className会覆盖之前的类名 */
this.className = this.className + ' ' +className
}
ele.click = function(callback){
this.onclick = callback
}
console.log(ele);
return ele
}
/* 思路:$('.div1')返回一个元素对象，元素对象里面有一个css方法 可以传参
改变$('.div1')的样式 */
/* 把局部的方法$ 挂载到window上变成全局的就可以使用了 */
window.$ = $
})()
4.jQuery转原生对象：
<body>
<h1>你真棒</h1>
<script src="./jquery-1.12.4.js"></script>
<script>
/* 原生转JQ对象 */
let h1 = document.querySelector('h1')
console.log($(h1).get[0]);
/* jq对象转原生的方法 */
/* 第一种$(h1)[0] */
/* 使用$(h1).get(0)方法 可以把单个的jq元素转成原生dom对象 */
</script>
</body>
