jquery 基础-记住

jquery最为一个库，简便。

难点在于选择器，筛选器的使用。

属性一般都是，jquery对象.函数（）,括号内部添属性。

s= '<tr> <td class="fix">num</td> <td>user</td> <td>hobby</td> <td> <button class="edit" type="button">编辑</button> <button class="del">删除</button> </td></tr>'
s= s.replace('num',num2)
s= s.replace('user',user_put)
s=s.replace('hobby',hobby_put)
上段代码，是添加一项记录是采用python %s 类似的模式，先搞出一个模板，之后往里添参数。

$(this).parent().prevUntil(fix,'td')
prebUntil的使用，fix是class的名字 ，td是元素的类型，until不顾尾

$(this).parent().parent().remove()
删除标签，支持链式模式

在做添加操作的时候发现新添加的项绑定button失效，
原因是在js执行的时候，button只绑定已经存在button,
所以在将绑定做成函数，在新添加后面再调用一次，否则button没有效果。

选择器中，first属性只有在元素组中有多个元素存在的时候才生效

[ ] 是js当中的属性，在jquery中不生效。

 

经常掉进这个坑，在form表单中使用button，但是没有为button指定type，原本只是一个正常的click按钮，但是却变成了submit自动提交了表单，数据可能取不到，，于是上网查了一下，W3C给出的标准是：Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。所以，为了避免再犯错误，最哈养成习惯，在使用button的时候随手为按钮规定 type 属性。button的type属性有三种类型：submit，button，reset。

在添加操作中，后添加的对象没有被绑定button，解决方法，使用on('','','','')的绑定方法。就是给当前标签的父元素添加一个时间，然后拍给子标签去执行。

    //  事件绑定on方法

//    $("button").click(function () {
//        alert(123)
//    });

//    $("button").on("click",function () {
//        alert(123)
//    });

    // 事件委派

//        $("button").click(function () {
//            var $li=$("<li>"); //  <li></li>
//
//            $li.html("444");
//
//            $("ul").append($li)
//    });
//
//
//    $("ul").on("click","li",function () {
//        alert(123)
//    });

委派，动态添加

添加一个标签
$li=$("<li>")  #$li中的$是说明li是jquery对象

$("li:eq(2)") #中的2指的是第几个，数组的形式。
$("li:gt(1)") #中的1指的是从第一个开始查找，结果不包括1即开始位。
$("li:even") #跳着取，隔一个取一个

 查找子标签：         $("div").children(".test")      $("div").find(".test")  

 向下查找兄弟标签：    $(".test").next()               $(".test").nextAll()     
                    $(".test").nextUntil() 

 向上查找兄弟标签：    $("div").prev()                  $("div").prevAll()       
                    $("div").prevUntil()
 查找所有兄弟标签：    $("div").siblings()  
 
 查找父标签：         $(".test").parent()              $(".test").parents()     
                    $(".test").parentUntil() 

jQuery 选择器

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	所有 class="intro" 的元素
element	$("p")	所有 <p> 元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素
:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素
:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素
:header	$(":header")	所有标题元素 <h1> - <h6>
:animated		所有动画元素
:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格
s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素
[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有 href 属性的值包含以 ".jpg" 结尾的元素
:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素
:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素