jquery js对比 加载 操作内容 属性 样式 元素 选择器

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();

 点击菜单 子元素展开 菜单 兄弟 子元素 关闭