强哥jQuery学习笔记

js对象:
1.js内置对象
2.js元素对象
3.jquery对象

js特效:
1.js元素对象
2.jQuery对象

jQuery学习:
1.核心函数
2.选择器
3.筛选
4.文档处理
5.属性
6.css
7.事件
8.效果
9.ajax
10.工具

为了解决多框架冲突:
1.$()
2.jQuery()


当页面加载完毕时
//window.onload
当DOM元素加载完毕时
$(function($) {
// 你可以在这里继续使用$作为别名...
});
而放在body后,本身就是等DOM加载完毕


$("h1:odd") //索引为奇数
$("h1:even") //索引为偶数

data() //藏数据

.clone().appendTo() //不移除

mouseenter([[data],fn]) //鼠标移入
mouseleave([[data],fn]) //鼠标移出
empty() //清空
toggleClass(class) //如果存在(不存在)就删除(添加)一个类
$("<h1>aaaaaaa</h1>").get(0) //aaaaaaa
one(type, [data], fn) //只绑定1次事件

style="opacity:0.1" //调透明度

arr.constuctor //构造器

 

jquery对象访问:
each()
size()
get()
get(index)
index()

js元素对象和jquery对象之间的转换:
$(document);
$("h3id").get(0);

 

jQuery(expression, [context]) 返回值:jQuery
$("div > p"); //找到所有 p 元素,并且这些元素都必须是 div 元素的子元素。
$("input:radio", document.forms[0]); //在文档的第一个表单中,查找所有的单选按钮(即: type 值为 radio 的 input 元素)。
$("div", xml.responseXML); //在一个由 AJAX 返回的 XML 文档中,查找所有的 div 元素。

jQuery(html, [ownerDocument]) 返回值:jQuery
$("<div><p>Hello</p></div>").appendTo("body"); //动态创建一个 div 元素(以及其中的所有内容),并将它追加到 body 元素中。
//创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。
// 在 IE 中无效:
$("<input>").attr("type", "checkbox");
// 在 IE 中有效:
$("<input type='checkbox'>");
jQuery(html, props)

$("<div>", {
"class": "test",
text: "Click me!",
click: function(){
$(this).toggleClass("test");
}
}).appendTo("body"); //动态创建一个 div 元素(以及其中的所有内容),并将它追加到 body 元素中

$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form"); //创建一个 <input> 元素,同时设定 type 属性、属性值,以及一些事件。

jQuery(elements)
$(document.body).css( "background", "black" ); //设置页面背景色。
$(myForm.elements).hide() //隐藏一个表单中所有元素。

jQuery(callback) //$(document).ready()的简写。
$(function(){
// 文档就绪
}); //当DOM加载完成后,执行其中的函数。

jQuery(function($) {
// 你可以在这里继续使用$作为别名...
});
//使用 $(document).ready() 的简写,同时内部的 jQuery 代码依然使用 $ 作为别名,而不管全局的 $ 为何。


each(callback)
$("img").each(function(i){
this.src = "test" + i + ".jpg";
}); //迭代两个图像,并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。
size() //返回值:Number
$("img").size(); //jQuery 对象中元素的个数。这个函数的返回值与 jQuery 对象的'length' 属性一致。

length //返回值:Number
$("img").length; //jQuery 对象中元素的个数。当前匹配的元素个数。 size 将返回相同的值。

selector //返回值:Striing
$("ul").selector //结果ul


context //返回值:Element
$("ul")
.append("<li>" + $("ul").context + "</li>")
.append("<li>" + $("ul", document.body).context.nodeName + "</li>");
//jQuery 1.3新增。返回传给jQuery()的原始的DOM节点内容,即jQuery()的第二个参数。如果没有指定,那么context指向当前的文档(document)。


get() //返回值:Array<Element>
$("img").get().reverse(); //选择文档中所有图像作为元素数组,并用数组内建的 reverse 方法将数组反向

get(index) //返回值:Element $(this).get(0)与$(this)[0]等价。
$("img").get(0);


selector1,selector2,selectorN //返回值:Array<Element(s)>
$("div,span,p.myClass") //找到匹配任意一个类的元素。

 

posted @ 2017-06-23 14:46  Redheat  阅读(208)  评论(0编辑  收藏  举报