jquery 引用位置 放在第一位
页面加载完成
window.onload = function(){...}
$(document).ready(function(){...})
$(function(){...})
找到元素
js=documen.getElementBy... js找元素 返回的js对象
jq=$(‘#id1’) jq找元素 返回的jq对象
$(‘li’).eq(2).index() → 3 <li>数组 第3个的索引
操作内容 获取内容 修改内容
非表单元素 js.innerHtml js.innerHtml = 123
表单元素 js.value js.value = 123
非表单元素 jq.html() jq/jqs.html(123) jq.text()获取文本
表单元素 jq.val() jq.val(123)
checkbox jq.prop(‘checked’)→false jq.prop({checked:true}) 默认选中
操作属性
js.getAttribute("id") 获取属性
js.setAttribute("class",'dd') 设置属性
js.removeAttribute("id") 删除属性
jq.attr("id") 获取属性
jq.attr({"id":"dd","class":"pp"}) 设置属性 src herf
jq.removeAttr("id"); 删除属性
jq.addClass("pp"); 追加类 属性
jq.removeClass("pp qq") 移除 class的pp和qq
jq.toggleClass("aa") 没有aa加上aa，有aa去掉aa
操作样式
js.style.color 获取样式
js.style.color = "red" 修改样式
jq.css("color") 获取样式 jq是数组 获取第一个
jq.css({"color":"red","fontSize":"12px"}) 修改样式 用{}可写多个
操作事件
js.onclick = function(th){...} 点击 触发函数
js.addEventListener("click",function(){...}, true) 加监听true:外div先执行
js.bind("click mouseover",function(){...}) 绑定 点击、鼠覆 到 函数
js.unbind("mouseover"); 解除绑定
jq.click(function(){ this js对象 jq可以是jq数组
$(this) jq对象 }) 点击元素添加class
$(this)addClass(‘cur’).siblings().removeClass(‘cur’); 其兄弟元素删除class
添加删除元素
js= document.createElement("div"); 创建元素
js.remove() 删除元素
jq.append("<div>123</div>") jq内 创建元素 .prepend("</>") 前
jq.before("<div>123</div>") jq前 创建 .after("</>") 后
jq.remove() 删除元素 .empty() 清空内容
选择器 .length属性判断是否选择成功。
$(document) 整个文档
$('#ul1 li:odd') id为ul1下 奇数行li odd+1 偶数行
$('#ul1 li:eq(2)') id为ul1下 第3个li
$('div:visible') 可见的div
:nth-child(-n+6){} 选择第1个到第6个 :nth-child(n+6){}选择从第6个开始的
$('div').eq(5); 第6个div元素
$('div').has('p'); div中 包含p元素的
$('div').not('.cla'); class不是cla的
$('div').filter('.cla'); class等于cla的
$('div').prev('p'); div 前面的第一个p元素
$('div').prevAll(); 前面的元素
$('div').next('p'); 后面的第一个p元素
$('div').nextAll(); 后面的元素
$("h2").nextUntil("h6") h2~h6之间的
$('div').closest('form'); 最近的form 祖先元素
$('div').parent(); div的父元素 .parents() 所有祖先元素
$('div').children(); div的所有子元素 .children('ul') 是<ul>的子元素
$('div').children().css(...).end(); 子元素设置样式 end()返回原始元素
$('div').siblings(); div的兄弟元素 不包括自己
$(‘li’).eq($(this).index()).addClass(‘cur’).siblings().removeClass(‘cur’);
li数组中 点击的 元素 添加class 其兄弟元素删除class
$(this).next().slideDown().parent().siblings().children('ul').slideUp();
点击菜单 子元素展开 菜单 兄弟 子元素 关闭