• jQuery方法介绍


    
    //jQuery与JavaScript在申明变量的区别:
    var $variable = jQuery对象
    var variable = DOM对象
    $variabl[0]     //jQuery对象转换成DOM对象
    //拿上面的例子举例,jQuery对象和DOM对象的使用:
    $("#i1").html();    //jQuery对象可以使用jQuery的方法
    $("#i1")[0].innerHTML;    //DOM对象使用DOM的方法
    

    jQuery基础语法

    $(selector).action()
    基本选择器
    语法结构

    // $(选择器).action(操作)
    $('p') // 标签选择器
    $('.c1') // 类选择器
    $('#d1') // id选择器
    
    $('p.c1') // 找含有c1样式类的p标签
    $('p#d1') // 找含有id是d1的p标签
    
    $('#d1,.c1,div') // 组合选择器
    
    $("x y");// x的所有后代y(子子孙孙)
    $("x > y");// x的所有儿子y(儿子)
    $("x + y")// 找到所有紧挨在x后面的y
    $("x ~ y")// x之后所有的兄弟y
    
    

    筛选器
    下一个元素:

    1 $("#id").next();    //筛选出下一个元素
    2 $("#id").nextAll();    //筛选出下面所有的元素
    3 $("#id").nextUntil("#i2");    //筛选出下面所有的元素,找到ID为i2终止
    

    上一个元素:

    $("#id").prev();    //筛选出上一个元素
    $("#id").prevAll();    //筛选出上面所有的元素
    $("#id").prevUntil("#i2");    //筛选出下面所有的元素,找到id为i2终止
    

    父亲元素:

    1 $("#id").parent();    //parent() 方法返回被选元素的直接父元素。
    2 $("#id").parentsAll();    //parentsAll()返回被选元素的所有祖先元素
    3 $("#id").parentsUntil();    //parentsUntil() 方法返回介于 selector 与 stop 之间的所有祖先元素。
    

    子元素和同级元素:

    $("#id").children();    //所有子元素
    $("#id").siblings();    //所有同级元素
    

    查找元素:

    $("id").find()
    

    1.表单筛选器
    js绑定事件的语法

    var
    xxxEle = document.getElementBy...
    xxxEle.on + 事件名 = function()
    {
    // 事件代码
    
    }	
    

    jQuery绑定事件的语法
    第一种语法结构:

    $(选择器).事件名(function()
    {
    // 事件代码
    })
    

    第二种语法结构 用处更广

    $(选择器).on('事件名', function()
    {
    // 事件代码
    })
    
    //实时监测input内部输入变化
    $('input').on('input',function () {
    	// 获取用户输入的内容
    	console.log($(this).val())
    })
    
    // 如何阻止标签后续的事件
    // 方式1
    // return false
    // 方式2
    // e.preventDefault()
    

    文档加载
    ​ js中

    window.onload = function()
    {
    // 在这里写你的JS代码...
    }
    

    jQuery中

    $(document).ready(function()
    {
    // 在这里写你的JS代码...
    })
    
    $(function(){
    // 你在这里写你的代码
    })
    

    上面两种了解即可 我们直接写在body最下方

  • 相关阅读:
    继续搞我的linux
    MySQL 开始
    我的小程序终于完工
    列表页 编辑页 删除页
    开发 记账小程序研发
    vue使用饿了么element-ui框架中的上传组件进度条无法使用,:on-progress钩子无法触发的原因
    移动端调试神器vConsole
    全栈高级web前端工程师的必经之路
    在vue中使用elementUI饿了么框架使用el-tabs,切换Tab如何实现实时加载,以及el-table表格使用总结
    GitBook的使用方式,快速创建网页文档
  • 原文地址:https://www.cnblogs.com/jinhongquan/p/11891671.html
Copyright © 2020-2023  润新知