jQuery 入门 | 易学教程

不能正常引用jQuery-2.2.4.min.js所以代码没生效

jQuery

是一个 JavaScript 函数库。jQuery 库包含以下特性：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

官网: 点击
中文文档: 点击

书写规范

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
                     //代码不能写在引用文件这个容器里
<script>
    $somecode        //$符号就表示jQuery
    jQuery.somecode  //等同
</script>

PS:由于编辑器的JS编码问题中文在js编码过程中没有使用utf-8.显示乱码.实际代码和注释源码有区别

选择器和筛选器

类似JS有#id(id选择器),element(元素选择器即标签),class(class选择器),组合选择器(selector多种选择器组合),层级选择器,*(选择全部)...

基本选择器

在js基础上稍微修改了一下,是用#代表id, .class代表class,标签直接使用标签名

PS:id选择器,使用任何的元字符（如 !"#$%&'()*+,./:;<=>?@[]^`{|}~）作为名称的文本部分，它必须被两个反斜杠转义：\。参见示例。

<div id="testid"></div>
<div class="testclass"></div>
<p></p>
<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous" charset="utf-8"></script>
<script>
        $('#testid').text('#testid相当于js: docment.getElementById("testid")')
        $('p').text('p相当于js: document.getElementsByTagName("p")')
        $('.testclass').text('.testclass相当于js: document.getElementByClassName("testclass")')

组合选择器

类似js定义

<div id="testid1"></div>
<div class="testclass1"></div>
<script>
$('#testid1, .testclass1').text('逗号隔开元素组合选择器')
</script>

层级选择器

和JS一样通过空格隔开选择器表达层级路径

<form>
  <p>原始</p>
  <div id="test">
      <p>原始</p>
 </div>
</form>
<p >原始</p>
<script>
$('form #test p').text('层级选中')
</script>

原始

原始

筛选器

first选择匹配到的第一个

<li>list item 1</li>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<script>
$('ul li').first().text('first')
</script>

list item 1

list item 1

list item 2

list item 3

list item 4

list item 5

属性选择器

attr设置或返回被选元素的属性值。

<div id="testattr">testattr</div>
<script>
$('#testattr').attr('name','test')
</script>

removeAttr从每一个匹配的元素中删除一个属性

<div id="rmattr" name="test">rmattr</div>
<script>
$('#rmattr').removeAttr('name')
</script>

html和text

js中的innerHtml和innerText

<p id="testtext">testtext</p>
<p id="testhtml">testhtml</p>
<script>
    $('#testtext').text('changed')
    $('#testhtml').html('test<br>html')
</script>

testtext

testhtml

val

<input type="text" id="testval">testval</input>
<script>
    //$('input:text').val('hello')
    $('#testval').val('world')
</script>

testval

CSS

<div id="testcss">testcss</div>
<script>
    //$('#testcss').height(20)
    //$('#testcss').width(20)
    $('#testcss').css
    ({"color":"white","background":"blue","height":"80px", "width":"80px"})
</script>

testcss

jQuery还有很多选择器.慢慢看文档吧..很简单,把很多JS复杂的查找封装了很多易用方法,包括筛选器,属性也是类似的方法.

事件和文档处理

不是专业做前端的话,东西看起来还是有点多,慢慢看吧,都是这么玩的.

jQuery小例

菜单切换

<style>
        .tab-box{
            height: 300px;
            width: 300px;
        }
        .tab-box a {
            border-right: 2px;
            padding: 8px;
        }
        .tab-box .box-menu{
            line-height: 33px;
            background-color: #dddddd;
            border: 1px solid #dddddd;
        }
        .tab-box .box-body{
            border: 1px solid;
            background-color: white;
        }
        .hide{
            display: none;
        }
        .current{
            background-color: white;
            color: black;
            border-top:2px solid red;
        }
</style>
<div class="tab-box">
    <div class="box-menu">
        <a menu-val="1" onclick="ChangeMenu(this);" class="current">菜单一</a>
        <a menu-val="2" onclick="ChangeMenu(this);">菜单二</a>
        <a menu-val="3" onclick="ChangeMenu(this);">菜单三</a>
    </div>
    <div class="box-body">
        <div id="content1">内容一</div>
        <div id="content2" class="hide">内容二</div>
        <div id="content3" class="hide">内容三</div>
    </div>
</div>
<script>
    function ChangeMenu(ths) {
        $(ths).addClass('current').siblings().removeClass('current');
        //找到当前点击的标签,加上选中样式
        var contentId = $(ths).attr('menu-val');
        //获取当前标签的mene-val
        var tmp = '#content' + contentId;
        $(tmp).removeClass('hide').siblings().addClass('hide');
        //将对应标签menu-val对应的内容标签移除hide属性,给其他没有选中的内容添加hide
        //console.log($('.tab-box').html())
    }
</script>

菜单一菜单二菜单三

内容一

内容二

内容三

循环each方法使用,全选,反选,取消

<div>
    <input type="button" value="全选" onclick="SelectAll();" />
    <input type="button" value="反选" onclick="ReverseAll();" />
    <input type="button" value="取消" onclick="ClearAll();" />
</div>
<div>
    <table border="1">
        <tr>
            <td><input type="checkbox"></td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>123</td>
            <td>123</td>
        </tr>
    </table>
</div>
<script>
    function SelectAll() {
        //全选: 获得$('table :checkbox')全部将checked属性改为true
        $('table :checkbox').prop('checked', true);
    }
    function ClearAll() {
        //取消: 获得$('table :checkbox')全部将checked属性改为false
        $('table :checkbox').prop('checked', false);
    }
    function ReverseAll() {
        // $('table :checkbox')获得所有table :checkbox列表
        //jQuery封装了for循环each(callback),这里会把每个元素传入each(里的function(){}执行)
        $('table :checkbox').each(function () {
            var isChecked =  $(this).prop('checked');
            //$this在循环内获得当前元素    
            if(isChecked){
                $(this).prop('checked', false);
            }else {
                $(this).prop('checked', true);
            }
        })
//JS原本写法        
//        var checkboxList = $('table :checkbox');
//        for(var i in checkboxList){
//            var ele = checkboxList[i];
//            var isChecked = $(ele).prop('checked');
//            if(isChecked){
//                $(ele).prop('checked', false)
//            }else {
//                $(ele).prop('checked', true)
//            }
//        }
    }
</script>

123 123
123 123
123 123

PS: each也可以处理字典,each()还有一个书写方式,
var testList = [11,22,33,44];
$.each(userList, function(i,item){ //i,item分别对应userList列表的index和值
    some code;
})

返回顶部

<style>
    .go-top{
        background-color: blue;
        color: white;
        position: fixed;
        right: 0;
        bottom:0;
        width: 60px;
        border: 2px solid #2728ff;
        line-height: 10px;
        text-align: center;
        cursor: pointer;
    }
    .hide{
        display: none;
    }
</style>
<div class="go-top hide">
    <a onclick="GoTop();">返回顶部</a>
</div>
<script>
    window.onscroll = function () {
        var currentTop = $(window).scrollTop()
        if(currentTop > 100){
            $('.go-top').removeClass('hide')
        }else {
            $('.go-top').addClass('hide')
        }
    }
    function GoTop() {
        $(window).scrollTop(0)
    }
</script>

返回顶部

可移动pannal

<div style="border: 1px solid #ddd;width: 600px;position: absolute;">
    <div id="title" style="background-color: black;height: 40px;color: white;">
        标题
    </div>
    <div style="height: 300px;">
        内容
    </div>
</div>
<script>
    $(function(){
        // 页面加载完成之后自动执行$(function(){}) $(document).ready(function(){})
        $('#title').mouseover(function(){
            $(this).css('cursor','move');
        }).mousedown(function(e){
            var _event = e || window.event;
            //有些浏览器支持e,有些浏览器不支持e,就使用window.eventhuoqu鼠标位置
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;
            //获取当前鼠标,
            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;
            //this为当前标签,获取标签的位置
            $(this).bind('mousemove', function(e){
            //给鼠标绑定事件
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;
                //获取新的位置
                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);
                //获取偏移量
                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');
                //将当前标签位置加上偏移量
            })
        }).mouseup(function(){
            $(this).unbind('mousemove');
        });
    })