• jquery01


    什么是jquery?
    jquery是js的一个轻量级的库,也可以说是js的框架,帮助我们封装了很多的js的方法,方便我们使用。


    想要学习好jquery框架,就要明白以下两个对象:
    DOM对象(文档对象模型):指的是HTML页面的元素(标签),通过dom对象可以使用js中的一些属性和方法。
    jquery对象: 指的是通过jquery创建出来的,一些对象,通过jQuery对象可以使用jQuery Api中的一些方法。
    注意:
    DOM对象和jQuery对象,是不能相互调用的,列如DOM对象不能使用JQuery的方法,jQuery也不能使用js(javaScript)中的方法和属性!!!!!!!!
    所以呀,不要在脑海里,把js和jquery分开


    怎样使用jQuery?
    1.下载相应的文件库
    2.将jQuery的js文件拷贝到web的目录下
    3.页面引入js文件(jquery的js)
    <script type="text/javascript" src="js/jquery.min.js" /></script>
    4.页面中载入jQuery

    jQuery的入口的格式: (下面三个也叫做 等效代码 ,三个功能都是一样的)
    格式一:
    $(function(){ //常用
    alert();
    })

    格式二:
    JQuery(function(){
    alert();
    })

    格式三:
    window.JQuery(function(){
    alert();
    })

    $符号 等价于jQeury,$其实就是jquery库中定义的一个全局变量,用于表示jQuery这个对象。


    页面中启动jQeury,当页面中所有的元素都加载完成后,才会执行启动jQuery的代码,也就是说在$(function(){})里面写
    代码时,页面的所有的其他元素都已经出现了


    DOM 转换jQuery对象
    使用$(DOM对象)方式,可以DOM对象转换成JQuery对象 doucment.getxxx返回的就是dom对象
    jQuery对象的val()函数,等同于DOM对象的value属性
    一般情况下,在命名jQuery对象时,为了与DOM对象进行区分,习惯性的以$开头

    eg:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="/js/jquery.min.js" /></script>
    <script type="text/javascript">

    $(function(){
    var v_dom = document.getElementById("name"); //得到的是dom对象
    //alert(v_dom.value)
    //将DOM对象转换成jQuery
    var v_jquery = $(v_dom); //李银河
    //alert(v_jquery.value) //结果为 underfine 因为Jquery对象不能使用DOM中的属性value
    alert(v_jquery.val) //李银河

    })

    </script>
    </head>
    <body>
    <input type="text" value="李银河" id ="name">

    </body>
    </html>


    jQuery 转换DOM对象
    根据id获取jQuery对象和获得dom对象的格式:
    var v_jquery=$("#name"); // 得到的就是jquery对象
    var v_document.getElementById("name"); //得到的就是DOM对象

    j query获取对象的时候,其实是一个数组,数组的长度取决于jquery获取页面元素的个数,
    这些数组中存放的元素是dom对象
    v_dom=v_jquery[0] //将jquery对象转换乘DOM对象


    jquery对象里面其实是一个数组,数组里装的全是dom对象!!!!!!!!!!!!!!!


    $("标签") 将获取到所有指定标签的jquery对象。当然是多个对象,即为数组

    由于jquery对象为数组,所以具有返回的长度的属性length

    val $a = $("标签");
    alert($a.length+"多少个标签");

    $("#id标签").click(function(){ //为id的标签触发一个函数
    $($a[0]).css("background","green"); //改变第一个标签的背景颜色
    });



    jQuery提供了非常丰富的选择器
    什么是选择器:选择器就是获取页面元素的一种语法(工具),jQuery提供了丰富的元素选择器,
    可以方便快捷的获取页面中的元素对象


    选择器的类型:
    基本:
    #id
    <div id="myDiv"> //html代码
    $("#myDiv") //jQuery代码
    element
    .class
    .
    selector1,selector2,selectorN
    层级
    简单:
    :first
    :last
    :even 基数
    :odd 偶数
    <tr><td>嗨</td><tr> //html代码 0
    <tr><td>你好</td><tr> //html代码 1
    <tr><td>哈哈</td><tr> //html代码 2

    $("tr:odd") //匹配所有索引值为奇数的元素,从0开始

    :eq(index) 是不是等于
    :lt() 是不是小于
    :gt() 是不是大于

    内容
    可见性
    属性 (重点)
    [attribute] 匹配包含给定属性的元素
    子元素
    表单
    表单对象属性

    注意:
    id是不能重复的,如果页面中有多个id相同那么jQuery只会获取第一次出现的这个id作为jquery对象


    .class
    获取出来的jQuery是一个数组,如果直接使用jQuery会把数组中的第一个元素作为jQuery的对象使用


    <head>
    <title>Insert title here</title>
    <script type="text/javascript" src="/js/jquery.min.js" /></script>
    <script type="text/javascript">

    $(function(){
    alert($(".name").length) //2
    //获取出来的jQuery是一个数组,如果直接使用jQuery会把数组中的第一个元素作为jQuery的对象使用
    alert($(".name").val()) //张三
    //如果想获取李四的话,需要根据索引获取到指定元素的位置的dom对象后,再转换成jquery对象,进行使用
    alert($($(".name")[1]).val()) //李四
    })
    </script>
    </head>
    <body>
    <input type="text" class="name" value="张三"><br>
    <input type="text" class="name" value="李四">
    </body>


    选择器的类型之属性选择器------[attribute]
    eg:
    <script type="text/javascript">

    $(function(){
    alert($("[value]").length) //4 获取所有的value属性的元素
    alert($(".name[value]").length) //获取所有class为name并且拥有的value属性页面的属性为3个

    })
    </script>
    <body>
    <div class="name">
    <input type="text" class="name" value="李四">
    </div>
    <input type="text" class="name" value="王五">
    <input type="text" class="name" value="赵六">
    <a value="aa">连接</a>
    </body>


    jQuery——val属性/val(value)属性
    val是对表单元素的数据进行获取
    eg:
    可以获取文本框,按钮,复选框,下拉列表,单选按钮等等.....
    val() 获取
    val(value) 赋值,修改val的内容 eg: $("#name").val("李四")


    jQuery——html()
    html(value)
    text()
    text(value)
    html() 获取这个页面中所有的html代码
    text() 获取这个元素的文本内容,不包含页面中的html代码
    html(value) 设置一段html的代码到这里面,不带html的标签,(因为这是html编译后的内容)
    text() 设置一段代码文本,带html的标签(因为它对html的代码不编译)
    注意:
    html编译前,有标签和文本。
    html编译后,是没有标签,只有文本。


    jQuery的属性-------addClass/removeClass
    点击之后,div的颜色设置成了背景颜色

    eg:
    <style type="text/css">
    .div1{background-color:red}
    <style>
    <script type="text/javascript" src="/js/jquery.min.js" /></script>
    <script type="text/javascript">
    $(function(){
    alert("添加一个class到div")
    $("#div1").addClass("div1")

    alert("移除一个class")
    $("div1").removeClass("div1")
    })
    </script>
    </head>
    <body>
    <div id="div1">
    这是div1
    </div>

    </body>


    jQuery的属性-------attr
    attr() 方法设置或返回被选元素的属性和值。
    当该方法用于返回属性值,则返回第一个匹配元素的值。
    当该方法用于设置属性值,则为匹配元素设置一个或多个属性/值对。

    $(selector).attr(attribute) //返回属性的值:
    $(selector).attr(attribute,value) //设置属性和值:
    $(selector).attr(attribute,function(index,currentvalue)) //使用函数设置属性和值
    $(selector).attr({attribute:value, attribute:value,...}) //设置多个属性和值:

    参数: 描述:
    attribute 规定属性的名称。
    value 规定属性的值。
    function(index,currentvalue) 规定要返回属性值到集合的函数
    index - 接受集合中元素的 index 位置。
    currentvalue - 接受被选元素的当前属性值。


    eg:
    $("button").click(function(){
    $("img").attr("width","500");
    });


    jQuery的属性----------bind() 方法 向元素添加事件处理程序

    $(selector).bind(event,data,function,map)
    bind() 方法向被选元素添加一个或多个事件处理程序,以及当事件发生时运行的函数。

    eg:
    $("p").bind("click",function(){
    alert("这个段落被点击了。");
    });

     

    有的内容是自己平日积累的与工作上遇到的,有的是摘抄其他博主的精彩好文(会附上作者),愿大家共同成长。
  • 相关阅读:
    keep-alive
    关于前端的网络攻击
    Webpack
    https加密
    JS的变量提升
    浏览器
    http请求状态码
    Python程序结构-模块
    Python面向对象编程-继承
    Python语法(高级语法)- 命名空间和作用域
  • 原文地址:https://www.cnblogs.com/PinkPink/p/8385416.html
Copyright © 2020-2023  润新知