zoukankan      html  css  js  c++  java
  • js补充、jquery

    今日内容

    js补充

    标签属性操作

    // 设置
    setAttribute('属性名', '属性值')		// input_obj.checked = true; 添加选中效果
    // 获取
    getAttribute('属性名')		// console.log(inputobj.checked); 查看属性值
    // 删除
    removeAttribute('属性名')
    

    class类值操作

    var div1 = document.getElementById('d1');
    div1.className;  // 获取该标签拥有的类名
    div1.classList;  // 获取该标签拥有的类名的数组
    div1.classList.add('c2'); // 添加类值
    div1.classList.remove('c3'); // 删除类值
    div1.classList.toggle('c3');  // 有就删除,没有就添加
    var t = setInterval("div1.classList.toggle('c3')",1000);  //定时器添加
    

    css样式操作

    Document.getElementById(“head1”).style.color=red;
    

    js事件绑定

    btn_all.onclick = function () {
            li_list = ul.children;	// 获取的dom对象
            for (let li of li_list) {
                console.log(li.firstChild);
                li.firstChild.checked = true;	// js写法
                // $(li.firstChild).prop('checked', true);	// jquery写法:dom对象转化为jquery对象,然后通过prop设置属性
            }
        };
    

    HTML的label标签补充

    • 将 input 与 label 捆绑起来,让 html 知道你 input 的是什么数据
    • 有一种特效:点击输入框前的文字,可以跳转至框内。
    // 两种形式:
    	// 嵌套:
    	<label >用户名: 
            <input type="text" name="username" id="username"></label>
    	// for-id捆绑,非嵌套
        <label for="password">密码: </label>
        <input type="password" name="password" id="password">
    

    button补充

    • <button type="submit" id="btn">注册</button>
    • 这个形式的button按钮放在form标签里可以当做input-submit使用
      • 可以跟后端做交互
      • 且,这种内嵌形式的标签可以放图片!
    // 普通按钮,没有提交效果
    <input type="button">
    <button type="button">注册</button>
    
    // 下面这两个能够提交form表单数据
    <input type="submit" value='登录'>
    <button type="submit">注册</button>
    
    

    jQuery

    jquery引入

    // 外部网址引入
    	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    
    // 本地文件引入
    	<script src="jquery.js"></script>  
    //jquery.js本地文件路径
    
    

    jQuery初识

    // jquery对象
    	var d1 = $('#d1'); --> jQuery.fn.init [div#d1]
                                               
    // 原生dom对象
        var d = document.getElementById('d1');  --><div id='d1'></div>
    
    // jquery对象和dom对象之前不能调用互相的方法
    // 但jquery对象和dom对象可以 互相转换
    	d1[0] 		// jquery对象 --> dom对象
    	// d1.eq(0) 这种索引方式得到的就是jquery对象
    	$(d)		// dom对象 --> jquery对象
    
    • dom原生对象和jquery对象不能使用对方的方法
    • 两种代码可以混着使用,但对象、方法不能乱使用

    选择器

    id选择器

    $('#d1')  -- 同css
    

    类选择器

    $('.c1') 
    

    元素选择器

    $('标签名称') -- $('span')  
    

    组合选择器

    • 逗号连接,同时选择多种选择器
    $('#d1,.c2')
    示例:
    	html代码
    		<div id="d1"></div>
            <div class="c2">
                这是c2
            </div>
        css代码:
            #d1,.c2{
                background-color: red;
                height: 100px;
                 100px;
                border-bottom: 1px solid black;
            }
      
      jquery代码:
      	$('#d1,.c2').css('background-color','green');
      	$('#d1,.c2')[1];  -- 索引为1的dom对象
      	$('#d1,.c2').eq(1); -- 索引为1 的jquery对象
    
    
    • 原生dom对象.style.margin-left是不能用的,带-的要写成原生dom对象.style.marginLeft(驼峰体)

    • 同时设置css的多个值时,以字典形式

    层级选择器

    // HTML代码:
    <form> 
        <label>Name:</label> 
    	<input name="name" />
    	<div>
            <label>Newsletter:</label> 
    		<input name="newsletter" />
    	</div>
    </form> 
    <input name="none" />
    
    // jquery代码:
    	$("form input")
    
    // 结果
    	$("form input").change(function () {
            var a = $(this).val();
            console.log(a);
        });
    // 当改变前两个框时,都会打印框中输入的值;但最后一个框不会,因为它虽然也是input但它不在form内,不会被选择到。
    

    属性选择器

    // html代码:
        <div class="c1" xx="oo">
            这是啥!
        </div>
    // css代码:
        [xx]{color:red}
    
    input标签:  type='xx'   [type='xx']--对应的input标签
    $('[xx]').css('color','green');
    $('[xx="oo"]').css('color','pink');
    // 设置多个时,需要使用字典的形式。
    

    表单对象属性选择器disable

    :checked  // 找到被选中的input标签
    :selected  // 找被选中的select标签中的option标签
    :enabled  // 输入操作中各类框的默认设置,input(可以输入)、radio、checkbox(可以进行点击选择)、select(可以点开进行选择)
    :disabled  // 使得输入操作中各类框都禁止被点击(变灰)。
    

    表单选择器type

    $(":text") // 找到所有input标签
    // $(":input") 找到所有input标签
    // $(":password") 找到所有input且type=password的标签
    // $(":radio") 找到所有input且type=radio的标签
    // $(":checkbox") 找到所有input且type=checkbox的标签
    
    html代码:
    	<form action="">
            <input type="text" id="username">
            <input type="text" id="username2">
            <input type="password" id="pwd">
    
            <input type="submit">
        </form>
    jquery代码:找到所有的type=text的input标签
    	$(':text');
    
    

    筛选器方法

    html代码
        <ul>
    
            <li>谢一峰</li>
            <li class="c1">王子宇</li>
            <li>孙波</li>
            <li class="c2">石淦</li>
            <li>
                <span>白雪冰</span>
            </li>
            <li>方伯仁</li>
    
        </ul>
    
    
    parent()直系祖辈们
    var c = $('.c1');
    c.parent();
    c.parents();  // 直系的祖先辈
    c.parentsUntil('body');  // 往上找,直到找到body标签为止,不包含body标签
    
    children()亲儿子们
    var u = $('ul');
    u.children();  // 找到所有儿子标签
    u.children('.c1'); // 找到符合.c1选择器的儿子标签
    
    next() 下一个
    var c = $('.c1');
    c.next();
    nextAll();  // 下面所有兄弟
    c.nextUntil('.c2');  // 下面到某个兄弟为止,不包含那个兄弟
    
    prev()上一个
    var c = $('.c1');
    c.prev();
    c.prevAll();// 上面的所有兄弟,注意顺序是反的,从自己上一个到第一个
    c.prevUntil('.c1'); // 到上面某个兄弟为止,不包含那个兄弟,注意顺序都是反的
    
    siblings()同辈们
    c.siblings();  // 找到不包含自己的所有兄弟
    c.siblings('.c1');  // 筛选兄弟中有class类值为c1的标签
    
    find() 找后代
    $('li').find('span'); // 等同于css的li span选择器
    
    first()和last()和eq(索引值)
    $('li').first();  // 找所有li标签中的第一个
    $('li').last(); // 找所有li标签中的最后一个
    $('li').eq(0);  // 按照索引取对应的那个标签,索引从0开始
    $('li').eq(-1);  // 最后一个
     
    

    text() 和 html()

    • 本质:替换操作

    • 同js的innerText和innerHTML

    取文本:
    	c.text();  不带标签
    	c.html();  带标签
    设置文本:
    	c.text('文本');
    	c.html('文本'); -- 文本--"<a href=''>皇家赌场</a>"
    

    标签属性操作

    // 获取属性值
    console.log($("ul li:eq(1)").attr("title"));
    // 设置属性
    $("ul li:eq(1)").attr("title","不吃橘子");
    	// 值还可以设置为函数
    	$("ul li:eq(1)").attr("title",function(){ return this.value});
    // 设置多个值
    $("ul li:eq(1)").attr({title:"不喝橘子汁",value:"不是123"});
    // 删除属性
    $("ul li:eq(1)").removeAttr ("title");
    
    • 就这么简单, attr 其实就是原生js中 getAttribute 的简化实现, 而removeAttr 就是 removeAttribute 的简写了。
    • 使用 attr 对 checked 属性进行设置时,会出错,故 checked 属性就用 prop 设置就行

    css值操作

    • 某些html标签可以通过id来获取并添加css效果,(格式就像json对象)如下。
    • 调用对象是jquery对象
    let text_list = $('.tips');
    text_list.eq(1).css({'color': 'red'});
    
    比如一个id=a4的a标签
    $(this.getElementByXid("a4")).css({
                'border-color':'#FFFFFF #FFFFFF #2FA4E7 #FFFFFF',
                'border-bottom-style':'solid',
                'border-width':'0px 0px 2px 0px',
                'color':'#2FA4E7',
            });
    

    class类值操作

    
    html代码
    	<div class="c1">
        
    	</div>
    css代码:
    	   .c1{
                background-color: red;
                height: 100px;
                 100px;
            }
            .c2{
                background-color: green;
            }
    jquery
    $('div').addClass('c2');
    $('div').removeClass('c2');
    $('div').toggleClass('c2');
    示例:
    	var t = setInterval("$('div').toggleClass('c2');",500);
    

    val值操作 ***

    • 示例:
    示例:
    html代码:
    
        <input type="text" id="username">
        <input type="radio" class="a1" name="sex" value="1">男
        <input type="radio" class="a1" name="sex" value="2">女
        <input type="checkbox" class="a2" name="hobby" value="1">抽烟
        <input type="checkbox" class="a2" name="hobby" value="2">喝酒
        <input type="checkbox" class="a2" name="hobby" value="3">烫头
        <select name="city" id="s1">
         <option value="1">北京</option>
         <option value="2">上海</option>
         <option value="3">深圳</option>
        </select>
        <select name="lover" id="s2" multiple>
         <option value="1">波多</option>
         <option value="2">苍井</option>
         <option value="3">小泽</option>
        </select>
    	
    

    获取值

    获取值:
     文本输人框:$('#username').val();
     单选radio框:$('.a1:checked').val();
     多选checkout框:$('.a2:checked').val()是不行的;需要循环取值,如下:
     var d = $(':checkbox:checked');
     for (var i=0;i<d.length;i++){
     console.log(d.eq(i).val());
     }
     单选select框:$('#city').val();
     多选select框:$('#lover').val();
    // select的多选模式(multiple)虽然也是数组包裹的多个结果,但是查询结果时不需用for循环迭代输出,可以直接以数组形式输出。
    

    设置值

    设置值:
     文本输入框:$('#username').val('you are my love');
     单选radio框:$('.a1').val(['2']); // 注意内容必须是列表(由val()输出形式决定),写的是value属性对应的值
     多选checkout框:$('.a2').val(['2','3'])
     单选select框:$('#city').val(['1']);
     多选select框:$('#lover').val(['2','3'])
    

    点击事件绑定 ***

        $('.c1').click(function () {
            //$(this)表示的就是它自己
            $(this).css('background-color','green');
            // $('.c1').css('background-color','green');
        })
    

    鼠标悬浮事件

    当鼠标指针位于元素上方时时,改变元素的背景色:

        $("p").mouseover(function(){
          $("p").css("background-color","yellow");
        });
    

    定义和用法

    当鼠标指针位于元素上方时,会发生 mouseover 事件。

    该事件大多数时候会与 mouseout 事件一起使用。

    mouseover() 方法触发 mouseover 事件,或规定当发生 mouseover 事件时运行的函数。

    注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。请看下面例子的演示。

  • 相关阅读:
    第十七章 Mnesia: Erlang数据库
    第十六章 OTP概述
    第十五章 ETS和DETS:大数据的存储机制
    第十四章 套接字编程
    第十三章 对文件编程
    nginx启动、关闭、重启及常用的命令
    《山海经》异兽75种,附图
    Spring中Configuration的理解
    Spring Boot学习一之Spring Beans和依赖注入
    Spring Boot学习一之配置类及自动配置
  • 原文地址:https://www.cnblogs.com/Guoxing-Z/p/12318134.html
Copyright © 2011-2022 走看看