zoukankan      html  css  js  c++  java
  • jquery学习笔记

    jQuery与js的却别就是:js是自己定义函数,然后去调用;jquery就是定义函数,在函数中定义谁的功能是什么。
        jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
        实例中的所有 jQuery 函数位于一个 document ready 函数中:这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作,
            $(function(){                                        $(document).ready(   function(){    //执行代码});
            $("p").click(function{
            $("p").hide();
            });
            });
        jquery  选择器  允许您对html元素组或单个元素进行操作。基于元素的id,类,类型,属性,属性值等“查找”(或选择)元素。
                jquery中所有的选择器都得一美元符号开头:$()。一般是一个事件触发后,会带来什么样的功能-function
            
        jQuery 的事件           --事件的触发会有功能的实现,一般都是事件后面跟功能(function(){})
                鼠标事件: click   dblclick  mouseenter   mouseleave
                键盘事件: keypress  keydown  keyup  hover
                表单事件: submit  change  focus blur  
                文档/窗口事件: load  resize  scroll  unload
                    
                    语法 show  与 hide 都是有参数的 , (speed,callback)
                    有一个函数可以代替  show 与 hide  ,是 toggle   (speed,callback)
                    
        jQuery 效果  ---淡入淡出
                fadeIn()   用于淡入已隐藏的元素
                fadeOut()   用与淡出可见的元素          淡入淡出都是基于屏幕来说的
                fadeToggle()  方法可用于淡入淡出的效果
                fadeTo()  方法允许渐变为给定的不透明度(值介于0和1之间)
        
        jQuery 效果  ----滑动
                slideDown()       向下滑动元素
                slideUp()            向上滑动元素
                slideToggle()        同时实现向上或者向下滑动元素
        
        jQuery  效果 ----动画
                使用的函数是   animate()   方法中可以有多个参数
                
        jQuery  停止动画
                使用幻术 stop()     使用与所有jquery效果函数,包括 滑动,淡入淡出,和自定义动画。
                
        jQuery callback
                callback函数在当前动画100%完成之后执行
                这个函数没有具体的函数名,只是在使用 其他动画函数(function)中添加参数来实现
                
        jQuery  ---链(chaining)
                jquery可以把动作方法连接在一起,可以允许在一条语句中运行多个jquery方法。
                
        jQuery 获取内容和属性
                jquery拥有可操作html元素和属性的强大方法。就是操作DOM的能力。
            
            获得的内容 ————  包括   
                text()   设置 或 返回 所选元素的文本内容            
                html()   设置 或 返回 所选元素的内容(包括html标记)
                val()。  设置 或 返回 表单字段的值              $("#btn1").click(function(){alert("值为: " + $("#test").val());});
            获取属性 ----attr()    用于获取 或者  设置 属性值。
                
        jQuery 设置内容和属性
                还是使用上面三个函数,区别就是 所用的函数中是否有参数 ,有参数就是进行设置,没有参数就是进行获取。
     
        jQuery ---添加元素
                添加新内容的四个方法。
                append()            在被选元素的结尾插入内容(让在该元素的内部)
                prepend()          在被选元素的开头插入内容
                after()            在被选元素之后插入内容    
                before()            在被选元素之前插入内容
            区别 ::append/prepend   是在选择元素内部嵌入
                    after/before   是在元素外面追加
                    
        jQuery    ---移除元素
                remove ()  --删除被选元素(及其子元素)      当然 remove 方法中 可以接受参数,允许对被删除元素进行过滤
                empty( )   -- 从被选元素中删除子元素            empty 方法 不可以进行过滤
                
        
        jQuery   ----获取并设置css类
                addClass()   --向被选元素添加一个或多个类
                removeClass()  --从被选元素删除一个或多个类
                toggleClass()   --对被选元素进行添加或者删除类的切换操作
                css()            --设置或返回样式属性,通过参数来设置或者获取属性
        jQuery 的遍历      
                遍历就是获取指定元素的父类或者子类。
            过滤 ---
                first()           选取第一个元素
                last()            选取最后一个元素
                eq()                返回被选元素中带有指定索引号的元素,索引号从 0 开始
               其他的过滤方法,比如 filter()和not()允许选取匹配或不匹配某项指定标准的元
        jQuery  ---AJAX load() 方法   load方法从服务器加载数据,并把返回的数据放入被选元素
                load(url,data,callback)url 是必须的参数,data与callback是可选的参数
                                            也可以把url中的某一个标签加载进去。
                    
                ajax 的get()和post()方法
                    get(url,callback)     url是必须的,callback是可选的,是请求成功后所执行的函数名。
                    post(url,data,callback)  url的必须的,其他的参数都是可选的。
                    
        在页面上使用jQuery时,如果其他的框架也使用 $ 符号作为简写,发生了冲突,会导致脚本停止运行
            jQuery会使用 noConflict() 方法释放对 $ 符号符的控制。
            
            解决冲突的问题:使用jQuery的去全名去代替简写        jQuery(document).ready(function(){
                            创建自己的简写                       var jq = $.noConflict();   jq(document).ready(function(){
                            将 $ 符号作为变量传递给ready方法,可以在函数内使用 $ 符号,但是在函数外,必须使用全名--jQuery 。  jQuery(document).ready(function($){
                
     
    在加载页面的同时利用js或者jquery进行后台的数据查询
    可以用 jquery ajax 异步 实现
    $.ajax({
    type: "POST",
    url: 请求路径 如 “/asmx/1.asmx/HelloWorld”,
    data: 传输参数 要看请求类型 每个返回参数类型不同参数格式不一样,
    dataType: 返回参数类型 如 "html、json "等,
    beforeSend: function (XMLHttpRequest) {
    $("#divlist").html("正在加载数据");
    }    
     
    ***jQuery中实现点击效果的四种不同的写法(jquery中没有onclick事件)
            1.$(".tab").click(function () {  })
            2.$(".tab").on("click",function () {  })
            3.$(document).on("click", ".tab",function () {  })
            4.使用<onclick="">触发函数
    四种方法的可行度:3>2>1>4
    jquery中的jQuery.on()同时绑定多个事件的写法
                $(".class").on({
               click:function(){
                   //回调
               },
               mouseover:function(){
                   //回调
               },
               mouseout:function(){
                   //回调
               }
            })
     
  • 相关阅读:
    Node.js连接MySQL数据库及构造JSON的正确姿势
    Lyx输入中文与代码高亮
    查看文件编码 + 查看文件扩展名 + 文件编码转换
    系统重装/装Anaconda后,Windows开始菜单缺少快捷方式解决方案
    Python动态网页爬虫-----动态网页真实地址破解原理
    多线程爬虫
    openpyxl基本操作
    BitMap原理
    Trie(前缀树/字典树)及其应用
    tensorflow和pytorch教程
  • 原文地址:https://www.cnblogs.com/zylong1220/p/11833326.html
Copyright © 2011-2022 走看看