jQuery学习之路（2）-DOM操作

jQuery学习之路（1）-选择器

▓▓▓▓▓▓ 大致介绍终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优…

jQuery学习之------元素样式的操作

jQuery学习之------元素样式的操作一..addClass( className )方法----增加样式 1.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名 <head> <style> /*css样式代码*/ .soulsjie{ background:red; } .newstyle{ height:100px; width:100px; } .newsty2{ font-size:16px; } </style>…

jQuery学习之路（2）-DOM操作

▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作看看DOM操作都有哪些逐一来看先写一份HTML代码,后面的代码将操作这份HTML代码 <p title="选择你最喜欢的水果">你最喜欢的水果?</p> <ul> <li title="苹果">苹果</li>…

jquery学习笔记(二)：DOM元素操作

内容来自[汇智网]jquery学习课程 2.1 元素属性操作 1.获取元素的属性语法:attr(name) 参数name表示属性的名称 2.设置元素的属性单个属性设置语法:attr(key,value) 多个属性设置语法:attr({key0:value0,key1:value1}) 3.删除元素的属性语法:removeAttr(name) 2.2 元素内容操作 html()方法仅支持XHTML的文档,不能用于XML文档,而text()既支持HTML文档,也支持XML文档语法格式参数说…

jQuery 学习之路（1）：引子

一.主流 javascript 库除 jQuery 外,还有 Prototype.Dojo.YUI.ExtJS.MooTools ,其中 Prototype 较老,结构设计较为松散,ExtJS 界面很棒但需要商业授权,MooTools 也是值得学习的一个 js 库,Dojo 有一些特殊功能,也可以考虑学习,YUI 的文档很完备,语法也规范.对我个人而言,选择性依次为 jQuery > MooTools > ExtJS > Dojo > YUI > Prototype. jQ…

认识JQuery，JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法

(一)认识JQuery JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法 JQuery的主旨:以更少的代码,实现更多的功能 (二)JQuery的优势 1)可以像CSS一样访问和操作DOM 2)修改CSS控制页面外观 3)简化JS代码操作 4)事件代理更加容易 5)动画效果使用方便 6) Ajax技术更加完美 7)大量的基于Jquery的插件 8)可以自定义扩展功能插件 (三)JQuery的语法格式:$(selector).actio…

JQuery选择器，事件，DOM操作,动画

JQuery是一个JavaScript代码库,或者是JavaScript框架: 1.选择器:(和CSS选择器一致) 基本选择器:ID选择器$('#div1');Class选择器('.div1');标签选择器('img'); 并列选择器('用逗号隔开');后代选择器('用空格隔开'); 2.过滤选择器: first:$('.div1:first').click(function(){}); last:$('.div1:last').click(function(){}); eq(索引号):$('.…

javascript学习（二） DOM操作HTML

一:DOM操作HTML JavaScript能够改变页面中所有的HTML元素 JavaScript能够改变页面中所有的HTML属性 JavaScript能够改变页面中所有的CSS样式 JavaScript能够对页面中的所有事件做出反应改变HTML的输出流:document.write(); 会覆盖其他的元素,所以最好不要用 eg1:简单操作HTML元素和属性 <html xmlns="http://www.w3.org/1999/xhtml"> <head>…

【php学习之路】字符串操作

无论学习那种语言,字符串操作都是必备的基础.学php的时候总是会不知不觉的与C#比较,用起来总觉得怪怪的没有那么顺手,有些命名也差别很大,再加上很多函数命名是简写形式不百度下还真不知道什么意思.还有一点就是对中文字符的支持不是很好,原生的函数只能用在英文字符串上. 下面收集下常用的字符串处理函数,以备以后查用. 一.字符串处理的常用函数 int strlen(string str) 获取字符串长度 int strcmp(string str1,string str2)…

jQuery 【事件】【dom 操作】

事件 hover( function(){},function(){}) -- 鼠标移入移出事件 toggle(function(){},function(){},function(){},....) -- 循环执行,花括号内各方法循环执行对象.live("事件名",function(){}); -- 对未来创建的元素进行操作 -- btn1 的点击事件中创建 class="div2" 的 div 放到 id="div1" 的…

前端学习(二十三）DOM操作，事件（笔记）

javascript 组成部分 1.ECMAScript javascript的核心解释器 2.DOM Document Object Modle 文档对象模型 DOM操作获取元素改变样式改变内容 3.BOM 浏览器对象模型浏览器操作 window.navigator.userAgent …

jQuery 学习之路（3）：DOM操作

一.在元素内部插入 .append(content[,content]) 在指定元素的内部末尾插入字符串,或在指定元素的内部末尾移入指定元素,如 $(".container").append($("p")); .appendTo(target) 将指定元素移动到某元素内部的末尾,如 $("p").appendTo( $( ".container")); .prepend(content[,content]) 类似 .appen…

jQuery学习之旅 Item8 DOM事件操作

1.jquery页面载入事件 1.传统加载事件 <body onload="函数名()"> 页面全部html和css代码加载完成之后再调用指定的onload函数 window.onload = function(){ 加载过程 } 2.jquery实现加载事件 ① $(document).ready(function(){加载代码}); ② $().ready(function(){加载代码}); ③ $(function(){加载代码}); ----- jQuery.fn…

jQuery学习之路（8）- 表单验证插件-Validation

▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言.该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUnit 的维…

jQuery学习之路（7）- 用原生JavaScript实现jQuery的某些简单功能

▓▓▓▓▓▓ 大致介绍学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写的也要是面向对象的,看看基本的结构 // 定义lQuery对象 function lQuery(lArg){ } function lQ(lArg){ return new lQuery(lArg); } // css()方法 lQuery.prototype.css = function(){};…

jQuery学习之路（3）- 事件

▓▓▓▓▓▓ 大致介绍 jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力 ▓▓▓▓▓▓ jQuery中的事件 ▓▓▓▓▓▓ 加载DOM 在jQuery中是用$(document).ready()方法来替代JavaScript中的window.onload方法的,但是他们也有一些不同点 1.执行时机例如我们有一个有很多图片的网页 $(document).ready()方法是在这个网页的DOM树加载完就可以执行的,而window.onlo…

JavaScript学习笔记系列2:Dom操作(一)

一.什么是Dom? DOM------>Document Object Model 直接翻译就是文档对象模型. DOM------>定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系.DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和css功能的一类对象的集合.也有人称DOM是对HTML以及XML的标准编程接口.说白了就是类型C#对象集合.举个例子 I/0,I/O包含了很多操作文件和流的对象.意思是一样的. 二.如何使用Dom? 1.查看方法.docment.…

Jquery学习之路(一) 实现checkbox全选方法

昨天早上有写到怎么利用Jquery实现全选根据大家的意见对程序中一些写法不好的地方进行了修改,也是本人水平有限,存在各种考虑不到的地方. 文章最后我提出了一个问题,要写一个通用的方法来调用,于是就有了现在的这篇文章,晚上回到家,我就写出了效果下面的例子可以供大家讨论学习,如果觉得不错也可以直接应用到项目中. 1:为什么要写这个方法网上实现一句话全选全不选的有很多,但是好像都忽略了一个问题,全选的checkbox可以控制下面的子checkbox,但是下面的子checkbox应该也可以控制上面…

jQuery 第四章实例方法 DOM操作之data方法

jquery 里面的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data() 干嘛用的, 看淘宝上有自定义的属性, 为data - 什么什么, 这是为了dom 跟数据有联系,存信息, 存数据.以便以操作, 但是淘宝把data 等放在行间样式上, 是为了 vue 等其他框架的使用,在jquery中, jquery为我们提供了一个方法, 就是.data() 以便于我们存信息, 存数据.是用jquery 时,不推荐把 data等信息,写在行间样式了,性能不高,还频繁…

jQuery 第四章实例方法 DOM操作_基于jQuery对象增删改查相关方法

.next() .prev() .nextAll() .prevAll() .prevUntil() .nextUntli() .siblings() .children() .parent() .parents() .offsetParent() .closest() .slice() .insertAfter() .after() .insertBefore() .before() .appendTo() .append() .prependTo() .prepend() .remove…

jQuery学习之路（4）- 动画

▓▓▓▓▓▓ 大致介绍通过jQuery中基本的动画方法,能够轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验 ▓▓▓▓▓▓ jQuery中的动画 ▓▓▓▓▓▓ show()和hide()方法 1.show()方法和hide()方法是jQuery中最基本的方法,hide()方法会将一个元素的display设置为"none": 2.show()方法和hide()方法会同时改变元素的宽度.高度和透明度 3.在一个元素使用hide()方法时会记录原先的display属性,当调用sho…

python学习之路前端-Dom

Dom简介文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来.DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容一.查找元素 1.直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获…

jQuery学习之旅 Item3 属性操作与样式操作

本节将Dom元素的操作:属性操作.样式操作.设置和获取HTML,文本和值.Css-Dom操作. 1.属性操作 <input type="text" name="username" value="jack" class="apple"> 方法:attr() attribute属性使用: 1. attr(名称); 获得元素节点对应的属性信息 $("input").attr('class'); //…

jQuery学习（监听DOM加载）

jQuery的extend方法 function njQuery() { } /* njQuery.extend = function (obj) { // 此时此刻的this就是njQuery这个类 // console.log(this); for(var key in obj){ // njQuery["isTest"] = function () {console.log("test");} this[key] = obj[key]; } } njQuery…

jQuery学习笔记2——表单操作

一.获取和设置表单的值:val()和text() 1. 获取表单的值: $("#username").val(); 2. 设置表单的值: $("#username").val("我来了"); $("input[name='password']").val() //checkbox得到的是一个数组,需要进行遍历 $("input[name='interest']:checked").each(function…

前端学习笔记之HTML DOM操作

HTML DOM 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). DOM节点类型文档节点 (document,唯一) 元素节点 (那些个标签div,p之类) 属性节点(class,src这种) 文本节点(插入在p,div内的文本) document中的open()定义和用法 open() 方法可打开一个新文档,并擦除当前文档的内容. 语法 document.open(mimetype,replace) 参数描述 mimetype 可选.…

Jquery学习之路(二) 实现table样式的设定

上一篇jquery实现checkbox的全选,得到了一些朋友的建议,其中插件的定义我的确不太清楚,也闹了个笑话,有些朋友建议我去看<锋利的Jquery>,说实话正在看了.由于正在学习中,我就想把项目中经常要用的jquery效果自己写成通用方法,可以在大家的帮助下完善这些方法,也可以让不会的了解到一种做法,最后形成自己的Jquery 方法库,方便以后的使用,这些例子都是我自己写的,没有参考,所以有很多地方需要改进. 1:为什么要写这个方法在项目中,一些table都要设置样式,为了样式的美观,…

jQuery学习之路（6）- 简单的表格应用

▓▓▓▓▓▓ 大致介绍在CSS技术之前,网页的布局基本都是依靠表格制作,当有了CSS之后,表格就被很多设计师所抛弃,但是表格也有他的用武之地,比如数据列表,下面以表格中常见的几个应用来加深对jQuery的认识. ▓▓▓▓▓▓ 表格变色基本的结构: <table> <thead> <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thea…

jQuery学习之路（5）- 简单的表单应用

▓▓▓▓▓▓ 大致介绍接下来的这几个博客是对前面所学知识的一个简单的应用,来加深理解 ▓▓▓▓▓▓ 单行文本框只介绍一个简单的样式:获取和失去焦点改变样式基本结构: <form action="#" method="post" id="regFrom"> <fieldset> <legend>个人基本信息</legend> <div> <label for="use…

jQuery 学习之路（2）：选择器与过滤器

一.基本选择器标签选择器: $('button') ID选择器: $('#id1') 类选择器: $('.class1') 多重选择器: $('#id1,.class1,button') 全体选择器: $('*') 基本选择器完全根据 CSS 选择器的规范而来,对于了解 CSS 的用户非常容易掌握. 二.层次选择器子选择器: $('parent > child') 后代选择器: $('ancester descendant') 单一兄弟选择器: $('prev + next') 所有兄弟选…

【jQuery学习之路（2）-DOM操作】的更多相关文章