Native js and css are incompatible, jquery has been tested and can be used with confidence
https://code.jquery.com
This website can download the source code of jquery, for example, download the source code to the js folder, the file name is jquery-1.12.4.min.js, and the word with min is a simplified version
1. Compare the usage of native and jquery
Example 1, the page pops up the text in the <div> element
<head>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> #先导入库
<script type="text/javascript"> #Another <script> tag to use the jquery library
#Native js method
window.onload = function() {
var oDiv = document.getElementById ('div');
alert (oDiv.innerHTML);
}
#Jquery method
$(document).ready(function() {
var $div = $('#div'); where #div is the same as the ID selector in css
alert($div.html() + 'test'); #The test is added after it to distinguish it from the original
});
</script>
</head>
<body>
<div id="div">This is a div element</div>
</body>
Notice:
1. After refreshing the page, the jquery text will pop up first: "This is a div element test", and then the native one will pop up. The reason is that window.onload needs to wait for all elements in the web page to be loaded, and only after rendering. Execute the code inside; and the ready function in jquery can execute the code inside only after the elements in the page are loaded, without rendering.
2. $(document).ready(function(){....}) can be abbreviated as $(function(){...})
2. jQuery selector
jQuery usage idea -
select a web page element, and then perform some operation on it
jQuery selector
jQuery selector can quickly select elements, the selection rules are the same as CSS styles, and the length attribute is used to determine whether the selection is successful.
$(document) //选择整个文档对象
$('li') //选择所有的li元素
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('input[name=first]') // 选择name属性等于first的input元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
Modified filtering of selection sets (similar to CSS pseudo-classes)
$('#ul1 li:first') //选择id为ul1元素下的第一个li
$('#ul1 li:odd') //选择id为ul1元素下的li的奇数行
$('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li
$('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
Function filter on selection set
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素
selection set transfer
$('div').prev('p'); //选择div元素前面的第一个p元素
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素jQuery usage idea -
select a web page element, and then perform some operation on it
jQuery selector
jQuery selector can quickly select elements, the selection rules are the same as CSS styles, and the length attribute is used to determine whether the selection is successful.
$(document) //选择整个文档对象
$('li') //选择所有的li元素
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('input[name=first]') // 选择name属性等于first的input元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
Modified filtering of selection sets (similar to CSS pseudo-classes)
$('#ul1 li:first') //选择id为ul1元素下的第一个li
$('#ul1 li:odd') //选择id为ul1元素下的li的奇数行
$('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li
$('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
Function filter on selection set
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素
selection set transfer
$('div').prev('p'); //选择div元素前面的第一个p元素
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素
Example 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery selector</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#div1').css({color:'pink'} ); #Method to modify the original css style
$('.box').css({fontSize:'30px'}); #fontSize should be written in camel case Mode
$('.list li').css({background:'green',color:'#fff',fontSize:'20px'});
});
</script>
<style type="text/css">
#div1{
color:red;
}
.box{
color:green;
}
.list li{
margin-bottom:10px;
}
</style>
</head>
<body>
<div id="div1">This is a div element</div>
<div class="box">This is the second div element</div>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>