jquery 基础-记住-白红宇

jquery 基础-记住

阅读量：6542 次

发布时间：2019-06-24

本文共 3333 字，大约阅读时间需要 11 分钟。

jquery最为一个库，简便。

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

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

s= ' num user hobby    ' 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.html("444");////            $("ul").append($li)//    });//////    $("ul").on("click","li",function () {
     //        alert(123)//    });

委派，动态添加

添加一个标签 $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 选择器

选择器	实例	选取
	$("*")	所有元素
	$("#lastname")	id="lastname" 的元素
	$(".intro")	所有 class="intro" 的元素
	$("p")	所有 <p> 元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素

	$("p:first")	第一个 <p> 元素
	$("p:last")	最后一个 <p> 元素
	$("tr:even")	所有偶数 <tr> 元素
	$("tr:odd")	所有奇数 <tr> 元素

	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
	$("ul li:gt(3)")	列出 index 大于 3 的元素
	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素

	$(":header")	所有标题元素 <h1> - <h6>
		所有动画元素

	$(":contains('W3School')")	包含指定字符串的所有元素
	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
	$("table:visible")	所有可见的表格

s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素

	$("[href]")	所有带有 href 属性的元素
	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
	$("[href$='.jpg']")	所有 href 属性的值包含以 ".jpg" 结尾的元素

	$(":input")	所有 <input> 元素
	$(":text")	所有 type="text" 的 <input> 元素
	$(":password")	所有 type="password" 的 <input> 元素
	$(":radio")	所有 type="radio" 的 <input> 元素
	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
	$(":submit")	所有 type="submit" 的 <input> 元素
	$(":reset")	所有 type="reset" 的 <input> 元素
	$(":button")	所有 type="button" 的 <input> 元素
	$(":image")	所有 type="image" 的 <input> 元素
	$(":file")	所有 type="file" 的 <input> 元素

	$(":enabled")	所有激活的 input 元素
	$(":disabled")	所有禁用的 input 元素
	$(":selected")	所有被选取的 input 元素
	$(":checked")	所有被选中的 input 元素

转载于:https://www.cnblogs.com/taozizainali/p/8627581.html

你可能感兴趣的文章