前者是jQuery库的源代码版本,它带有注释信息,建议你在开发环境中使用该文件,以便于调试或阅读源代码。..."); // 选取所有选中的option元素 $(":input"); // 选取所有的表单控件元素(所有input、textarea、select、button元素) 五:将HTML字符串封装为jQuery..."Hello" $("selector").prop("checked"); // 获取第一个匹配元素的checked属性值 $("selector").prop("checked", true); /...this 与 value 相同 alert( i + " = " + value ); // 如果函数return false,将终止遍历 }); // $.map()用于遍历数组元素或对象属性,并将每次执行遍历函数的返回值封装为数组返回...( typeof value === "number"){ return null; // 如果函数返回null或undefined,则不会添加到结果数组中 }else{ return value; }
使用jQuery 选择器选取元素,并封装为jQuery对象 将现有的DOM元素封装为jQuery对象 将HTML字符串封装为jQuery对象 元素筛选 jQuery 核心:DOM操作的原则...如何使用jQuery jQuery的使用非常简单,我们只需要引入jQuery库的js文件,然后直接使用即可。...当我们使用$("选择器字符串")匹配到指定的元素后,将返回一个jQuery对象。该对象就包含匹配到的所有DOM元素。...对象 $( uid ); $( ps ); $( unames ); $( domsArray ); $( ); // 不传入任何参数,返回空的jQuery对象(不匹配任何元素) 将HTML字符串封装为...jQuery对象 jQuery还支持将HTML字符串转换为临时DOM元素,并包含在返回的jQuery对象中。
:“文本内容” $(selector).html(); // 获取或设置 元素标签内的内容,包括其内的标签 即上面的 : “文本内容.......attr() 设置或返回匹配元素的属性和值。 hasClass() 检查匹配的元素是否拥有指定的类。 html() 设置或返回匹配的元素集合中的 HTML 内容。...contents 添加到 append_area3 位置 $(selector).prepend(contents); // 将 contents 添加到 append_area2 位置...// 将 contents 添加到 append_area4 位置 这里的content可以是字符串表示的元素,也可以是元素变量,并且可以多元素添加。...[attribute] $("[href]") 所有带有 href 属性的元素 [attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素
attr(attrName)方法接受一个字符串参数,就是属性的名称,返回值是属性值,如果dom元素没有此属性则返回undefined。...内容操作html()和text() 2.1 设置标签内部的html内容html() DOM时代设置标签内部的html内容是使用DOM对象的 innerHTML属性。...如果多选,将返回一个数组,其包含所选的值。...参数: 一个参数:class:CSS类名 String类型 // 如果p标签有selected样式就移除掉,如果没有就添加上。... 4.2 设置CSS的样式属性值 接受两个字符串参数css(key,val) 将所有段落字体设为红色 $("p").css("color","red"); 接受键值对的对象作为参数
◆ 函数的嵌套: 函数的嵌套是指在函数体的内部再次嵌套一层函数体,并依次返回执行结果,就是嵌套函数....: 使用escape()方法对字符串进行转义处理,unescape()则负责将代码解码....+ ""); //获取修改后的标签内容 innerHTML: 该方式不但可以修改文本,还可以同时修改HTML的嵌套标签,修改时应加上标签格式....> 修改标签属性: 修改DIV标签id=MyDiv的标签属性,将name=lyshark修改为name=hello....CSS属性添加到一些标签中.
attr(attrName)方法接受一个字符串参数,就是属性的名称,返回值是属性值,如果dom元素没有此属性则返回undefined。...内容操作html()和text() 2.1 设置标签内部的html内容html() DOM时代设置标签内部的html内容是使用DOM对象的 innerHTML属性。...; 设置标签的文本 text(func) func(index, text)此函数返回一个字符串。接受两个参数,index为元素在集合中的索引位置,text为原先的text值....如果多选,将返回一个数组,其包含所选的值。... 4.2 设置CSS的样式属性值 接受两个字符串参数css(key,val) 将所有段落字体设为红色 $("p").css("color","red"); 接受键值对的对象作为参数css
> src,for,type,href > title,alt > aria-xxx,role 属性统一使用双引号 语义嵌套及严格嵌套约束 参考:WEB标准系列-HTML元素嵌套 用于...DOCTYPE html> 语言属性 字符编码(必须是标签的第一个子元素) 优先使用最新内核 嵌套层级过多, 限制在2层 可以使用字符串插值使变量嵌入字符串中 @base-url: "http://assets.fnord.com"; background-image: url("@{base-url...hbs 后缀表示模版 btn button 的缩写 link 超链接 title 主要文本 img 图片路径(img标签src属性) dataset html5 data-xxx 数据接口 theme...不准用"string".match() 多个参数使用对象字面量存储 jQuery 使用最新版本的jQuery jQuery变量 以$开头, 并缓存到本地变量中复用, 使用驼峰命名法命名 jQuery选择器
- 由一对尖括号包裹的单词构成,如html> 所有标签中的单词不可能从数据开头 - 标签不区分大小写html>和HTML>,建议使用小写 - 标签分两部分:开始标签和结束标签...,两个标签之间的部分,叫标签体 - 有些标签功能比较简单,使用一个标签即可,这种标签叫做自闭合标签,如:、、、 - 标签可以嵌套,但不能交叉嵌套。...如: 三 、 标签的属性 - 通常是以键值对形式出现的,例如 name="alex" - 属性只能出现在开始标签 或 自闭合标签中 - 属性名字全部小写,属性值必须使用双引号或单引号包裹...3 - 对于==两边的表达式,如果类型不同,则先试图将==两边的运算符转换为String、Boolean、Number这些相同的数据类型然后再判断是否相等。...//push是将value值添加到数组x的结尾 105 //pop是将数组x的最后一个元素删除 106 107 108 var arr1=[1,2,3]; 109 arr1.push(4,5);
2、传入参数为 [ HTML 字符串 ] 时:(“我是span标签”); 创建一个标签对象相当于如下代码:var spanObj = document.createElement(“span”);spanObj.innerHTML...jquery对象不能使用dom对象的属性和方法 var divObj = document.getElementById("testDiv"); // jquery对象也不能使用dom对象的属性和方法... Jquery 的属性操作 html() 跟innerHTML一样。 设置和获取起始标签和结束标签中的内容 text() 跟innerText一样。...这些属性在dom对象中都会有true和false值的情况。 并且使用attr操作有返回undefined的情况下。使用prop方法。...jquery页面加载完成之后的触发时间点: // jquery的页面加载完成之后。只是等浏览器内核解析完html标签,创建好dom对象之后。
的大弟弟b | a~b:选择a的所有b弟弟| 属性选择器: [属性名] 获取元素上带有该属性名的元素对象 [属性名='值'] 获取元素上带有该属性名且值为''的元素对象 属性选择器一般和标签选择器联合使用...jq对象.val() 获取 | jq对象.val("值") 设置 html(): 对标签体的操作。...jq对象.html() 获取 | jq对象.html("值") 设置 text(): 对标签体的操作(文本)。...a的内部的前面; 外部插入(作为兄弟标签): a.after(c) 将c插入到a的后面 | a.before(c) 将c插入到a的前面 删除: empty():清空所有的子标签....attr( { “属性”:”值“,”属性“ : ”值“}); prop():使用方式和attr()一样,checked和selected使用prop才能获取到!
2、方式二:以字符串的方式创建元素 语法: 父元素.html("html代码"); // $("#dv").html("Dao"...3、成对的标签可以使用 text() 方法来获取和设置,推荐使用 text(); 示例5:获取设置下拉框value的值 ...但是操作元素是否选中的 checked 属性时不合适。 2、操作元素的选中 checked 属性,推荐使用 prop 方法。...")); $("#r1").attr("checked", true); PS:attr 方法针对单选框和复选框的是否选中问题操作复杂(选中返回值为 checked,未选中返回值为 undefined...,而没有空格表示,设置了类 tb 的所有元素集合中带有 checked 的元素。
,以及原始(旧的)值.然后以函数新值返回您希望使用的字符串.示例如下: $("button").click(function(){ $("#runoob").attr("href",...,返回指定属性值. 2.如果没有相应的属性,返回值是空字符串....对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法...."); 获取内容:var 变量 = $(selector).text(); 区别:html方法会识别html标签, text方法会把内容直接当成字符串,并不会识别字符串内的html...然后以函数新值返回您希望使用的字符串.示例如下: $("#btn1").click(function(){ $("#test1").text(function(i,origText
然后就用下面蹩脚的方式草草处理掉了。...而standard attribute在未赋值时,点方式访问会返回属性的默认值(title、id等会返回空字符串,而checked会返回false),而getAttribute方式访问会返回null。...以href属性为例,所在文件:c:\test.html,html标签:: 浏览器 点方式 点方式结果 getAttribute getAttribute结果 IE8...空字符串 空字符串 注意:IE8—11下,当通过setAttribute设置异常的样式规则时,html标签中的style属性会被删除,因此无法通过outerHTML来萃取异常样式规则的字符串值...对于值属性要不就使用JQuery等dom库统一操作,要不就具体元素具体操作吧, mass framework的valHooks['@select:get']就是遍历option元素来获取select
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。...jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。...: $("input[name='gender']:checked").val() 属性操作 用于ID等或自定义属性: attr(attrName)// 返回第一个匹配元素的属性值 attr(attrName...用于checkbox和radio prop() // 获取属性 removeProp() // 移除属性 注意: 在1.x及2.x版本的jQuery中使用attr对checkbox进行复制操作时会出bug...为了兼容性,我们在处理checkbox和radio的时候尽量使用特定的prop(),不要使用attr("checked", "checked")。
文档处理 事件 动画效果 插件 each、data、Ajax jQuery语法 $符号事jQuery中的重要标识 //在JS中可以通过获取先获取标签,然后去使用对应的方法,在jQuery中一样,...CSS 属性选择器通过已经存在的属性名或属性值匹配元素; jQuery也可以通过属性选择器来进行操作; CSS选择器关键字 jQuery 说明 [attr] [attr] 带有以 attr 命名的属性的元素...$(':checked') # 找checked属性的input标签会连同option默认的selected一起找到,但是找selected属性的option标签不会输出input标签 表单对象属性...='2']").prop("checked", true); 总结: 对于标签上有的能看到的属性和自定义属性都用attr 对于返回布尔值的比如checkbox、radio和option...标签 var btnEle = document.createElement('button') // 设置内部文本 btnEle.innerText = '点我' // 将button标签添加到body
前言 这是前端的JavaScript和JQuery的基础使用,对于日常使用来说,这些代码足够了。我写代码的时候经常忘记,写下常用的代码,用的时候直接看这些,免得再去百度了。...) $("#text_input").bind("input propertychange", function (e) { console.log("a") }); 2、jquery和js如何判断...$().append() ---- 将js对象转为jquery对象 $(js对象) ---- 页面跳转 在原来的窗体中直接跳转用 window.location.href="你所要跳转的页面"; 在新窗体中打开页面用...数组,使用json[数字]来获取数据,由对象变来的话,会变为json对象,使用json.属性 获取值,或者 json[“属性”] 获取值 // JSON对象转字符串 JSON.stringify() /.../ JSON字符串转JSON对象 JSON.parse() ---- 获取元素属性值 动态获取按钮的自定义属性值 $(".auto_item").attr("属性名") 如果想设置属性名,使用$(".auto_item
的标签,返回类型是DOM元素数组 id $('#value'),选取页面上id=value的标签 $('[name]'),选取带有name属性的标签,返回类型是DOM元素数组 $('[name="tag...'); 或 $(':radio:checked');//选取页面上所有被选中的radiobutton //选取class属性值是style的p标签 $('p.style'); //选取div所有子元素中的...DOM对象和jQuery对象的相互转换 //DOM转jQuery var win=$(window);//将window转换为jQuery对象 //jQuery对象win转DOM对象 win.get[0...html()可以使用html样式,$('p').html('p'),p标签上显示粗体字母p val() 针对input使用,val()获取元素中的value属性值,value('str')...conditions); 元素操作 说明 hide() 隐藏元素 show() 显示元素 $('') 创建p元素 append() 向元素末尾添加子元素 appendTo() 将元素添加到指定的元素末尾
jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。...原生的js对象如何转换成jQuery对象?...3.4.1样式操作 说明:当我们采用精确筛选(也就是每次都得到唯一的标签)时得到地对象就是jQuery对象,当我们通过模糊筛选得到多个标签时(这些标签以数组的形式返回)得到的就是标签需要使用$(' '...$("#i1").prop("checked") // true 这已经可以证明attr的局限性,它的作用范围只限于HTML标签内的属性,而prop获取的是这个DOM对象的属性,选中返回true,没选中返回...目的: 我们已经创建好的事件如果想被动态创建的标签使用就需要用到事件委托,比如已经创建好了按钮点击的事件如果我们要将这个事件绑定给动态创建的一个按钮就通过事件委托,将事件绑定给按钮的父标签,这样当子标签
中的attr和prop区别 对于html元素本身就带有的固定属性,在处理时,使用prop方法;对于html元素自定义的dom属性时,在处理时,使用attr方法。...jquery来选择它们 可以使用标签选择器来选择所有的div元素,$("div")会返回一个包含5个div标签的jQuery对象。...63.如何用jquery将一个html元素添加到dom树中 appendTo()方法,将一个html元素添加到dom树中,使用它可以在指定的dom元素末尾添加一个现存的元素或者一个新的html元素。...119.如何设置和获取html以及文本的值 使用html()方法,类似于innerHTML属性,可以用它读取或设置某个元素中的HTML内容。...middle将行距增加到和整个p一样高,然后插入文字,就垂直居中了。
jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。...标签 练习: 自定义模态框,使用jQuery实现弹出和隐藏功能。...: $("input[name='gender']:checked").val() 自定义登录校验示例 属性操作 用于ID等或自定义属性: attr(attrName)// 返回第一个匹配元素的属性值...$("#i1").prop("checked") // true 这已经可以证明attr的局限性,它的作用范围只限于HTML标签内的属性,而prop获取的是这个DOM对象的属性,选中返回true,没选中返回...总结一下: 对于标签上有的能看到的属性和自定义属性都用attr 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。