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小例

1. 菜单切换

<style>
        .tab-box{
            height: 300px;
             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>

菜单一 菜单二 菜单三

内容一

内容二

内容三

2. 循环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>

<input type="button" value="全选" onclick="SelectAll();" />
<input type="button" value="反选" onclick="ReverseAll();" />
<input type="button" value="取消" onclick="ClearAll();" />