前端学习总结 之 jq 1

-----------------------jq简单史--------------------------
jQuery - js 写的一个数据库 库 框架 
jQuery 是一个美国人John resig 研发 简单 : 写的少 做的多 
--语法更简单 (效果更好) 表单验证、 行为动作 --jq 
1.0 国内都使用1.0开发 2.0和3.0不兼容低版本浏览器
2.0 
3.0 


--------------------jq程序入口--------------------------
$(document).ready(function(){ ...... });
$(function(){ ...... });   (简写)


绑定click点击事件
$('#btn1').click(function(){ // 内部的this指的是原生对象 
    // 使用jquery对象用 $(this) })




---------------------jq选择器-----------------------------
$('#myId') //选择id为myId的网页元素 
$('.myClass') // 选择class为myClass的元素 
$('li') //选择所有的li元素 
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
$('input[name=first]') // 选择name属性等于first的input元素


--------------------对选择集进行过滤-----------------------
$('div').has('p'); // 选择包含p元素的div元素 
$('div').not('.myClass'); //选择class不等于myClass的div元素 
$('div').eq(5); //选择第6个div元素


--------------------选择集转移-------------------------- 
$('#box').prev(); //选择id是box的元素前面紧挨的同辈元素 
$('#box').prevAll(); //选择id是box的元素之前所有的同辈元素 
$('#box').next(); //选择id是box的元素后面紧挨的同辈元素
$('#box').nextAll(); //选择id是box的元素后面所有的同辈元素 
$('#box').parent(); //选择id是box的元素的父元素 
$('#box').children(); //选择id是box的元素的所有子元素
$('#box').siblings(); //选择id是box的元素的同级元素 
$('#box').find('.myClass'); //选择id是box的元素内的class等于myClass的元素


--------------------是否找到元素------------------------
alert($div1.length); // 弹出1 
alert($div2.length); // 弹出0


--------------------jquery样式操作---------------------
// 获取div的样式 
$("div").css("width"); 
$("div").css("color"); 
//设置div的样式 
$("div").css("width","30px"); 
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});


----------------------操作样式类名------------------ 
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2 
$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式 
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式


获取元素的索引值: index()