jquery
使用
<script src="路径/js文件名"></script>
选择器
1.基本:$(“选择器”) write less, do more
2.层级:祖先后代选择、父子选择器
3.属性:
$("input[name]");选中有name属性的input
$("input[name=aaa]");选中有name属性,并且值为aaa的input
可以同时匹配多个属性:
$("input[type=button][name=aaa]"); 必须type是按钮,并且name为aaa的input
4.子元素:
:nth-child(n)该元素是作为第几个子元素,n从1开始,
:first/last-child 作为第一/最后个孩子
5.表单:
input[type=button] 等价于 :button 匹配所有的按钮
:radio 单选按钮
:password 密码框
:checkbox 复选框
:submit 提交按钮
:reset 重置按钮
:checked 单选框或复选框是否被选中
筛选器
:first 找到结果中的第一个
:last 找到结果中的最后一个
:eq(n) 找第n个元素(n从0开始)
:odd 找下标为奇数的
:even 找下标为偶数的
:gt(n) 下标大于n的
:lt(n) 下标小于n的
对标签执行操作
1.修改内容
.text();
.text(新内容);
.html();
.html(新内容);
.empty(); 清空内容, 不删除标签
2.删除标签
.remove();==子标签.parentNode.removeAttribute(子标签);
3.修改属性
.prop("属性名");
.prop("属性名", "新值");
.val();
.val(新值);
4.显示隐藏
.hide() 隐藏 // 操作的是style标签: 加了display:none;
.show() 显示
.toggle() 切换
.slideUp(); .fadeOut();
.slideDown(); .fadeIn();
5.尺寸
“`
.width(); 仅包括内容部分的宽度
.innerWidth(); 宽度 = 内容宽度+ 内间距宽度
.outerWidth(); 宽度 = 内容宽度+ 内间距宽度 + 边框宽度
.height();
.innerHeight();
.outerHeight();
动画方法:.animate({样式对象}, 动画时间);
样式对象:动画结束时的坐标
创建
$("<input>")
创建input标签
方法1:
$(“”).prop(“type”, “button”).val(“按钮”).appendTo(“body”);
==》
var input = document.createElement(“input”);
input.type = “button”;
input.value = “按钮”;
document.body.appendChild(input);
方法2:
$(‘’).appendTo(“body”);
添加事件
$(选择器).事件方法(匿名函数);
$(选择器).click(function(){ 要执行的代码 });
注:把script 标签放在body的最后
利用jquery提供的ready事件( 会在所有html标签加载完成后触发 )
$(document).ready(function(){ ... });
$(function(){ ... });