jQuery基础部分笔记
发布日期:2021-11-02 02:26:39 浏览次数:0 分类:技术文章

jquery文档加载完再执行

将获取元素的语句写到页面头部,会因为元素还没有加载而出错,jquery提供了ready方法解决这个问题,它的速度比原生的 window.onload 更快。

可以简写为: $(function(){ … })

<script type="text/javascript">$(function(){
        ......});</script>

jquery选择器

jquery用法思想一
选择某个网页元素,然后对它进行某种操作

$('#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的元素

判断是否选择到了元素
jquery有容错机制,即使没有找到元素,也不会出错,可以用length属性来判断是否找到了元素,length等于0,就是没选择到元素,length大于0,就是选择到了元素。

var $div1 = $('#div1');var $div2 = $('#div2');alert($div1.length); // 弹出1alert($div2.length); // 弹出0......<div id="div1">这是一个div</div>

jquery样式操作

jquery用法思想二
同一个函数完成取值和赋值

操作行间样式
(一个参数为获取)
(两个参数为设置)

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

特别注意
选择器获取的多个元素,获取信息获取的是第一个,比如:$(“div”).css(“width”),获取的是第一个div的width。

操作样式类名(重点)

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

绑定click事件

给元素绑定click事件,可以用如下方法:

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

jquery动画

通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数。

 animate参数:    参数一:要改变的样式属性值,写成字典的形式    参数二:动画持续的时间,单位为毫秒,一般不写单位    参数三:动画曲线,默认为‘swing’,缓冲运动,还可以设置为‘linear’,匀速运动    参数四:动画回调函数,动画完成后执行的匿名函数
$('#div1').animate({
       width:300,    height:300},1000,'swing',function(){
       alert('done!');});
上一篇:jQuery进阶部分笔记
下一篇:JavaScript进阶部分笔记