jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件
注意：以下部分问题不能实现效果，因该是单词拼写错误(少个t)或者没有加引号(“swing”)。。。
jquery介绍
jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。
jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。
jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。
<script type= " text/javascript " src= " js/jquery-1.12.2.js " ></script>
jquery的口号和愿望Write Less, Do More（写得少，做得多）
1、http://jquery.com/ 官方网站
2、https://code.jquery.com/ 版本下载
jquery加载
将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的window.onload 更快。
<script type= " text/javascript " >
$(document).ready(function(){
......
});
</script>
可以简写为：
<script type= " text/javascript " >
$(function(){
......
});
</script>
jquery选择器
jquery用法思想一
选择某个网页元素，然后对它进行某种操作
jquery选择器
jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。
$( " #test " ).html()
意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码： document.getElementById( " test " ).innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定：如果获取的是jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery对象
var variable = DOM对象
$variable[ 0 ]：jquery对象转为dom对象$( " #msg " ).html(); $( " #msg " )[ 0 ].innerHTML
jquery的基础语法：$(selector).action()
参考：http://jquery.cuishifeng.cn/
$(document) // 选择整个文档对象 $( ‘ li ‘ ) // 选择所有的li元素 $( ‘ #myId ‘ ) // 选择id为myId的网页元素 $( ‘ .myClass ‘ ) // 选择class为myClass的元素 $( ‘ input[name=first] ‘ ) // 选择name属性等于first的input元素 $( ‘ #ul1 li span ‘ ) // 选择id为为ul1元素下的所有li下的span元素
对选择集进行修饰过滤(类似CSS伪类)
$( ‘ #ul1 li:first ‘ ) // 选择id为ul1元素下的第一个li $( ‘ #ul1 li:odd ‘ ) // 选择id为ul1元素下的li的奇数行 $( ‘ # ul1 li:eq(2) ‘ ) // 选择id为ul1元素下的第3个li $( ‘ #ul1 li:gt(2) ‘ ) // 选择id为ul1元素下的前三个之后的li $( ‘ #myForm :input ‘ ) // 选择表单中的input元素 $( ‘ div:visible ‘ ) // 选择可见的div元素
表单选择器
:enabled
:disabled
: checked
:selected
<body>
<form>
<input type= " checkbox " value= " 123 " checked >
<input type= " checkbox " value= " 456 " checked >
< select >
<option value= " 1 " >Flowers</option>
<option value= " 2 " selected= " selected " >Gardens</option>
<option value= " 3 " selected= " selected " >Trees</option>
<option value= " 3 " selected= " selected " >Trees</option>
</ select >
</form>
<script src= " jquery.min.js " ></script>
<script>
// console.log($("input:checked").length); // 2
// console.log($("option:selected").length); // 只能默认选中一个,所以只能lenth:1
$( " input:checked " ).each(function(){
console.log($( this ).val())
})
</script>
</body>
such as
对选择集进行函数过滤
$( ‘ div ‘ ).has( ‘ p ‘ ); // 选择包含p元素的div元素 $( ‘ div ‘ ).not( ‘ .myClass ‘ ); // 选择class不等于myClass的div元素 $( ‘ div ‘ ).filter( ‘ .myClass ‘ ); // 选择class等于myClass的div元素 $( ‘ div ‘ ).first(); // 选择第1个div元素 $( ‘ div ‘ ).eq( 5 ); // 选择第6个div元素
选择集转移
$( ‘ div ‘ ).prev( ‘ p ‘ ); // 选择div元素前面的第一个p元素 $( " div " ).prevAll() $( " div " ).prevUntil() // 直到找到符合括号里面的条件的停止 $( ‘ div ‘ ).next( ‘ p ‘ ); // 选择div元素后面的第一个p元素 $( " .test " ).nextAll() $( " .test " ).nextUntil() $( ‘ div ‘ ).closest( ‘ form ‘ ); // 选择离div最近的那个form父元素 $( ‘ div ‘ ).parent(); // 选择div的父元素 $( " .test " ) .parents();所有级别的父级别标签 $( " .test " ).parentUntil() ；所有级别的父级别标签，直到。。。 $( ‘ div ‘ ).children(); // 选择div的所有子元素 $( ‘ div ‘ ).siblings(); // 选择div的同级元素 $( ‘ div ‘ ).find( ‘ .myClass ‘ ); // 选择div内的class等于myClass的元素
jquery样式操作
jquery用法思想二
同一个函数完成取值和赋值
操作行间样式
// 获取div的样式
$( " div " ).css( " width " );
$( " div " ).css( " color " );
// 设置div的样式
$( " div " ).css( " width " , " 30px " );
$( " div " ).css( " height " , " 30px " );
$( " div " ).css({fontSize: " 30px " ,color: " red " });
特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。
操作样式类名
$( " #div1 " ).addClass( " divClass2 " ) // 为id为div1的对象追加样式divClass2 $( " #div1 " ).removeClass( " divClass " ) // 移除id为div1的对象的class名为divClass的样式 $( " #div1 " ).removeClass( " divClass divClass2 " ) // 移除多个样式 $( " #div1 " ).toggleClass( " anotherClass " ) // 重复切换anotherClass样式
jquery属性操作
1、html() 取出或设置html内容
// 取出html内容 var $htm = $( ‘ #div1 ‘ ).html(); // 设置html内容 $( ‘ #div1 ‘ ).html( ‘ <span>添加文字</span> ‘ );
2、text() 取出或设置text内容
// 取出文本内容 var $htm = $( ‘ #div1 ‘ ).text(); // 设置文本内容 $( ‘ #div1 ‘ ).text( ‘ <span>添加文字</span> ‘ );
3、attr() 取出或设置某个属性的值
// 取出图片的地址
var $src = $(‘#img1‘).attr(‘src‘);
// 设置图片的地址和alt属性
$(‘#img1‘).attr({ src: "test.jpg", alt: "Test Image" });
绑定click事件
给元素绑定click事件，可以用如下方法：
$(‘#btn1‘).click(function(){
// 内部的this指的是原生对象
// 使用jquery对象用 $(this)
})
事件委派
$(父标签).on("click",".item",function(){});
--- 解决添加子元素的绑定事件
$(标签).off(事件)
--- 接触事件