web前端——入门级JQuery

一、 JQuery
a) $()  JQuery()
b) $(selector).action();
c) $(selector)：封装通过选择器获取页面元素对象d)action()：封装了所有操作和事件e)JSvsJQuery虽然JQuery是对JS的封装，但是JS和JQuery的对象不可以交叉使用。JS和JQuery对象之间转换：JsToJQuery:$(jsObj); JQueryToJs:$(selector).get(n);
JS JQuery
执行时间 结构、样式、内容加载完成 结构加载完成
加载事件 window.οnlοad=function(){…} $(function()\dots )一个页面窗口只能有一个可以有多个唯一写法简化方式：$()
f) 元素样式 obj.style.styleProp = value; $(selector).css(“styleProp”,”value”);
obj.style.borderColor=value; $(selector).css(“border-color”,”value”);
obj.className = className; $(selector).css({“prop”:”value”, … });
$(selector).addClass(className);
$(selector).removeClass(className);
$(selector).toggleClass(className);
g) 元素内容 obj.innerText [=””]; $(selector).text([“”]);
obj.innerHTML [=””]; $(selector).html([“”]);
obj.value [=””]; $(selector).val([“”]);
h) 元素属性 obj.setAttribute(“prop”,”value”); $(selector).attr(“”[,””]);
$(selector).removeAttr(“”);
$(selector).prop(“”[,””]);
$(selector).removeProp(“”);
i) 层次元素
var father = obj.parentElement; var father = jqObj.parent();
var father = jqObj.parents(selector);
var childs = obj.children; var childs = jqObj.childres(selector);
var brother = obj.nextElementSibling; var brothers = jqObj.siblings(selector);
var brother = obj.previousElementSibling; var siblingIndex = jqObj.index();
var next = jqObj.next();
var nexts = jqObj.nextAll();
var prev = jqObj.prev();
var prevs = jqObj.prevAll();
father.appendChild(childNode); newChild.insertAfter(refChild);
brother.insertBefore(newChild,refChild); newChild.insertBefore(refChild);
j) 创建和删除元素
var e = document.createElement(“tagName”); var e = $(“”);
obj.remove(); $(selector).remove();
k) 事件和事件函数绑定
obj.onXxx = functionName; $(selector).xxx([function(){…}]);
obj.onXxx = funtion(){…}; $(selector).bind(event,function(){…});
$(selector).hover(function(){…},function(){…});
$(selector).delegate(selector,event,data,function(){…});
$(selector).live(event,function(){…});
$(document).on(event,selector,function(){…});
$(selector).off(event ,selector); //删除
$(selector).one(event,selector,function(){…});//只响应一次