【jQuery】jQuery官方基本教程的学习笔记1-核心Core
来源:互联网 发布:淘宝客服退换货汇总表 编辑:程序博客网 时间:2024/05/29 09:32
前言:
基本概念就不介绍了,$即jQuery对象的别名。官方教程链接http://learn.jquery.com/
一、Using jQuery Core(使用jQuery核心)
1.$和$()
我的理解就是,$可以调用jquery本身的静态函数,$()是取到选择器元素后给元素添加方法什么的。利用dw截图如下区分:
2.$(document).ready()
$( document ).ready(function() {console.log( "ready!" );});ready即准备。当在浏览器中一注册该网页(一打开)的时候,里面就直接执行。
3.Avoiding Conflicts with Other Libraries(避免与其他库产生冲突)
1)由于$是jQuery的别名,所有当其他库或变量有以'$'命名的话,再使用jquery库的$就会冲突,这时候,需要重新命名别名以避免冲突,方法如下:
<!-- Putting jQuery into no-conflict mode. --><script src="prototype.js"></script><script src="jquery.js"></script><script> var $j = jQuery.noConflict();// $j is now an alias to the jQuery function; creating the new alias is optional.(现在的别名就是$j) $j(document).ready(function() { $j( "div" ).hide();}); // The $ variable now has the prototype meaning, which is a shortcut for// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.window.onload = function() { var mainDiv = $( "main" );} </script>
2).需要引用jQuery库最好放在其他库之前,避免在它之前引用的库有$符号,造成冲突,不然只能用jQuery代替$4.Attributes(jQuery的关于属性)
1)方法:.attr()。这个方法根据官方介绍,可以用来设置属性和获取属性
2)设置属性,设置属性的时候可以设置一个键值对,也可以设置多个键值对:
$( "a" ).attr( "href", "allMyHrefsAreTheSameNow.html" ); $( "a" ).attr({ title: "all titles are the same too!", href: "somethingNew.html"});3)获取属性,根据设置的属性key获取值即可
$( "a" ).attr( "href" ); // Returns the href for the first a element in the document
5.Selecting Elements(选择元素)
1)选择方式:详见http://api.jquery.com/category/selectors/
(1)根据ID:$("#myID")
(2)根据类名:$(".myClass")
(3)根据属性:$("input[name='first-name']")
(4)混合选择:$("#contents ul.people li")(跟css后代选择器差不多)
(5)逗号选择:$("div.myClass,ul.people")(表示都选择)
(6)伪选择:$("a.external:first")
2)注意事项:
(1)有时候我们把选中的表达式放在条件判断的时候,不要这样:
// Doesn't work!if ( $( "div.foo" ) ) { ...}
需要这样,用length属性,等于0相当于false
// work!if ( $( "div.foo" ).length ) { ...}
(2)使用选择器的时候jq不会帮我们保存选中的元素,当我们再次使用的时候,需要用新建变量来接受选中的元素,如下:
var divs = $( "div" );(3)过滤选中的元素
有时候我们使用选择器选中的元素太多,这时候我们可以用jq方法来过滤选中的元素,如下:
// Refining selections.$( "div.foo" ).has( "p" ); // div.foo elements that contain <p> tags$( "h1" ).not( ".bar" ); // h1 elements that don't have a class of bar$( "ul li" ).filter( ".current" ); // unordered list items with class of current$( "ul li" ).first(); // just the first unordered list item$( "ul li" ).eq( 5 ); // the sixth
3)伪选择表单元素
(1):checked
不要混淆checkbox,同样适用radio,和select下使用了selected的选项,还有buttons
$( "form :checked" );
(2):disabled
这个伪选择器适用任何带有disabled属性的input元素
$( "form :disabled" );(3):enabled
跟(2):disabled刚好相反
$( "form :enabled" );
(3):input
选中<input>,<textarea>,<select>,<button>.....
$( "form :input" );(4):selected
选中<option>被选中的元素
$( "form :selected" );(5)还有很多。。。。
:password:reset:radio:text:submit:checkbox:button:image:file
6.working with selections——使用选择器
1)调用方法获取和设置(getter 和setter)
(1)使用不带参数的方法是获取值,获取的时候仅是获取的第一个元素的值,对获取的值还可以继续调用方法进行操作,如:
// The .html() method returns the html of the first h1 element:$( "h1" ).html();// > "hello world"
$( "h1" ).html().addClass( "test" );
(2)使用带参的方法是设置值,设置的是所有选择的元素,如:
// The .html() method sets all the h1 elements' html to be "hello world":$( "h1" ).html( "hello world" );
2)链操作(chaining)
(1)jQuery允许使用选择器获得元素后继续调用方法进行操作
$( "#content" ).find( "h3" ).eq( 2 ).html( "new text for the third h3!" );或者样写增加可读性:
$( "#content" ) .find( "h3" ) .eq( 2 ) .html( "new text for the third h3!" );(2)jQuery也提供了一个.end()方法在中间来改变链,回到原始的选择元素继续操作
$( "#content" ) .find( "h3" ) .eq( 2 ) .html( "new text for the third h3!" ) .end() // Restores the selection to all h3s in #content .eq( 0 ) .html( "new text for the first h3!" );(3)完整示例
<!doctype html><html><head> <meta charset="utf-8"> <title>Demo</title></head><body> <div id="contextH3"> <h3>h3001</h3> <h3>h3002</h3> <h3>h3003</h3> </div></body> <script src="jquery-2.1.1/jquery-2.1.1/jquery.js"></script> <script> $( document ).ready(function() {$("#contextH3").find("h3").eq(2).html("new h3 003").end().eq(0).html("new h3 001")}); </script></html>
7.操作元素-Manipulating Elements,详细教程api链接http://api.jquery.com/category/manipulation/
1)给元素设置和获取
.html() – Get or set the HTML contents..text() – Get or set the text contents; HTML will be stripped..attr() – Get or set the value of the provided attribute..width() – Get or set the width in pixels of the first element in the selection as an integer..height() – Get or set the height in pixels of the first element in the selection as an integer..position() – Get an object with position information for the first element in the selection, relative to its first positioned ancestor. This is a getter only..val() – Get or set the value of form elements.需要注意的是,设置和获取的是选择的所有的元素,要是某一个,需要特殊过滤选择器
2)移动,复制,删除元素
(1).insertAfter()-----把选中的元素放在参数元素后面
(2).after()-----是把参数中的元素放在获取的元素后面
(3)还有几组规律一样的方法:.insertBefore()和before(),.appendTo()和.append(),.prependTo()和.pepend()
(4).clone()
(5).remove()
(6).detach()
(7).empty()--如果您想要将元素留在页面上,但是删除它的内容,那么可以使用.空()处理元素的内部HTML
8.jQuery对象
1)compatibility兼容性
2)convenience便捷性
3)注意:
①
// Creating two jQuery objects for the same element. var logo1 = $( "#logo" );var logo2 = $( "#logo" );
alert( $( "#logo" ) === $( "#logo" ) ); // alerts "false"②
// Comparing DOM elements. var logo1 = $( "#logo" );var logo1Elem = logo1.get( 0 ); var logo2 = $( "#logo" );var logo2Elem = logo2.get( 0 ); alert( logo1Elem === logo2Elem ); // alerts "true"
9.Traversing--遍历http://api.jquery.com/category/traversing/
1)父级Parents
.parent(),.parents(),.parentsUntil(),.closest()
2)孩子Children
.children(),.find()
3)兄弟Siblings
.prev(),.next(),.siblings(),.nextAll(),.nextUntil(),.prevAll(),.prevUntil()
10.CSS,Styling,Dimensions
1)使用.css()设置和获取css属性,参数可以是一个键值对,或json格式的键值对(注意:有连接“-”符号的key,可以去掉“-”然后用驼峰命名来表示key,如:font-size->fontSize)
2)使用css class设置Style
.addClass() removeClass() toggleCalss() ,参数是样式名(类名)
3)使用width(),height(),position()获取或设置尺寸位置
11.Data Methodes---数据处理方法
可以用js操作给元素赋予数据属性,但是有内存泄漏的问题,jQuery可以解决。使用.data()存储和获取数据
// Storing and retrieving data related to an element. $( "#myDiv" ).data( "keyName", { foo: "bar" } ); $( "#myDiv" ).data( "keyName" ); // Returns { foo: "bar" }12.Utility Methods--实用方法http://api.jquery.com/category/utilities/
1)$.trim()
删除首尾空白部分
// Returns "lots of extra whitespace"$.trim( " lots of extra whitespace " );
2)$.each()
遍历数组和json对象。
$.each([ "foo", "bar", "baz" ], function( idx, val ) { console.log( "element " + idx + " is " + val );}); $.each({ foo: "bar", baz: "bim" }, function( k, v ) { console.log( k + " : " + v );});注意:.each()方法用在选择器选中的元素。$.each()是遍历集合
3)$.inArray()
返回值在数组中的索引,没有的话返回-1
var myArray = [ 1, 2, 3, 5 ];if ( $.inArray( 4, myArray ) !== -1 ) { console.log( "found it!" );}
4)$.extend()
使用后面的对象的属性改变第一个对象的属性值
var firstObject = { foo: "bar", a: "b" };var secondObject = { foo: "baz" };var newObject = $.extend( firstObject, secondObject );console.log( firstObject.foo ); // "baz"console.log( newObject.foo ); // "baz"如果不想改变,把第一个参数设为空对象{}
var firstObject = { foo: "bar", a: "b" };var secondObject = { foo: "baz" }; var newObject = $.extend( {}, firstObject, secondObject ); console.log( firstObject.foo ); // "bar"console.log( newObject.foo ); // "baz"
5)$.proxy()
接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文(context语境)来源https://www.cnblogs.com/hongchenok/p/3919497.html
6)检查变量类型 Testing Type
在js中可以用typeof运算符,
在jquery可以这样:
$.isArray([]); // true$.isFunction(function() {}); // true$.isNumeric(3.14); // true也可以使用$.type()方法:
$.type( true ); // "boolean"$.type( 3 ); // "number"$.type( "test" ); // "string"$.type( function() {} ); // "function" $.type( new Boolean() ); // "boolean"$.type( new Number(3) ); // "number"$.type( new String('test') ); // "string"$.type( new Function() ); // "function" $.type( [] ); // "array"$.type( null ); // "null"$.type( /test/ ); // "regexp"$.type( new Date() ); // "date"
12.Iteration over jQuery and non-jQuery Objects遍历jq对象和非jq对象
1)$.each()
该方法可以遍历json对象,数组和数组json,不能遍历选择器集合,得用.each()
var sum = 0;var obj = { foo: 1, bar: 2}$.each( obj, function( key, value ) { sum += value;});console.log( sum ); // 3
// Incorrect:$.each( $( "p" ), function() { // Do something});2).each()
该方法用来遍历集合
<ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li></ul>$( "li" ).each( function( index, element ){ console.log( $( this ).text() );}); // Logs the following:// Link 1// Link 2// Link 3如果需要在遍历的过程中改变值,可以这样:
$( "input" ).each( function( i, el ) { var elem = $( el ); elem.val( elem.val() + "%" );});
3).map() 和$.map()
<li id="a"></li><li id="b"></li><li id="c"></li> <script> var arr = [{ id: "a", tagName: "li"}, { id: "b", tagName: "li"}, { id: "c", tagName: "li"}]; // Returns [ "a", "b", "c" ]$( "li" ).map( function( index, element ) { return element.id;}).get(); // Also returns [ "a", "b", "c" ]// Note that the value comes first with $.map$.map( arr, function( value, index ) { return value.id;}); </script>
13.Using jQuery .index() Function--使用.index()函数
1).index()不带参数形式
<!doctype html><html><head><meta charset="utf-8"><title>Demo2</title></head><body><ul> <div></div> <li id="foo1">foo</li> <li id="bar1">bar</li> <li id="baz1">baz</li> <div></div> </ul></body><script src="jquery-2.1.1/jquery-2.1.1/jquery.js"></script><script>var foo = $( "#foo1" ); console.log( "Index: " + foo.index() ); // 1 返回1是因为foo是其父元素的第二个元素,索引为2-1 = 1 var listItem = $( "li" ); // This implicitly calls .first()console.log( "Index: " + listItem.index() ); // 1console.log( "Index: " + listItem.first().index() ); // 1 var div = $( "div" ); // This implicitly calls .first()console.log( "Index: " + div.index() ); // 0console.log( "Index: " + div.first().index() ); // 0</script></html>
2).index()待字符串参数形式
<!doctype html><html><head><meta charset="utf-8"><title>Demo2</title></head><body><ul> <div class="test"></div> <li id="foo1">foo</li> <li id="bar1" class="test">bar</li> <li id="baz1">baz</li> <div class="test"></div> </ul><div id="last"></div></body><script src="jquery-2.1.1/jquery-2.1.1/jquery.js"></script><script>var foo = $( "li" );// This implicitly calls .first()console.log( "Index: " + foo.index( "li" ) ); // 0console.log( "Index: " + foo.first().index( "li" ) ); // 0 var baz = $( "#baz1" );console.log( "Index: " + baz.index( "li" )); // 2 var listItem = $( "#bar1" );console.log( "Index: " + listItem.index( ".test" ) ); // 1 var div = $( "#last" );console.log( "Index: " + div.index( "div" ) ); // 2</script></html>注意:①.index()待字符串的参数形式,jq将会隐式调用.first()方法,返回的是第一个元素的索引,而不是最后一个
②使用字符串参数查询的是DOM所有元素
3).index()带jq对象的参数形式
<!doctype html><html><head><meta charset="utf-8"><title>Demo2</title></head><body><ul> <div class="test"></div> <li id="foo1">foo</li> <li id="bar1" class="test">bar</li> <li id="baz1">baz</li> <div class="test"></div></ul><div id="last"></div></body><script src="jquery-2.1.1/jquery-2.1.1/jquery.js"></script><script>var foo = $( "li" );var baz = $( "#baz1" ); console.log( "Index: " + foo.index( baz ) ); // 2 var tests = $( ".test" );var bar = $( "#bar1" ); // Implicitly calls .first() on the argument.console.log( "Index: " + tests.index( bar ) ); // 1 console.log( "Index: " + tests.index( bar.first() ) ); // 1</script></html>
4).index() 带dom参数的形式
- 【jQuery】jQuery官方基本教程的学习笔记1-核心Core
- 【jQuery】jQuery官方基本教程的学习笔记2-事件Events
- 【jQuery】jQuery官方基本教程的学习笔记3-动画效果Effects
- 【jQuery】jQuery官方基本教程的学习笔记4-异步Ajax
- 【jQuery】jQuery官方基本教程的学习笔记5-插件Plugins
- 【jQuery】jQuery官方基本教程的学习笔记6-性能Performance
- jQuery - Core核心 - jQuery
- JQuery 参考手册 学习笔记(1)-jquery核心函数
- jQuery学习笔记之jQuery基础核心
- [教程]jQuery使用手册--核心篇(Core)
- jQuery使用手册--核心篇(Core)
- jQuery使用手册--核心篇(Core)
- jquery学习笔记2-1:jquery基本选择器
- 系统学习jQuery.核心知识.局部.jQuery选择器.基本选择器
- jquery学习笔记-基本选择器
- JQuery学习笔记-基本选择器
- jQuery学习笔记一--基础核心
- JQuery 笔记(一) jQuery核心
- python编程练习---一行代码实现计算器功能
- SpringBoot-自动配置1
- ansible-playbook实战之部署redis+sentinel+twemproxy
- java类中方法中的参数过多如何处理
- Spring-retry 1.1.4重试功能
- 【jQuery】jQuery官方基本教程的学习笔记1-核心Core
- 装箱问题
- Linux下Solr4.10.4搜索引擎的安装与部署图文详解
- Centos7安装mysql
- 菜鸟先飞之二维码zxing生成
- Hystrix服务容错降级使用
- 大型工程代码如何防止头文件被重复包含
- IntelliJ Idea 常用快捷键列表
- Apache Ignite