jQuery选项卡效果
<body>
<div>我是div的原始内容
<span>我是span</span>
</div>
<input type="text">
<button>点击</button>
<script src="./jquery.min.js"></script>
<script>
// 操作的是标签的内容
// 1, $().html() 获取或者设定标签内容
// 没有参数是获取标签内容
// 有参数是设定标签内容
// 支持标签,可以获取标签,也可以设定标签
// 设定内容,是全覆盖,之前的内容都会被覆盖
// 等同于 innerHTML()
// 获取
console.log($('div').html());
// 设定 支持设定标签
// $('div').html('<a href="https://www.baidu.com">百度</a>');
// 2, $().text() 获取或者设定标签内容
// 没有参数是获取标签内容
// 有参数是设定标签内容
// 不支持标签,只能获取标签的文本内容
// 设定内容,是全覆盖,之前的内容都会被覆盖
// 等同于 innerText()
// 获取
console.log($('div').text());
// 设定 不支持设定标签
$('div').text('<a href="https://www.baidu.com">百度</a>');
// 3, $().val() 等同于 JavaScript中的 标签对象.value
// 获取标签的value()属性值
$('button').click(function(){
console.log($('input').val());
})
// 总结
// 1, $().html 等于 js的 innerHTML
// 2, $().text 等于 js的 innerText
// 3, $().val() 等于 js的 标签.value
// 4, 特别注意: 标签的布尔属性,使用 prop() 来获取属性值
</script>
</body>
全选全部不选取消
<body>
<button name="all">全选</button><br>
<button name="no">全取消</button><br>
<button name="not">反选</button><br>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<script src="./jquery.min.js"></script>
<script>
// 操作布尔值,必须使用prop()
// 1,全选效果
// 给所有的input标签, checked 布尔属性,属性值设定为 true
// jQuery中有隐式迭代,默认是给所有的标签都设定
// 给全选button标签添加点击事件 --- 选中 checked 为 true
$('[name="all"]').click(function(){
// jQuery中有隐式迭代,会给所有的伪数组中的标签,进行设定
$('input').prop('checked' , true);
})
// 2,取消效果
// 给所有的input标签, checked 布尔属性,属性值设定为 false
// jQuery中有隐式迭代,默认是给所有的标签都设定
// 给全选button标签添加点击事件 --- 取消 checked 为 false
$('[name="no"]').click(function(){
// jQuery中有隐式迭代,会给所有的伪数组中的标签,进行设定
$('input').prop('checked' , false);
})
// 3,反选效果
// 所谓的反选,就是当前是true,取反,设定为false
// 当期是false,取反,设定为true
// 隐式迭代,获取属性,只能获取第一个
// 必须要循环遍历 jQuery中 循环遍历 是 each(function(){})
// 只有两个参数,参数1是索引,参数2是标签对象
// 参数2,的标签对象,是JavaScript语法的形式,必须要转化为jQuery的语法形式
$('[name="not"]').click(function(){
// jQuery中有隐式迭代,会给所有的伪数组中的标签,进行设定
$('input').each(function(key,item){
// 设定 item也就是标签的 checked属性值
// 是当前属性值取反
// item.prop('checked') 就是标签当前的 checked属性值
// !(item.prop('checked')) 当前 checked属性值 取反
// item.prop('checked' , 属性值 )
// 属性值,就是 当前值 取反
$(item).prop('checked' , !$(item).prop('checked') )
})
})
// 总结
// 1, 布尔类型属性的设定,必须要使用prop(),不能使用 attr()
// 2, 隐式迭代,可以自动给所有的伪数组中的标签,添加设定,样式属性等
// 3, 隐式迭代,只能获取第一个标签的属性或者样式
// 要获取所有标签的样式属性等,必须使用循环遍历
// 4, $().each(function(key,item){})
// 循环遍历,只有2个参数
// 参数1:标签的索引下标
// 参数2:标签的对象
// 是JavaScript语法形式 要 $(item) 转化为 jQuery 的标签对象
// 5, 代码没有对错,只要能实现,都是好代码
</script>
</body>
jQuery之css样式操作
<style>
div{
width: 100px;
height: 100px;
background: pink;
border:3px solid #000;
color: blue;
font-size: 20px;
}
</style>
<body>
<div style="color: red;">我是div</div>
<script src="./jquery.min.js"></script>
<script>
// CSS的样式操作
// JavaScript中,通过 标签.style.属性 = 属性值 来设定行内样式
// 标签.style.属性 只能获取行内样式
// window.getComputedStyle(标签).属性 获取执行样式
// 在js中 font-size 要写成 fontSize ,因为js不支持 - 减号
// jQuery中, 通过 $().css() 来设定和获取样式
// 获取样式 $().css(属性)
// 获取的是执行样式
// 带减号的样式 font-size 就写成 font-size 或者 fontSize 都行,但是要注意大小写
// 注意,获取到的样式,都是带有 px单位的,要获取数值,需要通过parseInt,获取整数部分
// 获取样式 $().css('属性')
// 获取到的是执行样式
//
// 行内样式可以获取
console.log( $('div').css('color') );
// 非行内样式
console.log( $('div').css('border') );
console.log( $('div').css('width') );
// 带 -减号的属性,写成 驼峰命名法也行,直接写属性也行
console.log( $('div').css('fontSize') );
console.log( $('div').css('font-size') );
// 设定样式,有两种形式
// 形式1, $().css(属性,属性值)
// 只能定义单一属性
// 设定随机颜色 -- js语法
let color = `rgb(${parseInt(Math.random()*256)} , ${parseInt(Math.random()*256)} , ${parseInt(Math.random()*256)})`;
// 将随机颜色,设定为div 的背景颜色
// 这里的 color 是变量,不要加引号
// 因为是变量,也不需要用 $() 转化
// 还有标签对象,要用 $() 转化
// $('div').css('background' , color);
// 形式2,参数是一个对象,通过对象来设定样式
// 对象的属性和属性值就是css样式的属性和属性值
$('div').css({
background : color,
width : '200px' ,
height : '200px' ,
});
</script>
</body>
jQuery事件绑定
<body>
<div>我是div</div>
<script src="./jquery.min.js"></script>
<script>
// jQuery的事件绑定分为两种语法形式
// 语法形式1,就是想click这样,可以直接定义的事件类型
// 这些都可以 通过 console.dir( $(标签对象) )的方式来查看
// console.dir($('div')); 在 __proto__ 中查看
// 语法形式: $(标签对象).事件类型(function(){})
// 语法形式2,通过 on方法,给标签绑定事件
// 语法形式: $(标签对象).on( 事件类型 , 事件处理函数 )
// $('div').on( 'click' , function(){
// console.log(123);
// } )
// 同一个标签,可以通过链式编程,绑定更多的事件类型
// 通过链式编程,一个标签绑定多个事件
// $(标签).on(类型,函数).on(类型,函数).on(类型,函数)....
$('div').on( 'click' , function(){
console.log(123);
} ).on('mouseover' , function(){
console.log('移入')
}).on('mouseout' , function(){
console.log('移出')
})
</script>
</body>
jQuery事件绑定与删除
<div>我是div</div>
<script src="./jquery.min.js"></script>
<script>
// 相同事件类型,绑定多个事件
// on语法是 addEventListener 形式
// 允许同一个标签,相同的事件类型,绑定多个事件处理函数
// 此处是绑定事件,是赋值绑定,函数的名称
// 不是执行函数,如果有()就是是执行函数,不是赋值函数的名称
// 只有赋值函数的名称,才能删除函数 与js的原理是相同
const oDiv = document.querySelector('div');
// js中,通过 addEventListener 绑定的是函数名称
// oDiv.addEventListener('click' , fun1);
// oDiv.addEventListener('click' , fun2);
// oDiv.addEventListener('click' , fun3);
// 绑定的是函数名称,删除的也是函数名称
// oDiv.removeEventListener('click' , fun3);
// 有自定义函数和绑定的函数名称
$('div').on('click' , function(){
console.log('自己写的函数')
}).on('click' , fun1).on('click' , fun2).on('click' , fun3)
// 删除只能删除函数名称
// 通过函数名称,找到其中存储的函数地址,删除函数地址
$('div').off('click' , fun3);
function fun1(){
console.log(11111);
}
function fun2(){
console.log(22222);
}
function fun3(){
console.log(33333);
}
</script>
事件绑定其他样式
<button name="h">随机高度</button>
<button name="w">随机宽度</button>
<button name="c">随机背景颜色</button>
<div></div>
<script src="./jquery.min.js"></script>
<script>
// 点击button按钮,给标签,设定随机颜色宽度高度等
$('[name="h"]').on('click' , function(){
// 随便写着玩的宽度,是100-400之间
let randomH = parseInt(Math.random()*(400+1-100)+100);
// 定义div标签的样式
$('div').css('height' , `${randomH}px`);
})
// 参数的形式
// 正常情况下,函数是可以定义参数的
// on语法,如果定义第二个参数是一个对象,就可以通过对象的形式,给事件处理函数传递一个参数
// 这个参数,jQuery,存储在事件对象 e 中
// 是 e.data
// e 和 js 中的事件对象 e 是基本相同的
// js中的 事件对象 e 有的内容, jq中的e也有
// 并且jq中专门有一个新增的data属性,来存储第二个参数,表示的数据
// 先定义一个随机数,然后点击时赋值给宽度属性
let randomW = parseInt(Math.random()*(400+1-100)+100);
// on语法的第二个参数,是 { } 一个对象,会存储在 e.data 中
// 在函数中,可以通过 e.data 来读取参数数据
$('[name="w"]').on('click' , { name:'张三' , age:18 , w:randomW} , function(e){
console.log(e);
console.log(e.data.w);
// 现在随机宽度,数据,存储在 e.data 中, w属性中
$('div').css('width' , `${e.data.w}px`);
})
// 总结1: $().on( 事件类型 , { } , 事件处理函数(e){} )
// 第二个参数, { } 对象,会被存储在 e.data 中
// 可以通过 e.data 来获取数据
</script>
<body>
<div>
<h1>我是h1标签</h1>
<span name="s" id="s">我是span标签</span>
<p class="p">我是p标签</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script src="./jquery.min.js"></script>
<script>
// 事件委托语法形式
// 在JavaScript中,有事件委托形式
// 通过给父级标签,添加点击事件,通过判断点击的标签内容,来执行不同的事件处理函数
// 事件委托语法形式必须要会,之后的标签,内容,都是动态生成的,必须要用事件委托语法形式来定义
/*
const oDiv = document.querySelector('div');
oDiv.addEventListener('click' , function(e){
// 可以判断标签名称,必须是大写
if(e.target.tagName === 'H1'){
console.log('我点击的是h1标签');
}
// 判断name属性
if(e.target.getAttribute('name') == 's'){
console.log('我点击的是span标签');
}
// 判断class等属性
if(e.target.className == 'p'){
console.log('我点击的是p标签');
}
})
*/
// jQuery的事件委托
// 给父级添加事件,参数1是事件类型,参数2,是字符串形式,定义标签名称,参数3是事件处理函数
// 参数2的语法形式: 可以是标签名称,标签name属性,标签id属性,标签class属性,标签结构...
// 只要是 选择器支持的语法形式,都可以写
// 筛选器不行,只能是选择器语法
// 事件委托也可以定义传参参数
// $().on(事件类型,'选择器',{参数},事件处理函数(e){})
$('div').on('click' , 'h1' , function(){
console.log('我点击的是h1标签');
}).on('click' , '#s' , function(){
console.log('我点击的是span标签');
}).on('click' , '.p' , function(){
console.log('我点击的是p标签');
}).on('click' , '[name="s"]' , function(){
console.log('22222');
}).on('click' , 'ul>li:nth-child(3)' , function(){
console.log('3333');
})
</script>
</body>
总结事件绑定样式
<script>
// 事件绑定的语法形式
// 1,简单的语法形式
// 可以直接绑定定义的事件类型
// 可以通过 console.dir( $(标签对象) )
// 其中的 __proto__ 来查看
// click mouseover mouseout mousemove ....
// 2,on语法绑定
// 语法形式1: 两个参数
// 参数1:事件类型
// 参数2:事件处理函数
// 语法形式2: 三个参数,参数2,是对象形式
// 给事件处理函数 e 中 data属性 存储数据
// e.data
// 参数1:事件类型
// 参数2:{ } 对象形式的数据
// 参数3:事件处理函数
// 语法形式3: 三个参数,参数2,是字符串形式
// jQuery的事件委托形式
// 参数2的语法形式,必须符合jQuery中选择器的语法形式
// 参数1:事件类型
// 参数2:'' 字符串形式的选择器
// 参数3:事件处理函数
// 语法形式4: 四个参数,
// 参数1:事件类型
// 参数2:'' 字符串形式的选择器
// 参数3:{ } 对象形式的数据,存储在 e.data中
// 参数4:事件处理函数
// 3,off语法删除
// 必须是绑定的函数名称或者变量名称(匿名函数)
// 才能使用off语法删除
// $().off(事件类型,绑定的函数名称/变量名称)
</script>
