Jquery

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(时间/速度);