jQuery学习之二---jq核心
还是那句话,我在这边只选择一些我已经看懂的,不能传播错误信息不是吗,哈哈,然后就是我个人觉得比较重要的,OK,下面开始学习,加油啊,一起加油!
jQuery核心函数
1、jquery([selector,[context]])
这个函数接收两个参数,
第一个是包含CSS选择器的字符串,然后通过这个字符串去匹配一组元素。其实通俗来说就是用选择器以jq的方式去获取匹配到元素。
比如:用jQuery去获取div中的p标签
<div><p></p><p></p>
</div>
$("div>p");//<p></p>,<p></p>
获取到以后我们就可以进行别的操作了,比如设置个字体颜色什么的
$("div>p").css("color","pink");
第二个参数context,这个属性在 jQuery version 1.10 中被弃用。
我们就稍微了解一下就可以了。
默认情况下, 如果没有指定context参数,$()将在当前的 HTML document中查找 DOM 元素;如果指定了 context 参数,如一个 DOM 元素集或 jQuery 对象,那就会在这个 context 中查找。
2、jquery(html):这个方法用来动态创建DOM元的HTML标记的字符串,其实也就是jq中创建标签的方法。
$("<div></div>");这样就创建了一个div标签了
简写方法:$("<div/>");
jQuery对象方法
3、each(callback)
以每一个匹配的元素作为上下文来执行一个函数。每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整型)。
其实说白了就是遍历获取到的元素,根据元素的下标进行某些操作。
比如:有两个img标签,给其设置上src<img/><img/>$("img").each(function(i){this.src = "test"+i+".jpg";});
4、length:返回jq对象中元素的个数
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").length;//2
5、get(index)
这个函数的用法就是在里面传一个数字,目的是匹配到获取到的第几个元素。我们都知道用$获取到的是一个jq对象,当我们在某些时候需要用到js原生对象进行操作的时候,这个方法就派上用场了。
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").get(0);//<img src="test1.jpg"/>
这种方法等同于:$("img")[0];
经由这种方法得到的结果跟用get是一样的,因为jq对象,其实是一个数组形式,用这种数组取值的方法也是可以取到它所匹配到的值的。
6、index()搜素匹配的元素,并返回相应元素的索引值,从0开始计数
如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
参数可以有好多:DOM对象,jq对象,选择器
$('li').index(document.getElementById('bar')); //1,传递一个DOM对象,返回这个对象在原先集合中的索引位置
$('li').index($('#bar')); //1,传递一个jQuery对象
$('li').index($('li:gt(0)')); //1,传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置
$('#bar').index('li'); //1,传递一个选择器,返回#bar在所有li中的索引位置
$('#bar').index(); //1,不传递参数,返回这个元素在同辈中的索引位置。
数据缓存
7、data()在元素上存放或读取数据,返回jQuery对象。
removeData()移除data存储的数据
(1)在一个div上存取数据
<div></div>
$("div").data("blah"); // undefined
$("div").data("blah", "hello"); // blah设置为hello
$("div").data("blah"); // hello
$("div").data("blah", 86); // 设置为86
$("div").data("blah"); // 86
$("div").removeData("blah"); //移除blah
$("div").data("blah"); // undefined
这个例子说明了:没存是取不到的,但是存了以后还是可以重新设置它的值的,然后也可以进行removeData操作。
(2)在一个div上存取名/值对数据
解释:名/值对
其实就是一种数据格式,模板是{name:”萍子”};
<div></div>
$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first //16;
$("div").data("test").last //pizza!;
(3)在HTML5规范中div中读取预存的data-[key]值
<div data-test="good good study"></div>
$("div").data("test");//good good study
好了,以上部分是我挑选的一些jq核心的内容,哎呀,这大周末的,好嘞,过周末去了,拜拜~
jQuery学习之二---jq核心相关推荐
- jQuery学习(二)—jQuery对象的获取
jQuery学习(二)-jQuery对象的获取
- jQuery学习笔记02:核心部分
jQuery学习笔记:核心部分 一.$(expr) 1.说明 $(expr) 该函数通过CSS选择器.XPath或html代码来匹配目标元素 参数:expr(字符串,一个查询表达式或一段html字符串 ...
- jquery 学习之二 属性---文本 值
text() 取得所有匹配元素的内容. 结果是由所有匹配元素包含的文本内容组合起来的文本.这个方法对HTML和XML文档都有效. Get the text contents of all matche ...
- jQuery学习教程二十: jQuery 遍历 - 后代
后代是子.孙.曾孙等等. 通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代. 向下遍历 DOM 树 下面是两个用于向下遍历 DOM 树的 jQuery 方法: children() f ...
- node.js学习笔记(二):核心
NodeJS核心东西随着版本更新越来越多,详情看官方文档:http://nodejs.org/api/ 下面简单介绍几个用的比较多的 1.全局对象 在浏览器JavaScript 中,通常windo ...
- jQuery学习笔记:Ajax(二)
接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...
- jQuery学习笔记系列(二)
day02 - jQuery 学习目标: 能够操作 jQuery 属性 能够操作 jQuery 元素 能够操作 jQuery 元素尺寸.位置 1.1. jQuery 属性操作 jQuery 常用属 ...
- jQuery学习笔记(二)
jQuery学习笔记(二) 二.管理jQuery包装集 1.创建新的元素 使用HTML DOM 创建元素 var select=document.createElement("select& ...
- jQuery学习(十二)—jQuery中对象的查找方法总结
jQuery学习(十二)-jQuery中对象的查找方法总结 一.find方法 作用:在元素1中查找元素2,类似于选择器中的后代选择器 格式:元素1.find(元素2),元素2为CSS选择器或者jQue ...
最新文章
- Access数据库中Sum函数返回空值(Null)时如何设置为0
- JDK之jstat的用法
- 史上最全异常检测算法概述
- 一个供应商只允许一个报价单
- 每日一皮:多线程理想与现实的差距
- python源代码-Python 源码深度剖析
- SpringBoot项目中Controller层代码编写规范整理
- 如何开始ChickTech章节
- 【现代机器人学】基于指数积的机械臂逆运动学
- Wireshark 文件分割和合并
- OS X系统U盘安装的问题
- 如何打开java jar文件怎么打开方式_Win10系统下jar文件如何打开?
- 计算机的各种配件知识,菜鸟必读:DIY装机需要知道的一些配件小知识
- 《运算放大器权威指南》读书笔记(三)
- 在计算机网络中集线器的作用是,集线器有什么用 集线器的作用介绍
- 文件服务器 excle 变为temp,WPS的excel表格保存之后变成tmp_共享文档无法保存EXCLE 生成TMP...
- 千亿美妆市场“野蛮生长”,悦瞳靠“假睫毛”能否“翘”动市场?
- CodeQL笔记之基本语法(一)
- Python多线程爬虫,主播信息资料爬取采集
- Handler中有Loop死循环,为什么没有阻塞主线程,原理是什么