JQuery
官方网站: •https://jquery.com/
jQuery的使用:
需要在html页面的head标签中引入下载的jquery类库即可
例:<script type="text/javascript" src="jquery1.11.1.js">
</script>
需要操作的话,还需要在这个下面在写入一个script标签
例:<script type="text/javascript">
$(document).ready(function(){
alert("hello world");
});
</script>
jQuery选择器;
基本选择器:
#id 根据给定的id匹配一个元素
.class 根据给定的类名选择一个元素
element 根据元素的名称选择
* 匹配所有的元素
层次选择器:
form表单选择器:
//选择form表单中的所有元素,包括input,select,textarea
var inputs = $("#formid :input");
//alert(inputs.length);
//选择的是type属性值为text的元素
var texts = $("#formid :text").val();
//alert(texts);
//选择密码输入框的元素
var passwords = $("#formid :password").val();
//alert(passwords);
//选择多选框的元素
var checkboxs = $("#formid :checkbox");
//alert(checkboxs.length);
//选择下拉列表的元素,后面如果跟的是val()会返回选中的那一项,如果是text()返回所有下拉列表选项
var options = $("#formid select").text();
alert(options);
DOM表单操作:
插入节点:
在被选中的节点所有子节点后面添加
$(select).append(content);
替换选中节点的所有子节点
$(select).html(content);
在选中的节点前面添加节点
$(select).before(content);
在选中的节点后面添加节点
$(select).after(content);
在选中的节点子节点处预置prepend内容
$(select).prepend(content);
删除节点
$(select).remove(content);
清空指定元素的所有后代节点
$(select).empty();
克隆节点,并添加到指定节点里面
$(select).clone()appendTo(content);
替换节点
$(旧节点).replaceWith(新节点);
$(新节点).replaceAll(旧节点);
包裹节点,包括标签全部包裹进去
$(被包裹节点).wrap(包裹节点);
包裹节点,只包裹内容,不包裹标签
$(被包裹节点).wrapInner(包裹节点);
设置属性,一个参数为获取属性的值,两个参数为改变或者添加属性
$(节点).attr('属性名','属性值');
同样是设置属性,不过是attr的进阶版
$(节点).prop('属性名','属性值');
删除属性
$(节点).removeAttr('属性名');
添加一个class属性
$(节点).addClass('class名');
获取元素文本内容
text();
获取元素的html内容
html();
获取元素的value属性值
val();
获取一个元素的所有子元素,返回一个集合
$(节点).children();
获取元素后面紧跟着的一个兄弟元素
$(节点).next();
设置css样式
$(节点).css( { ' 属性名 ' : ' 属性值 ' , ' 属性名 ' : ' 属性值 ' });
绑定点击事件:
绑定事件格式
标准格式:$(选择器).on/find("事件",function(){ });
简化格式:$(选择器).事件(function(){ });
动画:
1.从左上角开始缩放,时间参数可要可不要
显示:$(选择器).show(时间/速度);
隐藏:$(选择器).hide(时间/速度);
2.透明度,时间参数可要可不要
显示:$(选择器).fadeIn(时间/速度);
隐藏:$(选择器).fadeOut(时间/速度);
3.上下,时间参数可要可不要
显示:$(选择器).slideDown(时间/速度);
隐藏:$(选择器).slideUp(时间/速度);