$(document).ready(function(){
alert(“hello jquery”);
});
jquery加载函数 当页面加载完毕时它自动执行 也称为初始化函数
当网页中的dom元素全部加载完毕后 立刻执行
这里说的是dom元素没有说dom元素包含的东西
假如你div 中有个image div加载完了 image 没有加载也没关系
我也认为你div 加载完了
也就是说这个函数 认为我这个结构出来了 我就认为完了不关心你里面的内容是不是出来了
同一页面能同时编写多个
可以简化为 $(function(){});
onload:javascript 初始化函数,当网页中的dom元素(关联图片 视频 资源)全部加载完毕后
立刻执行
同一页面不能同时编写多个
它是一个事件
$等价于jQuery 可以在页面中换成jQuery
dom 节点有三种类型:可以看作一个倒着的树
元素节点
属性节点
文本节点
以上三种节点类型的具体对象 就是dom对象
使用层面 凡是JavaScript能够直接操作的对象,就是dom对象
例
<p id="p">你最喜欢的颜色是?</p>
var p = document.getElementById("p"); 通过javaScript将这个P节点拿到了
这个返回值p 就称之为这个p元素的dom对象 通过JavaScript获取到的对象
就称之为dom对象 (就是p标签所在对象)
alert(p.innerHTML)
jQuery 对象:
凡是jQuery能够直接操作的对象,就是jQuery对象
分这么清楚有啥用
pg:
var $p = $("#p"); 此时拿到的就是jQuery对象 就不是JavaScript对象了
alert($p.html());
如果拿JavaScript获取的就是JavaScript对象
如果用jQuery获取的就是jQuery对象
同一个元素 即可以成为一个dom对象 (有时候也称为JavaScript对象)
也可以成为一个jquery对象
注意: dom对象 只适用于js的各种语法(函数 属性)
jquery对象只用于jquery的各种语法 (函数 属性)
dom对象和jquery对象 各自独立
建议:
js对象 直接写 p
jquery对象 加上$ 例如 $p
dom对象和jquery对象的转化 dom对象-->jquery对象: $(dom对象) $()称为jQuery工厂 jquery对象-->dom对象: jquery对象默认是一个数组 或集合 dom对象默认是一个单独的对象 也就是说凡是一个jquery对象它就认为你获取的是一个数组或者是一个集合 如果将 jquery对象-->dom对象 其实就是将一个集合或数组转单独元素 将集合数组转成一个元素 方法 数组:jquery对象[0] 集合:jquery对象.get(0)
jquery选择器 并集选择器 逗号 $(".class值,#id值") 交集选择器(同时存在) 连续直接写 $("元素选择器.class值#id值") 注意 不能出现歧义 错误写法 $(".class值元素选择器") 全局选择器 $("*") 属性选择器 [...]
$("[属性名]")
$("[name]"):选中全部元素中 有name属性的元素 只要你有name 就可以
$("[属性名=属性值]"): 选中属性值等于什么的元素
$("[class!=a]") class不等于a的元素(即使没有该属性 也属于不等于 也就是说会选中没有该属性的元素)
$("[class^=a]") class以a开头的元素
$("[class$=a]") class以a结尾的元素
$("[class*=a]") class有a的 包含a的元素
过滤选择器
:first
: eq
可以使用如下方式写 方法调用
$("ul>li").first().html();
也可以使用如下方式 选择器形式
$("ul>li:first").html();
有时候是等价的 有时候不一定 如 odd就不可以
选中其中里面的某个元素
该部分是一个jquery对象 要选中的某个元素
$(“ul>li:odd”) [1] .html();
Jquery 循环
一 下面提—下 jQuery的each方法的几种常用的用法
Js代码
var arr=["one","two","three","four"];
$.each(arr, function(){
alert(this);
});
//上面这个eaCh输出的结果分别为: one, two, three, four
var arr1=[[1,4,3],[4,6,6],[7,20,9]]
$.each(arrl, function(i, item){
alert(item[0]);
});
∥其实arr1为一个二维数组,item相当于取每一个一维数组,
//item[0]相对于取每一个一维数组里的第一个值
∥所以上面这个each输出分别为:1 4 7
var obj={one: 1, two: 2, three: 3, four: 4};
$.each(obj, function(key, val){
alert ( obj[key]);
});
//这个each就有更厉害了,能循环每一个属性
//输出结果为:1 2 3 4
简单实例:
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(){ //单出每一个的文本
alert($(this).text());
});
});
});