jQuery
<!-- 加载外部jQuery程序 -->
<script src="./jquery.min.js"></script>
<script>
// 什么是jQuery
// jQuery是 一个前端的方法库
// 也就是别人将JavaScript程序,定义成了各种函数方法,我们直接写直接用,就可以实现各种功能
// jQuery的网站
// 官网 : https://jquery.com/
// 中文网站 : http://jquery.cuishifeng.cn/
// jquery的三大优点
// 1,强大的选择器机制 --- 方便获取标签对象
// 2,优质的隐式迭代 --- 默认对数组中的所有标签,进行操作
// 3,无所不能的链式编程 --- 再复杂的操作,一行代码搞定
// 如何使用jquery
// 1,通过外部程序,加载jQuery文件
// 可以是本地文件,也可以是网上的文件
// 2,通过 $ 或者 jQuery 的形式 来调用执行jQuery中定义的方法
console.dir($);
console.dir(jQuery);
</script>
jQuery 选择器
<script>
// 选择器 --- 获取标签对象
// JavaScript中,有JavaScript获取标签的方式
// 有的是一个标签对象,有的是一个标签对象的伪数组
// document.getElementById
// document.getElementsByClassName
// document.getElementsByName
// document.getElementsByTagName
// document.querySelector
// document.querySelectorAll
// jQuery中,也有自己获取标签对象的方式
// 即时只有一个符合的标签,获取的结果,也是一个伪数组
// 不管怎么获取,获取到的都是一个伪数组
// 通过标签名称
// console.log($('div'));
// 通过id属性值
// console.log($('#div1'));
// 通过class属性值
// console.log($('.div1'));
// 通过标签属性和属性值
// $('[属性="属性值"]')
// console.log($('[name="div1"]'));
// 通过标签结构 ul中的所有子级li
// console.log($('ul>li'));
// 通过伪类选择器
// ul中子级第一个li
// console.log($('ul>li:first'));
// ul中子级最后一个li
// console.log($('ul>li:last'));
// ul中子级li,索引下标是奇数的标签
// console.log($('ul>li:odd'));
// ul中子级li,索引下标是偶数的标签
// console.log($('ul>li:even'));
// ul中子级li,索引下标是2的标签
// console.log($('ul>li:eq(2)'));
// 总结:
// 只要是标签有的,只要是css能写的,都可以作为获取标签对象的方法
// 获取到的是标签对象伪数组
// 获取到的是一个伪数组
// 可以forEach,但是要用jQuery的forEach方法,不能用JavaScript的forEach语法
// for...in,可以使用,但是获取到的内容,太多太多了,我们也不用
// $('ul>li').forEach(function(item){
// console.log(item);
// })
// for(let i in $('ul>li')){
// console.log( i );
// }
// 总结:
// jQuery获取的标签对象,不要直接使用JavaScript的语法形式来操作
// JavaScript的标签对象,也不要直接使用jQuery的语法形式来操作
// 这是两种完全不同的语法形式,获取到的标签对象,也完全不同
// 但是可以相互转化
// jQuery标签对象[索引下标] --- 转化为指定的标签对象,就可以使用对应的JavaScript语法形式
// $(JavaScript标签对象) --- 转化为jQuery标签对象,可以使用jQuery语法形式
// jQuery语法获取的所有ul中子级li标签
console.log($('ul>li')) ;
// jQuery语法获取的所有ul中子级li标签,其中索引是0的指定标签
console.log($('ul>li')[0]);
// 通过JavaScript语法,获取到一个标签对象
const oDiv = document.querySelector('div');
console.log(oDiv);
// 转化为jQuery标签伪数组
console.log( $(oDiv) );
</script>
jQuery的筛选器
// 什么是jQuery的筛选器
// 在通过选择器,获取到标签对象的基础上,再来进行筛选,选择出符合条件的标签对象
// 选择器一定是在选择器的基础上使用
// 为了链式编程方便
// 筛选器的执行结果,也一定是一个伪数组
// 获取ul中,所有子级li标签
// $('ul>li');
// li标签伪数组中,第一个标签对象,也是伪数组
// console.log( $('ul>li').first() );
// li标签伪数组中,最后一个标签对象,也是伪数组
// console.log( $('ul>li').last() );
// li标签伪数组中,按照索引下标获取
// console.log( $('ul>li').eq(2) );
// 当前标签的上一个兄弟标签
// $('ul>li').eq(2) 索引是2的第三个标签
// $('ul>li').eq(2).prev() 索引是2的第三个标签的上一个兄弟标签,也就是索引是1的第二个标签
// console.log( $('ul>li').eq(2).prev() );
// 当前标签的下一个兄弟标签
// $('ul>li').eq(2) 索引是2的第三个标签
// $('ul>li').eq(2).next() 索引是2的第三个标签的下一个兄弟标签,也就是索引是3的第四个标签
// console.log( $('ul>li').eq(2).next() );
// 当前标签之前的所有兄弟标签
// $('ul>li').eq(2) 索引是2的第三个标签
// $('ul>li').eq(2).prevAll() 索引是2之前的所有标签
// console.log( $('ul>li').eq(2).prevAll() );
// 当前标签之后的所有兄弟标签
// $('ul>li').eq(2) 索引是2的第三个标签
// $('ul>li').eq(2).nextAll() 索引是2之后的所有标签
// console.log( $('ul>li').eq(2).nextAll() );
// 当前标签的所有兄弟标签,不管前后
// $('ul>li').eq(2) 索引是2的第三个标签
// $('ul>li').eq(2).siblings() 除索引是2的所有兄弟标签
// console.log( $('ul>li').eq(2).siblings() );
// 当前标签的直接父级标签
// console.log( $('ul>li').eq(2).parent() );
// 当前标签的所有父级标签
// console.log( $('ul>li').eq(2).parents() );
// 根据条件来查找jQuery,标签伪数组中符合的标签
// $('ul').find(条件)
// 在ul标签中,find定义的条件来查询子级标签
// 在爹中,按照条件找儿子
// console.log( $('ul').find('[name="li5"]') );
// 获取伪数组标签的所有子级标签
// console.log($('ul').children());
// 效果和 .find('li')是相同的
// console.log($('ul').find('li'));
// 与 ul>li也是相同的
// 只不过是为了满足不同的链式编程的需要
// 获取当前标签在伪数组的索引
// 也就是在所有兄弟标签中的索引下标
// 找到所以是2的标签
console.log($('ul>li').eq(2).index());
// 找到一个标签,获取标签在兄弟标签中的索引
console.log($('[name="li5"]').index());
jQuery的属性操作
<script src="./jquery.min.js"></script>
<script>
// 通过已经获取的标签对象,来操作标签对象的属性和属性值
// 获取标签属性的属性值
// 记住一句话:
// 所有的布尔属性,都用 prop()
// 其他属性,包括自定义属性,都用attr()
// 方法1: $(标签对象).prop('属性');
// 并不能获取到所有属性的属性值
// 有些属性是拿不到的,会是undefined
// console.log( $('div').prop('name') );
// console.log( $('div').prop('id') );
// console.log( $('div').prop('class') );
console.log( $('button').prop('disabled') );
// 方法2: $(标签对象).attr('属性');
// console.log( $('div').attr('name') );
// console.log( $('div').attr('id') );
// console.log( $('div').attr('class') );
console.log( $('button').attr('disabled') );
// 新增属性
// prop() 新增自定义属性,结果不会显示在标签上,但是确定可以添加上
$('div').prop('index1' , 1);
// 使用 prop 可以获取到这个属性
// 获取的结果是数值类型
console.log( $('div').prop('index1') );
// 新增的自定义属性,可以显示在标签上,也可以通过attr()来获取到
// 获取的结果是字符串类型
$('div').attr('index2' , 1);
console.log( $('div').attr('index2') );
// 新增标签本身具有的属性
// 有的支持,有的不支持持
// $('div').prop('name' , 'divdiv');
// $('div').prop('id' , 'divdiv1');
// $('div').prop('class' , 'divdiv1-1');
// 所有的都可以支持
// $('div').attr('name' , 'divdiv');
// $('div').attr('id' , 'divdiv1');
// $('div').attr('class' , 'divdiv1-1');
// 删除属性
// prop只能删除,通过prop定义的新增自定义属性
$('div').removeProp('name' , 'divdiv');
$('div').removeProp('id' , 'divdiv1');
$('div').removeProp('class' , 'divdiv1-1');
// attr能删除所有的属性
// $('div').removeAttr('name' , 'divdiv');
// $('div').removeAttr('id' , 'divdiv1');
// $('div').removeAttr('class' , 'divdiv1-1');
// 总结
// 布尔属性用 prop
// 其他属性都用 attr
// 删除属性, prop定义的用prop删,其他都用 attr删
// 不能乱删除
</script>
jQuery 的class属性
// 操作标签class属性的属性值
// 只是操作属性值,css样式,该怎么执行,就按照css的优先级权重来执行
// 1,新增class属性的属性值
// 是在原有属性值的基础上,新增新的属性值,原有的属性值会保留
// 新增div1属性值
// $('div').addClass('div1');
// 在原有div1的基础上,再新增一个div2,div1仍然保留
// $('div').addClass('div2');
// 在之前的属性值上在新增一个div3
// $('div').addClass('div3');
// 2,删除class属性的属性值
// 只删除指定的class属性值,其他的仍然保留
// $('div').removeClass('div2');
// 3,切换如果有,就删除,如果没有就新增
// 如果删除了div2,没有div2,就是新增div2属性值
// $('div').toggleClass('div2');
// 4,判断是否有这个class属性值
// 执行结果是 布尔类型, 有--true 没有--false
// console.log( $('div').hasClass('div2') );
// 4,新增多个,删除多个
// 新增多个,与给class 写多个属性值,语法形同
$('div').addClass('div1 div2 div3');
// 删除多个
// 将需要删除的多个class属性,定义在字符串中,以空格间隔
// 顺序无所谓
// 删除div1和div2
// $('div').removeClass('div1 div2');
// 删除div1和div3
// $('div').removeClass('div1 div3');
隐式迭代
// 什么是隐式迭代
// jQuery会自动操作获取到的伪数组中的说有标签对象
// 设定和获取是不一样的
// 对ul中的所有li进行操作
// 1,获取其中的属性
// 获取 ul中li的name属性的属性值
// 获取只会获取第一个标签的内容
console.log($('ul>li').attr('name'));
// 2,设定其中的class属性值
// 设定属性属性值等,会给伪数组中所有的标签都设定上指定的样式,属性等
$('ul>li').addClass('li1').attr('index' , 1);
Processed:
0.008, SQL:
9
