溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1、Jquery
(1)、Jquery是一個兼容多瀏覽器的js庫，其核心理念：將js和DOM編程封裝起來了，使得開發更加的便捷；
(2)、jquery的中文文檔：http://www.php100.com/manual/jquery
其內容大致如下：
(3)、去Jquery官網下載一個jquery文件，的引入到你所編程的目錄下面。
<script src = "js/jquery.js"></script>
此時就可以用Jquery提供的各種函數了；
(4)、引入Jquery后的代碼模型：
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>頁面一</title> </head> <body> <script src = 'js/Jquery.js'></script> <!-- 引入了本地jquery庫 --> <script type = 'text/javascript'> <!-- 本頁的js編寫代碼處 --> </script> </body> </html>
2、常用部分方法
(1)、選擇器
i>、id選擇器：$("#id名字")
ii>、標簽選擇器：$("div")
iii>、class選擇器：$(".class名字") 這些選擇器中間以\,分開，可以同時去找。
iv>、層級選擇器：$("form div")
(2)、input系列下的
i>、$(":text") <==> $("input[type = 'text']")
對于其text/html方法的解讀：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>頁面一</title>
</head>
<body>
<div id = 'id1'>12<a>3</a>4</div>
<script src = 'js/Jquery.js'></script> <!-- 引入了jquery庫 -->
<script type = 'text/javascript'> <!-- 本頁的js編寫代碼處 -->
<!-- 對于text中的text()和html()沒有參數是取值，有參數是賦值 -->
text = $('#id1').text(); <!-- 打印的是文本內容 -->
html = $('#id1').html(); <!-- 打印的是html標簽內容 -->
value = $('#id1').text("abc"); <!-- 修改了id1為標簽的文本內容 -->
</script>
</body>
</html>對于jquery來說，基本上對方法都滿足：空的為取值，不空為賦值；
ii>、例：
<input name = "username" type = 'text' value = '999999' />
取出value的值：$("input[name = 'username']").val();
修改value的值：$("input[name = 'username']").val('abc');
取出其屬性：$("input[name = 'username']").attr('name');
修改了name的屬性：$("input[name = 'username']")..attr('name', 'ok');iii>、例：
<input name = "username" type = 'checkbox' value = '999999' />
默認所有的checkbox都選中：$("input[type = 'checkbox']").prop('checked', true);
此時只顯示,不可用這個小框框：$("input[type = 'checkbox']").prop('disabled', true);iv>、追加樣式：
$('.c1').addClass('c2'); //所有的c1這個樣式的再加上c2樣式
$('.c1').removeClass('c2'); //所有的c1這個樣式的再刪除c2樣式
$('.c1').toggleClass('c2'); //所有的c1這個樣式加上c2樣式,在按一次又刪除c2樣式,再按一次又添加成c2樣式；
來回的添加,刪除c2樣式；3、回滾頂部
(1)、Jquery中最重要的函數：
$(function(){
})上面這個函數是Jquery中最特殊的函數：當頁面加載完成之后，默認會執行這么一個函數
$：Jquery所特有的；只有當引用了Jquery之后，$才變得有意義！！！
(2)、回滾頂部的例子
scroll：當頁面滾動條發生變化的時候執行的函數；
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>頁面一</title>
<style>
.returnTop{
position:fixed;
width:50px;
height:60px;
right:20px;
bottom:20px;
background-color:red;
color:white;
}
.hide{
display:none;
}
</style>
</head>
<body>
<!-- 通過點擊事件處理回到頂部的操作
<div id = 'return_top' class = 'returnTop hide' onclick = 'Go();'>返回頂部</div>
<div style = 'height:3000px'>以下都是內容.........</div>
-->
<div id = 'return_top' class = 'returnTop hide'>返回頂部</div>
<div style = 'height:3000px'>以下都是內容.........</div>
<script src = 'js/Jquery.js'></script>
<script type = 'text/javascript'>
$(function(){
//當頁面(框架)加載完成之后,默認執行該函數;
$('#return_top').click(function(){
$(window).scrollTop(0); //回到頂部
})
//換了一種綁定事件的方式;
})
$(window).scroll(function(){
//console.log(123); //滾動一次滑輪,這里邊的函數執行一次;
var height = $(window).scrollTop();//取得滾動條距頂部的高度;
console.log(height);
if(height > 0){
//顯示返回頂部
$('#return_top').removeClass('hide');
}else{
$('#return_top').addClass('hide');
//隱藏返回頂部
}
});
/*
function Go(){
$(window).scrollTop(0);
}
*/
</script>
</body>
</html>運行結果
隨著滾動條的下拉，會出現一個返回頂部的按鈕，按一下，返回頂部，按鈕隨之消失。
4、文本操作
(1)、追加
$('p').append('<b>hello</b>'); //在所有的p標簽的內容后面加上<b>hello</b>完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>頁面一</title>
<style>
</style>
</head>
<body>
<p> I would like to say:<span></span></p>
<input type = 'button' id = 'addId1' value = '追加1' />
<input type = 'button' id = 'addId2' value = '追加2' />
<script src = 'js/Jquery.js'></script>
<script type = 'text/javascript'>
$(function(){
$('#addId1, #addId2').click(function(){
//獲取當前點擊的標簽;
var curId = $(this).attr('id');
if(curId == 'addId1'){
//$('p').append('alex ');
//$('p').text('I would like to say: alex');
$('p span').text('alex');
}else if(curId == 'addId2'){
//$('p').append('oldboy ');
//$('p').text('I would like to say: oldboy');
$('p span').text('oldboy');
}else{
}
//$('p').append('alex');
});
})
</script>
</body>
</html>上面的$(this)：表示你點擊的當前的那個標簽。
5、搜索框的Jquery實現
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>頁面一</title>
<style>
.black{
color:black;
}
.gray{
color:gray;
}
</style>
</head>
<body>
<input type = 'text' class = 'gray' id = 'tip' value = '請輸入關鍵字' />
<script src = 'js/Jquery.js'></script>
<script type = 'text/javascript'>
$(function(){
//鏈式表示：$('this').focus(function(){}.blur(function(){}).click(function(){})
$('#tip').focus(function(){
//$('#tip') $(this)
var id = $(this);
id.addClass('black');
if(id.val() == '請輸入關鍵字' || id.val().trim() == ''){
id.val('') ;
}
})
$('#tip').blur(function(){
var id = $(this);
var val = id.val();
if(val.length == 0 || id.val().trim() == ''){
id.val('請輸入關鍵字');
id.attr('class', 'gray'); //修改其屬性為灰色
}else{
id.attr('class', 'black'); //修改其屬性為黑色
}
})
})
</script>
</body>
</html>6、Jquery實現全選和反選的案例
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>頁面一</title>
</head>
<body>
<div id = 'checklist'>
<input type = 'checkbox' value = '1' />籃球
<input type = 'checkbox' value = '1' />足球
<input type = 'checkbox' value = '1' />羽毛球
</div>
<input type = 'button' value = '全選' id = 'selectAll' />
<input type = 'button' value = '不選' id = 'unselectAll' />
<input type = 'button' value = '反選' id = 'reverseAll' />
<script src = 'js/Jquery.js'></script>
<script type = 'text/javascript'>
$(function(){
$('#selectAll').click(function(){
$('#checklist :checkbox').attr('checked', true);
})
$('#unselectAll').click(function(){
$('#checklist :checkbox').attr('checked', false);
})
$('#reverseAll').click(function(){
$('#checklist :checkbox').each(function(){
var curStatus = $(this).attr('checked');
$(this).attr('checked', !curStatus);
})
})
})
</script>
</body>
</html>運行結果
Jquery還有好多其他常見的方法，只有掌握一些常用的，其他的用到時在快速查找，掌握使用即可!!!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
