Front-end learning---jQuery

content

1.1, Introduction to jQuery

1.2, jQuery functions & objects

1.3, jQuery selector (selector)

1.4, jQuery filters

1.5, jQuery DOM events

1.6, jQuery effects

---

1.1, Introduction to jQuery

• Definition: jQuery is a lightweight JS library with a large number of plugins, compatible with all browsers

• Function: HTML element selection/element operation/event processing, CSS operation, JS special effect animation, chain call, read-write integration, AJAX, Utilities

• Introduce: <script type="text/javascript" src="jquery-1.10.2.min.js"></script> //Version 2 and above do not support IE6, 7, 8  download   the official website

1.2, jQuery functions & objects

• jQuery函数：$()/jquery()    console.log(jQuery===$) //true 

----------------作为函数使用：$(param)--------------
$(document).ready(function(){   //1)参数为函数：当DOM加载完成后，执行回掉函数  $(function(){ 
   $("button").click(function(){  //2)参数为选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象
      var div = document.getElementsByTagName('div');
      var $div = $(div);  //3)参数为DOM对象：将dom对象封装成jQuery对象
      var $inp = $('<input type="text" name="dd"/>') 
   });  //4)参数为html标签：创建标签对象并封装成jQuery对象
});
---------------作为对象使用：$.xxx( )-------------
$(selector).action()         // 操作定义
$("p").hide()                //隐藏所有段落

• jQuery object: The jQuery object is returned by executing the jQuery function. Generally, $ is added before the variable to indicate

--------------jQuery对象转化为DOM对象------------
$('div')[0];  //jQuery对象后添加数值下标即可选择其获取到的JQuery类数组对象中相应位置存放的DOM对象
--------------DOM对象转化为JQuery对象----------------
var div = document.getElementsByTagName('div');    //多个div返回的是一个DOM类数组对象
var $div = $(div);    //将DOM对象作为jQuery函数的参数即可将该DOM对象转化为jQuery对象

1.3, jQuery selector (selector)

 

Selector	Function	Selector	Function
$("*")	select all elements	$("ul li:first-child")	Selects the first <li> element of each <ul> element
$(this)	Select the current HTML element	$("p.intro")	Select the <p> element with class intro
$("p:first")	Select the first <p> element	$("a[target='_blank']")	Selects all <a> elements whose target attribute value is equal to "_blank"
$("[href]")	Select elements with href attribute	$("a[target!='_blank']")	Selects all <a> elements whose target attribute value is not equal to "_blank"
$("tr:odd")	Select <tr> elements at odd positions	$(":button")	Selects all <input> elements and <button> elements with type="button"
$("tr:even")	Select <tr> elements at even positions	$("ul li:first")	Selects the first <li> element of the first <ul> element
CSS selector related knowledge link:  https://blog.csdn.net/weixin_44264744/article/details/104132573

1.4, jQuery filters

Basic Filters	explain	content filter	definition
selector:first	the first element of the selected element	selector:contains(’ text ')	The text contains the text selector element
selector:last	..the last element	selector:empty	selector element without child tags
selector:even	..index is even element	selector:parent	selector element with child nodes
selector:odd	..index is odd element	selector:has(selector2)	Element containing selector2
selector:eq(index)	.. the element with index index	attribute filter	definition
selector:lt(index)	.. elements with an index value less than index	selector[attr]	Elements with attribute attr like id
selector:gt(index)	.. elements with an index value greater than index	selector[attr=Val]	Elements whose attribute value is Val
selector1:not(：selector2) ？	Elements in .. that are not selector2	selector[attr^=Val]	The property value starts with Val
selector:header	All heading elements in ..	selector[attr$=Val]	The property value ends with Val
:animated	All elements that are animating	selector[attr*=Val]	Property value contains Val
var input_query=$("input:first"); //Get the last input element		var input_query=$("input[id][name*='ext']");
Form selector Forms	definition	visibility filter	definition
:input	Find all input elements	selector:visible	Find all visible selector elements
:text	Find all textbox elements	selector:hidden	Find all hidden selector elements
:password	Find all password box elements	child element filter	definition
:checkbox /:radio	Find all checkboxes/radio buttons	selector:nth-child(n)	The nth selector element among all parents
:submit	Find all submit button elements	selector:first-child	The first element of all children of all parents
:image	Find all image domain elements	selector:last-child	Last element of all children of all parents
:reset	Find all reset button elements	selector:only-child	Unique selector element among all parents
:button	Find all button elements	Form Filters	definition
:file	Find all file field elements	selector:enabled	Find all available elements
var button_query=$(":button"); //find all button elements		selector:disabled	Find all unavailable
selector:selected	Find all checked dropdown boxes	selector:checked	Find all checked radio checkboxes

1.5, jQuery DOM events

mouse event	Function	keyboard event	Function	document/window events	Function
click()	click	keypress()	keyboard press event	load()
dblclick()	double click	keyup()	keyboard up event	resize()	change size
hover()	hover	keydown()	Press the process	scroll()	scroll
mousedown()	press	form event	Function	unload()
mouseup()	release	submit()	Form submit event, bind from	Example
mouseenter()	pass through	change()	Event fired when element value changes
mouseleave()	Leave	focus()	focus
mousemove()	move	blur()	Out of Focus
mouseover() mouseout()	move in/out -- containing child elements	select()	choose

1.6, jQuery effects

Effect	Function	Effect	Function
show([speed],[function])	show	fadeIn([speed],[callback])	fade in display
hide([speed],[function])	hide	fadeOut([speed],[callback])	fade out to hide
toggle([speed],[function])	show+hide	fadeToggle([speed],[callback])	fade in and fade out
slideUp([speed],[function])	Swipe up to hide pages	fadeTo([speed],[opacity],[callback])	Gradient specifies transparency
slideDown([speed],[function])	Scroll down to show the page	opacity specifies transparency 0~1	[ ] optional
slideToggle([speed],[function])	Swipe up and down	speed display time ms	function ---slow(

 

<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
  });
});
</script>
</head>
<body>
<button>隐藏</button>
<p>这是个段落，内容比较少。</p>
<p>这是另外一个小段落</p>
</body>
</html>

Effect: -----" 

 

--------html---------
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div>
-------jquery--------
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});

----->

1.7, element attributes

• attr(key[,value]) : get/[set] attribute[value]

• removeAttr(name): remove the specified attribute

• css(key[,value]) : Get the CSS of the specified name [set the value of the css property of the specified name, multiple use { }]

• val/text/html(["xxx"]): get [settings] value/text/html code value

$(document).ready(function(){        
   $("input[name='text1']").attr("disabled","disabled"); //使name为text1的文本框不可用
   $("input[name='text1']").removeAttr("disabled"); //使name为text1的文本框可用
   console.log($("div").html()); //获取到的内容是<a>aaa</a>，如果是text，则只获取aaa 
   $("#btn").click(function(){
        $("div").css("background-color","red"); //设置div的背景颜色为红色
   });
});

1.8，Ajax

 

 

 

 

 

of