前端笔记----jquery入门知识点总结 （转）

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端笔记----jquery入门知识点总结 （转）相关的知识，希望对你有一定的参考价值。

http://www.cnblogs.com/cwp-bg/p/7633623.html

一、jquery的加载方法

  1. $(document).ready(function(){js代码});
  2. $(function(){js代码});（一般使用这个）;

注意点1：使用jquery必须先导入函数库文件，使用一个单独的script标签，结束代码另起一行script。

<script src="./jquery-1.12.4.js"></script>    
<script>js的代码</script>

注意点2：在加载完毕后需要判断是否加载成功，一般使用length属性判断输出，如果不成功，length输出0；成功输出非0.

<script>
        $(function () {
            $div = $(".box");
            console.log($Div.length);
        })
    </script>

二、jquery选择器，获取标签

说明：选择器和css选择器的写法相同。

  • 选择元素：
$(document) //选择整个文档对象
$(‘li‘) //标签选择元素
$(‘#myId‘) //通过id选择元素
$(‘.myClass‘) // 通过class属性选择
$(‘input[name=first]‘) // 选择name属性等于first的input元素，通过行内属性和标签结合选择
$(‘#ul1 li span‘) //层级选择
  • 修饰过滤
$(‘ul li:first‘) //选择ul元素下的第一个li
$(‘ul li:odd‘) //选择ul元素下的li的奇数行
$(‘ul li:eq(2)‘) //选择ul元素下的第3个li
$(‘ul li:gt(2)‘) // 选择ul元素下的第三个之后的li
$(‘ul li:lt(2)‘) // 选择ul元素下的第三个之前的li，不包括第三个
$(‘div:visible‘) //选择可见的div元素
  • 函数过滤
$(‘div‘).has(‘p‘); // 选择包含p元素的div元素
$(‘div‘).not(‘.myClass‘); //选择class不等于myClass的div元素
$(‘div‘).filter(‘.myClass‘); //选择class等于myClass的div元素
$(‘div‘).first(); //选择页面中第1个div元素
$(‘div‘).eq(5); //选择角标是5的div元素
  • 选择集转移
$(‘div‘).prev(‘p‘); //选择div元素前面的第一个p元素
$(‘div‘).next(‘p‘); //选择div元素后面的第一个p元素
$(‘div‘).closest(‘div‘); //选择离div最近的那个div父元素
$(‘div‘).parent(); //选择div的一级父元素
$(‘div‘).children(); //选择div的所有子元素
$(‘div‘).siblings(); //选择div的同级元素
$(‘div‘).find(‘.myClass‘); //选择div内的class等于myClass的所有元素

三、jquery的动画animate方法分析

  • 使用方法：
$(‘#div1‘).animate({
  "width":300,
  "height":300
},1000,‘swing‘,function(){
  alert(‘done!‘);
});
  • 参数分析：
  • 第一个参数设置需要变化的属性，一般用来设置与尺寸相关的属性变化，如果改变的是颜色需要额外引入jquery.color的库。

注意1：属性名必须添加引号，多个属性用逗号隔开值设置如上，可以是300,"300"，"300px",程序可以识别。

  • 第二个参数代表动画的时间，以毫秒为单位。

  • 第三个参数为运动的方式，"swing"表示渐变，先慢后快，"linear"代表匀速运动。

  • 第四个参数表示动画执行完毕后需要执行的函数，可以不写这个参数。

注意2：如果只写第一个参数，则默认500ms，匀速运动，没有执行后动作。

扩展：点击按钮返回顶部页面的通用方法

$("html,body").animate({
    "scrollTop":0
    });

四、绑定点击事件click

  • 语法：
$(‘#btn1‘).click(function(){});

说明：参数可以是匿名函数，也可以是命名函数；但如果需要传参，则必须使用匿名函数。

  • 内部：使用$(this)代表当前点击的这个元素，如果使用this则是原生的对象。

  • 几乎所有的元素类型都可以使用click事件，点击触发，不一定是a、input标签。

五、页面滚动事件

  • 语法
$(window).scroll(function(){  
    ......  
})

与之相关的有两个常用的获取滚动距离的方法：

$(document).scrollTop(); //获取距离文档顶部的距离 
$(document).scrollLeft();//获取距离文档左边的距离

注意：滚动事件只有在文档的高度或宽度大于窗口的宽高时才会生效。

六、操作属性

  • 普通样式：

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

注意点1：设置样式时，如果只有一个样式，用逗号隔开，不是冒号；当多个样式设置时才用冒号。

注意点2：选择器获取的是一个选择集，那么获取到的样式为第一个标签的样式。

操作类名：

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

注意：addClass()方法中的括号内直接写类名，不再是选择样式。

操作html标签

// 取出html内容
var $htm = $(‘#div1‘).html();
// 设置html内容
$(‘#div1‘).html(‘<div>xxx</div>‘);

注意：取出时会将这个标签下的所有的html内容输出，包括标签本身。

只取文本内容

// 取出文本内容
var $htm = $(‘#div1‘).text();
// 设置文本内容
$(‘#div1‘).text(‘添加文字‘);

注意：设置文本内容时，加入标签是没有作用的，标签会被当做文本进行解析。

设置行内属性

// 取出按钮的值
var $value = $(‘input‘).attr(‘value‘);
// 设置按钮的值
$(‘input‘).attr({ "value":"按钮" });
// 取出图片的地址
var $src = $(‘#img‘).prop(‘src‘);
// 设置图片的地址和alt属性
$(‘#img‘).prop({src: "test.jpg", alt: "" });

注意：以上attr方法和prop方法使用方式一样；但是attr可以获取系统不存在的自定义的属性，而prop获取不到；所有的属性需要用引号包裹，否则报错。

操作尺寸

  • 获取元素尺寸
$("div").width() // 获取元素width
$("div").height() //获取元素height  
$("div").innerWidth() //获取包括padding的width
$("div").innerHeight() //获取包括padding的height  
$("div").outerWidth() //包括padding和border的width
$("div").outerHeight()//包括padding和border的height    
$("div").outerWidth(true)//包括padding和border以及margin的width
$("div").outerHeight(true)//包括padding和border以及margin的height
  • 获取浏览器可视区的宽高
$(window).width();
$(window).height();
  • 获取页面文档的宽度高度

$(document).width();
$(document).height();
  • 获取元素相对页面的绝对位置
var $n1 = $("div").offset();
$left = $n1.left;  # 获取相对页面左边的距离
$top = $n1.top;  # 获取相对页面上边的距离
  • 获取元素相对父类的绝对位置
var $n1 = $("div").offsetParent();
$left = $n1.left;  # 获取相对父类左边的距离
$top = $n1.top;  # 获取相对父类上边的距离

七、常用的特殊效果（动画）

  • 淡入、淡出和切换淡入淡出
 $(‘#div1‘).fadeIn(1000,‘swing‘,function(){
    alert(‘done!‘);
});  //淡入，事件1秒，渐变，参数和animate相仿
fadeOut() 淡出
fadeToggle() 切换淡入淡出

  • 参数：

  • 第一个参数代表动画的事件，单位为ms;
  • 第二个参数表示动画的方式，"swing"表示渐变，先慢后快，"linear"代表匀速运动。

  • 第三个参数表示动画完成后执行的函数。

注意：下面的动画方法和这里的参数一样。

  • 隐藏、显示和切换
hide() 隐藏元素
show() 显示元素
toggle() 切换显示状态，参数和上面相同
  • 展开、卷起和切换
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 展开和卷起切换

说明：以上的效果一般使用在点击事件中。

八、循环

  • 语法：
 $(‘div‘).each(function(i,j){
    ...
    })

说明：当一次获取了多个div时，如果需要对每个元素进行不同的有规律的操作，使用each方法，内部用$(this)代表循环到的那个元素。

  • 默认参数

循环方法中的function匿名函数中携带了两个默认参数，如上代码，i代表当前div的角标值，j代表当前div元素本身;这两个参数可以用任何变量表示。

  • 扩展：
    each循环和annimate动画嵌套不能改变颜色，如下：
$div.each(function (i,j) {
    $(this).animate({
         "background":"blue",
        });                   
    });

说明：该代码欲要实现每个div背景色逐个变蓝，实际不会起任何的作用；但对于宽高等属性是起作用的。

九、this关键字

$lis.click(function () {
    //此时的$(this)代表$lis选择集下的当前点击的$lis
    $(this).prevAll().each(function () {
        //$(this)代表点击的$lis.prevAll()，this代表的元素发生了改变
        $(this).animate({
        "left": 21 * $(this).index(),
        })
    })
})

总结：this 永远代表当前触发事件的那个对象。


以上是关于前端笔记----jquery入门知识点总结 （转）的主要内容，如果未能解决你的问题，请参考以下文章

jQuery 基础学习笔记总结

jquery事件使用方法总结 （转）

Web前端新人笔记之jquery入门

React Native 入门基础知识总结

TypeScript 学习笔记（十万字超详细知识点总结）

python前端jQuery入门