zoukankan      html  css  js  c++  java
  • jQuery

    使用jQuery要引用jQuery文件

    <head></head>写在头里

    <head>
        <script src="jquery-3.3.1.min.js"></script>
    </head>
    

     一、JS和jQuery中选取元素

    js中选取元素

    <body>
    	<div></div>
        <span id="aa"></span>
        <p class="bb"></p>
        <input  type="button" name="cc" value="ff"/>
    </body>
    <script type="text/javascript">
    	var a = document.getElementById("aa");//根据id获取
    	var a = document.getElementsByClassName("bb");//根据class获取
    	var a = document.getElementsByName("cc");//表单元素根据name获取
    	var a = document.getElementsByTagName("div");//根据标签名查找
    </script>
    

     jQuery中获取元素

    <body>
    	<div>
        	<a id="dd"></a>
        </div>
        <span id="aa"></span>
        <p class="bb"></p>
        <input  type="button" name="cc" value="ff"/>
    </body>
    <script type="text/javascript">
    	var a = $("#aa");//根据id找
    	var a = $(".bb");//根据class找  class找到的是数组所以可以取索引
    	alert(a[0]);
    	alert(a[1]);
    	var a = $("div");//根据标签名查找 找到的是数组所以可以取索引
    	alert(a[1]);
    	var a = $("[name='cc']");//根据属性查找
    	var a = $("[id='aa']");//根据属性查找
    	var a = $("div").children("#dd");//取子类
    </script>
    

     二、操作内容

    js操作内容

    <body>
    	<div>
        	<a id="dd"></a>
        </div>
        <span id="aa"><a>你好大家</a></span>
        <div class="bb"><p>大家好</p></div>
        <input  type="button" name="cc" value="ff"/>
    </body>
    <script type="text/javascript">
    	var a = document.getElementById("aa");
    	var b = document.getElementsByClassName("bb");
    	var c = document.getElementsByName("cc");
    	a.innerHTML = "<p>你好大家</p>"//修改代码和文字
    	b.innerText //修改文字信息
    	c.value//修改表单元素的value值
    </script>
    

     jQuery操作内容

    <body>
    	<div>
        	<a id="dd"></a>
        </div>
        <span id="aa"><a>你好大家</a></span>
        <div class="bb"><p>大家好</p></div>
        <input  type="button" name="cc" value="ff"/>
    </body>
    <script type="text/javascript">
    	var a = $("#aa");
    	var b = $(".bb");
    	var c = $("[name='cc']");
    	a.html("<p>你好大家</p>")//修改代码和文字//取值()为空
    	b.text("hao")//修改文字信息     取值()为空
    	c.val("hello")//修改表单VALUE   
    </script>
    

     三、操作属性

    js操作属性

    <body>
    	<div>
        	<a id="dd"></a>
        </div>
        <span id="aa"><a>你好大家</a></span>
        <div class="bb"><p>大家好</p></div>
        <input  type="button" name="cc" value="ff"/>
    </body>
    <script type="text/javascript">
    	var a = document.getElementById("aa");
    	var b = document.getElementsByClassName("bb");
    	var c = document.getElementsByName("cc");
    	a.setAttribute("","")//设置属性
    	a.removeAttribute("")//移出属性
    	a.getAttribute("")//获取属性
    </script>
    

     jquery操作属性

    <body>
    	<div>
        	<a id="dd"></a>
        </div>
        <span id="aa"><a>你好大家</a></span>
        <div class="bb"><p>大家好</p></div>
        <input  type="checkbox" name="cc" value="ff"/>
    </body>
    <script type="text/javascript">
    	var a = $("#aa");
    	var b = $(".bb");
    	var c = $("[name='cc']");
    	a.attr("","")//设置属性
    	a.removeAttr("aa")//移出属性
    	a.attr("aa")//获取属性
    	c.prop("checked",true)//true是选中,false是不选中
    </script>
    

     四、操作样式

    js操作样式:只操作内联样式

    <body>
    	<div>
        	<a id="dd"></a>
        </div>
        <span id="aa" style="background-color:#0FF; 20px; height:30px;"><a>你好大家</a></span>
        <div class="bb"><p>大家好</p></div>
        <input  type="button" name="cc" value="ff"/>
    </body>
    <script type="text/javascript">
    	var a = document.getElementById("aa");
    	var b = document.getElementsByClassName("bb");
    	var c = document.getElementsByName("cc");
    	a.style.backgroundColor = "red"//修改背景色
    </script>
    

     jQuery操作样式:可以操作内嵌样式

    <body>
    	<div>
        	<a id="dd"></a>
        </div>
        <span id="aa"><a>你好大家</a></span>
        <div class="bb" ><p>大家好</p></div>
        <input  type="checkbox" name="cc" value="ff"/>
    </body>
    <script type="text/javascript">
    	var a = $("#aa");
    	var b = $(".bb");
    	var c = $("[name='cc']");
    	a.css("","")//设置css样式
    	a.css("width")//获取css样式
    	b.eq(0).addClass("")//增加class数组中索引为0的样式
    	b.addClass("")//增加样式
    	a.removeClass("")//移出样式
    </script>
    
  • 相关阅读:
    使用汇编语言编写注入代码
    代码注入
    DLL卸载
    DLL注入
    nginx图片防盗链
    apache字体文件跨域、路由去掉index.php
    windows下访问虚拟机中配置的虚拟主机
    deepin docker 安装
    Deepin 配置ssh
    下拉框多选
  • 原文地址:https://www.cnblogs.com/navyouth/p/8336574.html
Copyright © 2011-2022 走看看