• 小白- jquery 学习笔记


    一、jQuery语法

     1.基础语法:$(selector).action() ; 

      工厂函数$():将DOM对象转化为jQuery对象

    选择器 selector:获取需要操作的DOM 元素

    方法action()jQuery中提供的方法,其中包括绑定事件处理的方法

      2.jQuery 入口函数:

    1)搭建

    <scriptsrc="js/jquery-1.12.4.js"type="text/javascript"></script>

    2)执行

      $(document).ready(function(){

    // 执行代码});或者

    $(function(){

      // 执行代码});

    二、基础方法

     1.操作页面元素的方法

     元素添加样式:

     Query 对象.addClass([样式名]);

     设置元素样式

     css("属性","属性值") ;//一个css

    Css({"属性1":"属性值1","属性2":"属性值2"...}) ;//对个css

    设置元素的显示和隐藏

      $(selector).show( );

    $(selector).hide( );

     2.jQuery对象

     使用jQuery来获取元素对象: $(#title).html( ); 等同于  document.getElementById("title").innerHTML;

     DOM对象转化成jQuery对象

    使用$()函数进行转化:

    var txtName =document.getElementById("txtName");

    var $txtName =$(txtName);  

    在事件中经常使用$(this)this是触发该事件的对象

     

     jQuery对象转DOM对象

     jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象

     var $txtName =$ ("#txtName");

    var txtName =$txtName[0];

     通过get(index)方法得到相应的DOM对象    

    var $txtName =$("#txtName");

    var txtName =$txtName.get(0);  

    三、选择器获取元素

     1.了解:jQuery选择器类似于CSS选择器,用来选取网页中的元素

    2.分类

    一、基本选择器

     标签选择器   element

    类选择器     .class

     ID选择器     #id

    并集选择器   selector1,selector2,...,selectorN

    全局选择器    *

      二、层次选择器

     后代选择器   ancestor descendant

     Eg:$(".textRight p").css("color","red");

    子选择器     parent>child

    Eg:$(".textRight>p").css("color","red");

    相邻元素选择器  prev+next

     Eg:$("h1+p").css(text-decoration","underline");

     同辈元素选择器  prev~sibings

    Eg:$("h1~p").css("text-decoration","underline");

    三、属性选择器

    选取给定属性是以某些特定值开始的元素  [attribute^=value]

    选取给定属性是以某些特定值结尾的元素  [attribute$=value]

    选取给定属性是以包含某些值的元素      [attribute*=value]

    1.根据属性名获取元素

    属性选择器可以根据是否包含某属性来选取元素

    Eg:a标签带有class属性

     $("#news a[class]").css("background","#c9cbcb");

    2.根据属性值获取元素

    属性选择器可以根据属性的值来选取元素

    Eg:class属性值为hot

     $("#news a[class='hot']").css("background","#c9cbcb");

    属性选择器可以指定选取不等于属性是某个特定值的元素

    Eg:class值不等于hot

    $("#news a[class!='hot']").css("background","#c9cbcb");

    根据属性值包含特定的值获取元素

    属性选择器可以指定属性值以指定值开头的元素

    Eg:A标签href属性值以www开头

    $("#news a[href^='www']").css("background","#c9cbcb");

    属性选择器可以指定属性值以指定值结尾的元素

    a标签href属性值以html结尾

    $("#news a[href$='html']"). css("background","#c9cbcb");

    属性选择器可以指定属性值包含指定值的元素

    a标签href属性值包含“k2”的元素

    $("#news a[href*='k2']").css("background","#c9cbcb");

    四、过滤选择器

    1.定义:通过特定的过滤规则来筛选出所需的元素

    2.分类

    1)基本过滤选择器

    :eq(index)选取索引等于index的元素(index0开始

    :gt(index)  选取索引大于index的元素(index0开始

    :lt(index)  选取索引小于index的元素(index0开始

    :header   选取所有标题元素,如h1~h6

    :focus    选取当前获取焦点的元素

    :animated 选择所有动画

    五、可见性过滤选择器

    :visible  选取所有可见的元素

    $("p:hidden").show();

    :hidden 选取所有隐藏的元素

    $("p:visible").hide();

    四、事件

    1.常用事件分类

    基础事件

    鼠标事件

    键盘事件

    window事件

    表单事件

    复合事件

    鼠标光标悬停

    鼠标连续点击

    2.各事件方法

    1.鼠标事件

     鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件

     click( ) :$(selector).click(function)

     mouseover( ):$(selector).mousemove(function

    mouseout( ):$(selector).mouseout(function)

    mouseenter( ):$(selector).mouseenter(function)

    mouseleave( ):$(selector).mouseleave(function)

    2.键盘事件

    用户每次按下或者释放键盘上的键时都会产生事件,常用键盘事件

    keydown( ):$(selector).keydown(function)

    keyup( ):$(selector).keyup(function)

    keypress( ):$(selector).keypress(function)

    3.浏览器事件

     调整窗口大小时,完成页面特效

     $(selector).resize( );

    4.移除事件

    $(selector).unbind(event,function)

    参数event

    可选。规定删除元素的一个或多个事件

    由空格分隔多个事件值。

    如果只规定了该参数,则会删除绑定到指定事件的所有函数。

    Function

    可选。规定从元素的指定事件取消绑定的函数名。

    1.复合事件

    hover( )方法

    相当于mouseovermouseout事件的组合

    hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数

    mouseovermouseout,如果只指定一个函数,则 mouseenter mouseleave 都执行它

    hover(enter,leave);

    toggle( )方法

    切换元素的可见状态。

    toggle( fn1,fn2...)实现单击事件的切换,无须额外绑定click事件

    $(selector).toggle(speed,callback,switch)

    Speed

    规定元素从可见到隐藏的速度(或者相反)。默认为 "0"

    可能的值:

    • 毫秒 (比如 1500
    • "slow"
    • "normal"
    • "fast"

    在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。

    如果设置此参数,则无法使用 switch 参数。

    Callback 当动画 100% 完成后,即调用 Callback 函数除非设置了 speed 参数,否则不能设置该参数。

    Switch,布尔值,规定 toggle 是否隐藏或显示所有被选元素。

    • True - 显示所有元素
    • False - 隐藏所有元素

    toggleClass()

        class

    对设置或移除被选元素的一个或多个类进行切换。

    必需。规定添加或移除 class 的指定元素。

    如需规定若干 class,请使用空格来分隔类名。

    Switch  可选。布尔值。规定是否添加或移除 class。

     

     

     

     

     

  • 相关阅读:
    Objective-C 复合
    useContext的使用
    context的使用
    redux使用(二)
    redux使用(一)
    React class & function component 的区别
    combineReducers使用
    gnvm使用(未使用成功)
    React相关知识点
    eslint简单使用&&eslint与webpack结合使用
  • 原文地址:https://www.cnblogs.com/ttg-123456/p/11196932.html
Copyright © 2020-2023  润新知