JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器
今天学习了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选择器的更多相关文章
- JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...
- 用css 添加手状样式,鼠标移上去变小手,变小手
用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmouseover="this.style. ...
- 用css 添加手状样式,鼠标移上去变小手
用css 添加手状样式,鼠标移上去变小手,变小手 用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmo ...
- js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...
- JQ获取元素属性值
最近在学习JAVA Web,自己也是做个下列表左右选择的小案例. 获取某个元素的属性值一直以为是要调用atrr方法,不过好像获取元素的数组形式再遍历每个元素的时候想获取到它的属性值用attr方法有问题 ...
- JS获取元素属性、样式getComputedStyle()和currentStyle方法兼容性问题
1. getComputedStyle() 方法获取到的是经过计算机/浏览器计算后的样式 getComputedStyle($("#div")).width; 兼容性:IE6 7 ...
- css 添加手状样式,鼠标移上去变小手
cursor:pointer, 简单实用. 前端工作一年多,竟然没有博客.说出来别人都要笑话,这是一个新的开始.
- robotframework，移动端（小程序）自动化，获取元素属性值的方法
如下图,获取商品价格 属性值显示在content-desc内 传统的get text指定是无法获得到这个元素指定属性的值的 只有通过使用AppiumLibrary.get element attrib ...
- JQ方法大全
Dom:Attribute:$("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"te ...
随机推荐
- 小程序获取openid 出现null,{"errcode":40163,"errmsg":"code been used, hints: [ req_id: WNUzlA0105th41 ]"}
//根据微信提供的接口,请求得到openid和session_id public class UserInfoUtils { private String getKeyURL="https: ...
- 外贸站全球网速测试+免费CDN使用教程
关于外贸网站速度测试,以前一全老师(www.yiquanseo.com)也讲到过,但是在那篇文章中推荐给大家的两个测试网站(https://developers.google.com/speed/pa ...
- FastReport预览后直接邮件发送
- java导出Excel定义导出模板
在很多系统功能中都会有Excel导入导出功能,小编采用JXLS工具,简单.灵活. JXLS是基于 Jakarta POI API 的Excel报表生成工具,它采用标签的方式,类似于jsp页面的EL表达 ...
- Tensorflow实战系列之四：
这个是第四篇,打算写一些语义分割的内容实战.
- ecplise的Jsp红叉错误消除
当做项目的时候,引入的jsp文件可能会出现红叉的情况,重新输入任意字符再删除,保存后恢复正常. 原因是由于jsp中的方法还没有实现,等方法写完之后,再使jsp文件重新处于编译状态,保存后恢复正常.
- cocos Studio使用问题
使用的时候最好是同一套资源饭在一个文件夹下,或者新建的文件和资源类,一个资源分一个产生的层文件
- 前端测试时，常用SQL
与后台联调页面,经常会验证数据正确性,这时候就需要会点SQL语句,以下是常用的SQL: 单表查询 select * from table 条件查询 select * from table where ...
- centos 7 安装
一直很喜欢centos,5.6.7三个大版本都有用过. 这次重新在笔记本上安装centos 7. 先是下载了最新的unetbootin,用它来制作了U盘安装.unetbootin很好用,可以自动下载然 ...
- 如何将本地的文件上传到你的github仓库中(首次流程)
1.(先进入项目文件夹,右键项目文件夹,选择git Bash)通过命令 git init 把这个目录变成git可以管理的仓库 git init 2.把文件添加到版本库中,使用命令 git add . ...