Web前端之javascript框架jquery

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(){ ... });