<script type="text/javascript" src="xxx.js"> </script>
//-----//选择器找到节点
//-----//对节点的dom操作
1.jQuery编程的步骤:
第1步,使用选择器找到要操作的dom对象,该dom对象会被封装成jQuery对象
第2步,通过调用jQuery对象的方法或者属性来操作底层被封装的dom对象
例子:
function f1(){
//第一步,使用选择器找到要操作的dom对象,
//该dom对象会被封装成jQuery对象。
//变量以$开头只是一个编程习惯
var $obj = $('#d1');
//第二步,通过调用jQuery对象的方法或者
//属性来操作底层被封装的dom对象。
//$obj.html('hello java');
$obj.css('font-size','60px').css('color','red');
}
2.dom对象与jQuery对象之间的转换
2.1.dom对象 --- > jQuery对象
$(dom对象)
例子:
function f2(){
var obj = document.getElementById('d1');
//将dom对象转换成jQuery对象
var $obj = $(obj);
$obj.html('hello java');
}
2.2.jQuery对象 ---> dom对象
$obj.get(0)或者 $obj.get()[0]
例子:
function f3(){
var $obj = $('#d1');
//jQuery对象 ---> dom对象
//var obj = $obj.get(0);
var obj = $obj.get()[0];
obj.innerHTML = 'hello java';
}
3.同时使用prototype和jQuery
使用 jQuery.noConflict()将 $函数改名。
例子:
function f2(){
//将jQuery的$函数改一个名 $a
var $a = jQuery.noConflict();
//var obj = $('d1');
//obj.innerHTML = 'hello java';
$a('#d1').html('hello java');
}
4.jQuery选择器://查找要操作的节点(dom对象)
4.1.基本选择器
#id -------- id选择器
.class ------- 类选择器
element ------- html元素选择器
selector1,select2..selectn------分组选择器
* -------- 全部的节点对象
例子:
function f1(){
//$(选择器):如果返回的是多个dom节点,
//仍然封装成一个jQuery对象。
var $obj = $('.s1');
$obj.css('font-size','60px');
}
function f2(){
$('div').css('font-size','60px');
}
function f3(){
$('#d1,p').css('font-size','60px');
}
function f4(){
$('*').css('font-size','60px');
}
4.2.层次选择器
select1 select2 ---所有的子节点和孙子节点中,是select2的节点(常用)
select1>select2 ---子节点中,是select2的节点
select1+select2 ---下一个兄弟节点(紧临的)中,是select2的节点
select1~select2 ---下面的兄弟节点(可以不是紧临的)中,是select2的节点
例子:
function f1(){
$('#d0 div').css('font-size','60px');
}
function f2(){
$('#d0>div').css('background-color','green');
}
function f3(){
$('#d2+p').css('font-size','60px');
}
function f4(){
$('#d1~div').css('font-size','60px');
}
4.3.过滤选择器
4.3.a,基本过滤选择器
:first 第一个
:last 最后一个
:not(selector) not(选择器)把这个排除在外
:even 第偶数个
:odd 第奇数个
:eq(index) 等于index(index从0开始)(把所有的都一起排序)
:gt(index) 大于index(index从0开始)
:lt(index) 小于index(index从0开始)
例子:
function f1(){
$('#t1 tr:first').css('background-color',
'#cccccc');
}
function f2(){
$('thead tr').css('background-color','#cccccc');
$('tbody tr:even').css('background-color','#fff8dc');
$('tbody tr:odd').css('background-color','yellow');
}
function f3(){
$('tbody tr:eq(1)').css('background-color','yellow');
}
function f4(){
$('tbody tr:not(#l2)').css('background-color','yellow');
}
4.3.b,内容过滤选择器
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配含有选择器所匹配的元素的元素
:parent 匹配含有子元素或者文本的元素
例子:
function f1(){
$('div:contains(吃饭)').css('font-size',
'60px');
}
function f2(){
$('div:empty').html('一会就会吃');
}
function f3(){
$('div:has(span)').css('color','red');
}
function f4(){
$('div:parent').css('font-size','60px');
}
4.3.c,可见性过滤选择器
:hidden 匹配所有不可见元素,或者type为hidden的元素
:visible 匹配所有的可见元素
例子:
function f1(){
//$('div:hidden').css('display','block');
$('div:hidden').show('slow');
}
function f2(){
//$('div:visible').css('display','none');
$('div:visible').hide('slow');
}
4.3.d,属性过滤选择器
[attribute] 找到具有这个属性的节点
[attribute=value] 找到具有这个属性属性等于这个值的节点
[attribute!=value] 找到具有这个属性属性不等于这个值的节点
例子:
function f1(){
//具有id属性的节点
$('div[id]').css('font-size','60px');
}
function f2(){
//具有id属性的节点
$('div[id=d2]').css('font-size','60px');
}
function f3(){
//具有id属性的节点
$('div[id!=d2]').css('font-size','60px');
}
4.3.e,子元素过滤选择器
index下标从1开始
:nth-child(index/even/odd) 下标从1开始,每一个分别处理
例子:
function f1(){
//$('ul li:eq(1)').css('font-size','60px');
$('ul li:nth-child(2)').css('font-size','60px');
}
4.3.f,表单对象属性过滤选择器
:enabled 没有被禁止的
:disabled 选择被禁止输入的表单选项
:checked 单选,多选的属性之一,表示被选中的
:selected 下拉列表的属性,被选中的
例子:
function f1(){
$('#form1 input:disabled')
.css('border','1px dotted red');
}
function f2(){
$('#form1 input:enabled')
.css('border','1px dotted red');
}
function f3(){
// val()方法相当于value属性
var v1 = $('#form2 input:checked').val();
alert(v1);
}
function f4(){
var v1 = $('#form3 select option:selected').val();
alert(v1);
}
4.4.表单过滤选择器
:input
:text
:pasword
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
5.dom操作//(节点的增删改查,以及属性和样式操作)
5.1.查询节点的内容
html() : html内容
text() : 文本内容
val() : 值 相当于value属性
attr(属性名) : 属性的值
这四个方法还可以设置对应的值。
例子:
function f1(){
//alert($('#d1').html());
alert($('#d1').text());
}
function f2(){
$('#d1').html('hello java');
}
function f3(){
//alert($(':text').val());
$(':text').val('tom');
}
function f4(){
alert($('#d1').attr('id'));
}
function f5(){
$('#d1').attr('class','s1');
}
5.2.创建节点
$(html内容);
5.3.插入节点
父节点.append(本节点); //作为最后一个孩子添加//如果本节点原来有就被移动了
父节点.prepend(本节点); //作为第一个孩子添加
兄弟节点.after(本节点); //作为下一个兄弟添加
兄弟节点.before(本节点); //作为上一个兄弟添加
//可以简化,直接在()里添加html内容
例子:
function f1(){
var $div = $('<div>是一个唐朝的大诗人,号称诗仙</div>');
//append:作为最末一个孩子添加进来。
$('body').append($div);
//prepend:作为第一个孩子添加进来。
$('body').prepend($div);
}
function f2(){
//after:作为下一个兄弟添加进来。
var $p = $('<p>hello</p>');
$('ul').after($p);
}
function f3(){
//before:作为上一个兄弟添加进来
var $p = $('<p>hello</p>');
$('ul').before($p);
}
function f4(){
//append方法,当然也包括其它类似的方法,可以
//简化。
$('body').append('<div>一个大诗人</div>');
}
5.4.删除节点
节点.remove();//删除这个节点
节点.empty();//清空这个节点的内容, 此节点还在,子节点没有了
节点.remove('选择器');//删除选择器选择的这个节点
例子:
function f1(){
//$('ul li:eq(1)').remove();
//empty:节点还在,内容清空
$('ul li:eq(1)').empty();
}
function f2(){
$('ul li').remove('#l2');
}
5.5.如何将js代码与html分开
//用$()函数里面写一个匿名函数:
//表示页面加载完毕开始调用这个js方法,实现分离
//数据-----html文件
//样式-----css文件
//操作-----js文件
例子:
//javascript代码
//当整个页面加载完毕,会产生load事件。
window.onload = function(){
var obj = document.getElementById('d1');
obj.οnclick=function(){
this.innerHTML = 'hello jetty';
}
};
//jQuery代码,类似上面代码的功能
$(function(){
//整个页面加载完毕,会执行这儿的代码
$('#d1').click(function(){
//this表示绑订了click事件的那个dom对象
//this.innerHTML = 'hello jetty';
//$(dom对象): 把dom对象封装成了jQuery对象。
$(this).html('hello jetty');
});
});
5.6.复制节点
节点.clone();//复制节点
clone(true);//将事件一块复制
例子:
$(function(){
$('ul li:eq(2)').click(function(){
alert('你点击了item3');
});
$('#b1').click(function(){
var $obj = $('ul li:eq(2)').clone(true);
$('ul').append($obj);
});
});
5.7.属性操作
读取 : attr('');
设置 : attr('','');
设置多个 : attr({"":"","":""});
比如$obj.attr({'id':'d1','class':'s1'});
删除 : removeAttr('')
5.8.样式操作
获取和设置 : attr("class","")或者attr('style':'');
追加 : addClass('');
移除 : removeClass('');
或者removeClass('s1 s2');
或者removeClass();//会删除所有样式
切换样式 : toggleClass('');//有该样式,就删除,没有,就添加。
是否有某个样式: hasClass('');
读取 : css('');
设置 : css('','');
或者css({'':'','':''});//设置多个样式
例子:
$(function(){
$('#b1').click(function(){
$('#d1').attr('class','s1');
$('#d1').attr('style','color:red;font-size:60px;');
$('#d1').addClass('s1');
$('#d1').addClass('s1 s2');
$('#d1').removeClass('s1');
$('#d1').toggleClass('s3');
alert($('#d1').hasClass('s3'));
$('#d1').css({'font-size':'80px','color':'blue'});
});
});
5.9.遍历节点
children() / children(selector);//所有的子元素,只考虑子元素,不考虑其它后代元素(孙元素)
next() / next(selector); //下一个兄弟(紧临的)
prev() / prev(selector); //上一个兄弟(紧临的)
siblings() / siblings(selector);//其他兄弟(包含不紧挨着的)
find(selector); //从当前节点开始查找所有的后代(包含孙子节点)中符合选择器要求的节点
parent() / parent(selector); //父节点,通过子节点找父节点
例子:
$(function(){
$('#b1').click(function(){
var $obj = $('#d1').children();
//length属性:获得jQuery对象包含的dom
//对象的个数
var length = $obj.length;
alert(length);
var $obj = $('#d1').children('div');
$obj.css('font-size','60px');
$('#d2').next('div').css('font-size','60px');
$('#d2').prev().css('font-size','60px');
$('#d2').siblings('div').css('font-size','60px');
$('#d1').find('p').css('font-size','60px');
alert($('#d2').parent().attr('id'));
});
});