今天学习了jQ,jQ对js的帮助很大，菜鸟教程上也有属性。可以查看

js 和 jquery主要的区别 在 dom
    想用jquery  必须先引入（顺序问题）
        先css 再js：      先框架css再自己css 先jquery 再框架 在自己

鼠标移动到div和修改ipt中弹窗

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>鼠标移动到div和修改ipt中弹窗</title>

<script type="text/javascript">

    function show(){

        /*var str=document.getElementById("a").value;

        alert(str);*/

        alert("aaa");

    }

</script>

</head>

<body>

<form action="#" onSubmit="show()">

    <input type="text" value="aa" onSelect="show()">

    <input type="text" value="bb" onChange="show()">

    <input type="text" value="cc" onFocus="show()">

    <input type="text" value="dd" onBlur="show()" id="a">

    <input type="submit" value="提交">

</form>

<div style="width: 200px;height: 200px;background: red" onMouseOver="show()"></div>

</body>

</html>

JQ选择器

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>JQ选择器</title>

<!--引入jQuery的js文件-->

<script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>

</head>

<body>

<p id="p1">a</p>

<p class="p2" align="center">b</p>

<p class="p2">c</p>

<p class="p2">d</p>

<div>

    <p>e</p>

    <p>f</p>

</div>

<input type="text" value="aaaaaaaa">

</body>

<script type="text/javascript">

    /*id选择器*/

    /*var p1=$("#p1");

    alert(p1.html());*/

    /*class选择器*/

    /*var arr=$(".p2");

    alert(arr.length);*/

    /*元素选择器*/

    /*var arr=$("p");

    alert(arr.length);*/

    /*父子关系选择器*/

    /*var arr=$("div p");

    alert(arr.length);*/

    /*属性选择器*/

    /*var obj=$("[align='center']");

    alert(obj.html());*/

    /*如果得到的是数组，则用jqDom.eq(下标)*/

    /*alert($(".p2").eq(0).html());*/

    //获取js对象   js->jquery   $(jsDom)

    /*var p1=document.getElementById("p1");

    alert($(p1).html());*/

    //获取jQuery对象 jquery->js   $('div')[0]    $('div').get(0)

    /*alert($(".p2").get(1).innerHTML);*/

    //给非表单元素赋值

    /*$("#p1").html("你好");*/

    //获取表单的value值

    /*alert($("input").val());*/

    //给表单元素赋值

    $("input").val("bbbbbbbb");

</script>

</html>

JQ获取元素属性

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>JQ获取元素属性</title>

</head>

<body>

    <input type="text" value="aaa" id="in" aaa="bbb">

</body>

<script type="text/javascript">

    //1.获取元素属性值：元素对象.属性名

/*    var v=document.getElementById("in").value;

    alert(v);*/

    //2.获取元素属性值：元素对象.getAttribute("属性名");

    /*var inp=document.getElementById("in");

    var v=inp.getAttribute("aaa");

    alert(v);*/

    //给元素属性赋值

    var inp=document.getElementById("in");

    inp.setAttribute("value","cccc");

</script>

</html>

CSS鼠标变小手

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>CSS鼠标变小手</title>

<style>

    #d1{

        height:200px;

        width: 200px;

        background: red;

    }

    #d1:hover{

        /*鼠标变小手*/

        cursor:pointer;

    }

</style>

</head>

<body>

    <div id="d1"></div>

</body>

</html>

JS通过名字找到属性

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>JS通过名字找到属性</title>

<script type="text/javascript">

    window.onload=function(){

//        通过id属性找元素(得到y一个元素对象)

        var doc=document.getElementById("p")

    //     通过class属性找元素(得到一个数组)

    var arr=document.getElementsByClassName("p1")

    alert(arr[1].innerHTML)

//    通过元素名称找元素(得到一个数组)

    var arr2=document.getElementById("p")

    }

;

    </script>

</head>

<body>

<p class="p1">a</p>

<p class="p1">b</p>

<p class="p1">c</p>

<p class="p">d</p>

</body>

</html>

JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器的更多相关文章

  1. JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）

    JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...

  2. 用css 添加手状样式,鼠标移上去变小手,变小手

    用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmouseover="this.style. ...

  3. 用css 添加手状样式,鼠标移上去变小手

    用css 添加手状样式,鼠标移上去变小手,变小手 用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmo ...

  4. js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...

  5. JQ获取元素属性值

    最近在学习JAVA Web,自己也是做个下列表左右选择的小案例. 获取某个元素的属性值一直以为是要调用atrr方法,不过好像获取元素的数组形式再遍历每个元素的时候想获取到它的属性值用attr方法有问题 ...

  6. JS获取元素属性、样式getComputedStyle()和currentStyle方法兼容性问题

    1. getComputedStyle()  方法获取到的是经过计算机/浏览器计算后的样式 getComputedStyle($("#div")).width; 兼容性:IE6 7 ...

  7. css 添加手状样式,鼠标移上去变小手

    cursor:pointer, 简单实用. 前端工作一年多,竟然没有博客.说出来别人都要笑话,这是一个新的开始.

  8. robotframework，移动端（小程序）自动化，获取元素属性值的方法

    如下图,获取商品价格 属性值显示在content-desc内 传统的get text指定是无法获得到这个元素指定属性的值的 只有通过使用AppiumLibrary.get element attrib ...

  9. JQ方法大全

    Dom:Attribute:$("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"te ...

随机推荐

  1. C语言采用socket实现http post方式上传json数据

    1.按照HTTP协议发送请求: http POST 报文格式 http 报文是面向文本的. 报文分为:请求报文和响应报文 请求报文由:请求行,请求头部,空行和请求数据四个部分组成. <1.请求行 ...

  2. 破解某PDF转换器产品

    本文章纯属出于作者自己对技术的探索,绝不用于商业用途(虽然网上已经能够下载到注册机了) 软件功能就不多说了,PDF转换成WORD格式,对于学生党来说也算是神器了吧,那么我们今天就用自己的办法来获得这款 ...

  3. lsof 命令用法详解

    lsof 命令用法详解 作用 用于查看你进程开打的文件,打开文件的进程,进程打开的端口(TCP.UDP).找回/恢复删除的文件.是十分方便的系统监视工具,因为lsof命令需要访问核心内存和各种文件,所 ...

  4. python识别图片中的代码。

    在看并发编程网的时候,有些示例代码是以图片的形式出现的,要是此时自己想复制下来的话,只能对着图片敲了,很不爽,于是搜了一下识别图片的网站,有! 把图片上传上去解析,下来txt文本,打开一看,大部分能解 ...

  5. Android四大组件之Service --- 如何启动和停止Service？

    启动和停止方法主要是通过Intent来实现 以上一篇中的ServiceTest项目为例来启动和停止MyService这个服务 首先修改activity_main.xml中的代码,如下所示:<Li ...

  6. 深入java----垃圾回收

    Java和C++之间有一睹内存动态分配和垃圾收集技术所围成的“高墙”,墙外面的人想进去,墙里面的人想出来.-------<深入理解JVM虚拟机> 补充:在无用对象判断这两种方法中,都是靠对 ...

  7. Python 12306登陆详细分析及操作

    前面的话: 1.第一次尝试爬虫,登陆12306,有不足的地方,望大家留言告知,谢谢. 2.前面引入了一个requests模块,我不多说,大家都知道干啥的.还有config是我的一个配置文件,因为其中涉 ...

  8. python模块和包（模块、包、发布模块）

    模块和包 目标 模块 包 发布模块 01. 模块 1.1 模块的概念 模块是 Python 程序架构的一个核心概念 每一个以扩展名 py 结尾的 Python 源代码文件都是一个 模块 模块名 同样也 ...

  9. vue项目中，使用vue-awesome-swiper插件实现轮播图

    一.安装 npm install vue-awesome-swiper 二.项目中引入 import 'swiper/dist/css/swiper.css'import {swiper,swiper ...

  10. [Hive安装问题]

    启动Hive时出现: Exception in thread "main" java.lang.RuntimeException: java.lang.IllegalArgumen ...