jQuery与javascript
jQuery 是一个 JavaScript 库,jQuery 极大地简化了 JavaScript 编程。
javaScript(js)和jQuery(jq) 都是找元素、操作元素
Dom操作的区别:
jq必须调用文件:jquery-3.2.1.min.js
1、操作元素;
js:
docunment.getElementById("id");//根据id找,最多找一个;
var a =docunment.getElementById("id");//将找到的元素放在变量中;
docunment.getElementsByName("name");//根据name找,找出来的是数组;
docunment.getElementsByTagName("name");//根据标签名找,找出来的是数组;
docunment.getElementsByClassName("name")// 根据classname找,找出来的是数组;
jq:$(选择器)
选择器是基于已经存在的 css选择器,除此之外,它还有一些自定义的选择器。
$("img")//提取img标签的元素
$("#aa")//提取id为aa的元素
$(".bb")//提取class为bb的元素
/*自定义*/
$(this)//提取当前html的元素
$("p:first")//选取第一个 <p> 元素
$("[href]")//选取带有 href 属性的元素
2、操作内容:
Js对象:单用表示提取,加等号表调用
jsobj.innerHTML//非表单元素
jsobj.value//表单元素
Jq对象
/*非表单元素*/
jqObj.html()//提取
jqObj.html(“123”)//赋值
/*表单元素*/
jqObj.val() //提取
jqObj.val(“13”)//赋值
3、操作属性:
Js对象
jsObj.getAttribute(属性名称);//提取属性值 jsObj.setAttribute(名称,值);//添加属性 jsObj.removeAttribute(属性名称);//删除属性
Jq对象
jqObj.attr();//标准格式,一个参数是获取,两个参数是设置
jqObj.attr(“class”,”add”);//添加属性
jqObj.attr({“class”:”add”,”id”:”aa”});//同时添加多个属性
jqObj.removeAtter();//删除属性
jqObj.addClass('add');//添加一个classs属性,值为add
4、操作样式
js:dom操作css样式只能操作“行内样式”
<div style=”width:300px; height:200px; background-color:pink;”></div>
①获取css样式
元素节点.style.css样式名称;
divnode.style.width; //获取宽度样式
②设置css样式(有则修改、没有则添加)
元素节点.style.css样式名称 = 值;
divnode.style.width =‘500px’//设置div宽度样式
jquery:dom操作css样式可以操作"内联、内嵌"
jqObj.css();//css样式操作
$("p").css("background-color");//提取样式属性
$("p").css("background-color","yellow");//添加样式
$("p").css({"background-color":"yellow","font-size":"200%"});添加多个样式
5、操作事件
js
jsObj.onclick = function(){}
jquery
jqObj.click(function(){});
jqObj.html('<button></button>');//添加标签
页面加载完成
js对象
Window.onload=function(){}
jq对象
$(document).ready(function(){}); $(function(){});
绑定方法
$('div').bind('mouseover',f1(){
})
jQuery与javascript的更多相关文章
- jQuery? 回归JavaScript原生API
如今技术日新月异,各类框架库也是层次不穷.即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替代的大势.但JS原生API写法依旧:并且 ...
- JQuery笔记:JQuery和JavaScript的联系与区别
来源:http://www.ido321.com/1019.html ps:LZ觉得这个标题有点大了,超出了能力范围,不喜勿碰.目前只记录LZ能力范围内的,日后持续补充. 一.JQuery对象和DOM ...
- 节点的创建--对比jQuery与JavaScript 方法
一. 创建节点: 节点是DOM结构的基础,根据DOM规范,节点是一个很宽泛的概念,包含元素.属性.文本.文档和注释.但在实际开发中,要动态创建内容,主要操作的节点包括元素.属性和文本. 1.需求:创 ...
- 对比JQuery与JavaScript
JavaScript 是一种脚本语言,主要用在浏览器中,实现对网页的文档对象的操作和一些用户交互动作的处理.而 jQuery 则是 JavaScript 的一个代码库(或习惯性叫类库),它将一些在 J ...
- 使用Javascript/jQuery将javascript对象转换为json格式数据 - 海涛的CSDN博客 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- 【转载】Asp.Net中使用基于jQuery的javascript前台模版引擎JTemplate
JTemplate是基于jQuery的开源的前端模版引擎,在Jtemplate模板中可以使用if判断.foreach循环.for循环等操作,使用Jtemplate模板优点在于ajax局部刷新界面时候不 ...
- jQuery 是javascript的一个库(常用插件、处理器)
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery就是javascript的一个库,把我 ...
- Eclipse添加Jquery和javascript的智能提示
使用Eclipse写Jquery和Javascript代码的时候,是没有智能提示的.我们可以使用一个插件来解决这个问题. 安装完成后,Eclipse会自动重启.重启之后,我们在项目上右键, 根据自 ...
- jQuery页面加载完毕事件及jQuery与JavaScript的比较
1.jQuery概述 jQuery是一个JavaScript库,它集成了JavaScript.DOM.CSS和Ajax,简化了JavaScript编程,提倡write less, do more. 2 ...
- 网页中tab标签切换分别用jquery和javascript源码实现
//HTML布局<ul id="tabTitle"> <li class="active">HTML5</li> <l ...
随机推荐
- Python之浅谈面向对象
目录 面向对象和面向过程 面向过程 面向对象 类与对象 定义类 在现实世界中:先有对象,再有类 在程序中,务必保证:先定义(类),后使用(产生对象) 产生对象 类 对象 产生对象 属性查找顺序 对象赋 ...
- hive中如何查询除了其中某个字段剩余所有字段
想要将hive分区表中的某个分区复制到新的分区中,使用如下sql语句 insert overwrite table zcfw_sda.sda04_core_request_base_ratio_ifr ...
- C++ 调用Python文件方法传递字典参数并接收返回值
首先本地需要安装有Python环境,然后在c++工程中包含Python的头文件,引用Python的lib库. //python 初始化 Py_Initialize(); if (!Py_IsIniti ...
- SpringMvc流程分析,简单源码分析
SpringMvc的请求入口:web.xml中的DispatcherServlet <servlet> <servlet-name>springServlet</serv ...
- H5+CSS复习笔记(全)
1.自结束标签和注释 通常标签都是成对出现,如<h1></h1>,<div></div>等等.但是又些标签是没有结束标签的,成为自结束标签,如<i ...
- day11 文件操作(上)
目录 一.什么是文件 二.为何要用文件 三.如何使用文件 3.1文件操作的基本流程 3.2资源回收with上下文管理 3.3指定操作文本的字符编码 四.文件的操作模式 4.1控制文件读写操作的模式(t ...
- 如何在Linux环境下用虚拟机跑Windows!
文章目录 #0x0 Windows #0x1 安装虚拟机 #0x10 下载: #0x11 安装: #0x2 安装虚拟机windows #0x20 下载镜像 #0x21 安装镜像 #0x3 使用Wind ...
- 技术干货丨通过wrap malloc定位C/C++的内存泄漏问题
摘要:用C/C++开发的程序执行效率很高,但却经常受到内存泄漏的困扰.本文提供一种通过wrap malloc查找memory leak的思路. 用C/C++开发的程序执行效率很高,但却经常受到内存泄漏 ...
- 萌新计划 PartⅡ
Part Ⅱ web 9-15 这一部分的题,主要是绕过过滤条件,进行命令执行 0x01 web 9 过滤条件: if(preg_match("/system|exec|highlight/ ...
- 数据可视化之DAX篇(二十七)半累加度量,在Power BI 中轻松处理
https://zhuanlan.zhihu.com/p/96823622 开始半累加的计算之前,我们先看看什么是累加.半累加以及不可累加数据. 在含有大量行的数据表中,各种数据处理语言,包括DAX ...