博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
快速学习jq
阅读量:4876 次
发布时间:2019-06-11

本文共 1969 字,大约阅读时间需要 6 分钟。

     jq的风靡是我们都看的到的,之所以它会在众多的框架中脱颖而出,必定有其优秀之处,我在下面文章中跟大家分享一下jq中工作中经常遇到的API总结,相信它可以让一个不懂jq的人迅速的掌握到jq的强大,好了,废话不多说,一点点看

    

第一种:

$(function(){

});

第二种:

$(document).ready(function(){

});

第三种:

jQuery(function(){

});

需要注意的是

js和jq的入口函数不同点:

    1:js的入口函数只能有一个,如果写了多个只执行最后一个

    2:jq的入口函数可以写多个,并且顺序执行

2 Dom对象和jq对象是不能通用方法属性的,必须要通过转化才可以 

    dom转jq:$(ele)

    jq转dom: 1、$(‘div’).get(0)  2、$(‘dv’)[0]

 

3 jq控制css属性

    使用.css()方法来实现

语法:

1、     单属性修改: .css(‘属性名’,’属性值’);

2、     多属性修改: .css({‘属性名1’:’属性值1’,’属性名2’:’属性值2’…..});

3、     属性获取: .css(‘属性名’);

 

 4  jq控制标签属性

 只要使用.attr()方法即可,它的语法和css()的语法完全一样

 

 5 jq设置html内容

    使用.html()方法即可

    获取html内容: $(‘span’).html();

    设置html内容: $(‘span’).html(‘呵呵’);

 

 6 jq的简单动画

   

对角线动画:

1、     show() 显示

2、     hide()  隐藏

3、     toggle() 切换

注意:对象线动画如果不添加时间参数,就没有动画效果哦

滑动动画:

1、slideUp()    隐藏

2、slideDown()  显示

3、slideToggle()  切换

注意:如果控制滑动动画的元素没有宽高属性,那么jq就会把动画改为对角线动画来展示

注意:时间参数可以写数字,也可以写英文单词字符串-fast、slow、normal

 

7 jq的基本选择器

$("#id") : id选择器,document.getElementById("id");

$(“div”) :标签选择器

$(".myClass") : 类选择器,返回所有class="myClass"的元素

$("*") : 返回所有元素,多用于结合上下文搜索

$("div,span,p.myClass") : 多条件选择器,返回所有查到的元素

$(‘.ul01 .li02’) :后代选择器

$(‘.ul01 .li02>li’):表示子代选择器 , 只能选择第一级的后代。

$('.ul01 .li02+li'):表示选中指定标签后面紧挨着的一个同级标签

$('.ul01 .li02~li'):表示选中指定标签后面的所有同级的某种标签

 

 8  过滤选择器

 过滤选择器的特点是在小括号中写冒号

         :gt(2)    大于2

         :lt(2)     小于2

         :not(.class01)  排除某些元素

         :eq(1)     选索引值

         :first      选第一个

         :last       选最后一个

9   筛选选择器

选父级元素   .parent()

选儿子级元素 .children()

选兄弟级元素 .siblings()

 10  hover事件

语法格式:

    .hover(function(){

         //这里是鼠标移入执行的代码

},function(){

         //这里是鼠标移出执行的代码

})

注意:如果只写了一个匿名函数,就代表移入和移出执行的是同样的代码

 

11 jq动画排队机制

在jq中如果多次触发动画,那么这些动画就会排队等待执行,如果不想要这个排队效果,我们就在动画之前添加一个.stop()方法即可

             $('.demo>li').hover(function(){

                  //鼠标移入和鼠标移出执行的是一样的代码

                  $(this).children('ul').stop().slideToggle(); 

             })

 

 12  jq中的索引值

    直接使用.index()即可获取索引值

 

13  jq的链式编程

在jq中,如果是针对同一目标进行的操作,就可以使用“点“语法来实现连续书写代码

$('.conCenter li').eq($(this).index()).siblings().hide()

 

14、jq中控制类

addClass(‘myClass’)     添加类名

removeClass(‘myClass’)  删除类名

hasClass(‘myClass’)     判断是否含有某一个类名

toggleClass(‘myClass’)   切换某一个类名

 

转载于:https://www.cnblogs.com/LittleBonnie/p/4909158.html

你可能感兴趣的文章
Javascript通过className选择元素
查看>>
关于MySQL 通用查询日志和慢查询日志分析(转)
查看>>
自动化测试框架的搭建
查看>>
小学期--第三篇
查看>>
HDOJ 1864 最大报销额
查看>>
POJ 2823 Sliding Window(单调队列)
查看>>
HDU6130 签到题 打表
查看>>
HDU 3977 斐波那契循环节
查看>>
hashset hastable dictionary concurrentdictionary区别
查看>>
【转】PBR基于物理的渲染
查看>>
openlayers4官方例子学习---DAY2
查看>>
新的开始 | 我的第一篇博客
查看>>
第四章心得
查看>>
jQuery 获取父窗口的元素 父窗口 子窗口(iframe)
查看>>
VM安装OracleLinux
查看>>
如何提高PHP应用的性能
查看>>
Python-----带参数的装饰器以及补充
查看>>
用asp.net MVC3 简单实现毕业设计 (强转)
查看>>
ADB抓取日志和日志过滤
查看>>
20941输入输出系统
查看>>