Python JQuery

JQuery
中文文档 http://jquery.cuishifeng.cn/
　　1.查找：
　　　　1.选择器
　　　　　　1.id选择器 $('#XX',)
　　　　　　2.标签选择器 $('.xx',)
　　　　　　3.类选择器
　　　　　　4.组合选择器
　　　　　　5.层级选择器

　　　　　　$('div:eq(1)') 找到所有div标签，把索引号为1的拿出来
　　　　2.筛选器
　　　　　　$('div').eq(1) == $('div:eq(1)')
　　　　　　$('#i1').find('.item') == $('#i1 .item')

　　　　例子：简单的菜单栏
　　　　$(ths) 可以把dom对象转换成Jquery对象（ths是this参数，是dom对象）
　　　　$(ths)[0] 把Jquery对象转换成dom对象

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .menu{
                /*height: 1000px;*/
                width: 50px;
                background-color: #5ab2ce;
            }
            .title{
                background-color: #2e6ab1;
                color: white;

            }
            .hide{
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="menu" >
            <div class="item">
                <div class="title" onclick="Show(this)">标签一</div>
                <div class="neirong hide">
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                    <p>内容一</p>
                </div>
             </div>

            <div class="item">
                <div class="title" onclick="Show(this)">标签二</div>
                <div class="neirong hide">
                    <p>内容二</p>
                    <p>内容二</p>
                    <p>内容二</p>
                    <p>内容二</p>
                    <p>内容二</p>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="Show(this)">标签三</div>
                <div class="neirong hide">
                    <p>内容三</p>
                    <p>内容三</p>
                    <p>内容三</p>
                    <p>内容三</p>
                    <p>内容三</p>

                </div>
            </div>


        </div>
        <script src="jquery-3.5.0.js"></script>
        <script>
            function Show(ths) {
                $(ths).next().removeClass('hide')
                $(ths).parent().siblings().find('.neirong').addClass('hide')
            }
        </script>
    </body>
    </html>
菜单栏例子

　　2.操作：
　　　　1.CSS
　　　　　　之前是： tag.style.height = 200px;
　　　　　　现在是： $('#id').css('height','18px')
　　　　位置：
　　　　　　1.offset([coordinates]) 标签相对于整个内容的位置，是固定的
　　　　　　2.position() 相对于父标签的距离，与positon里的relation无关
　　　　　　3.scrollTop([val]) 滑动条的距离
　　　　　　4.scrollLeft([val])
　　　　尺寸：
　　　　　　1.height()、width()
　　　　　　2.innerHeight()、innerWidth() 包括边距、不包括边框
　　　　　　3.outerHeight([options])、outerWidth([options]) 默认包括边距和边框，可以设置是否包括边框，只要把options设置为true或false


　　　　2.属性
　　　　　　$('#i1').text() 或 $('#i1').text('内容')
　　　　　　括号里面没有数据是获得内容，有数据是设置内容
　　　　3.文本操作
　　　　　　1.内部插入
　　　　　　　　append(content|fn) 标签子元素(里面)的最后面，把A放到B
　　　　　　　　appendTo(content)
　　　　　　　　$("p").appendTo("div") = $("div").append("p"); 把p放到div里面
　　　　　　　　prepend(content|fn) 标签子元素(里面)的最前面
　　　　　　　　prependTo(content)
　　　　　　2.外部插入
　　　　　　　　after(content|fn) 标签后面（同级）
　　　　　　　　before(content|fn) 标签前面（同级）
　　　　　　　　insertAfter(content) 跟TO类似
　　　　　　　　insertBefore(content)
　　　　　　3.删除
　　　　　　　　empty() 清空内容，标签还在
　　　　　　　　remove([expr]) 删除所有标签，不在段落里面的内容还在（这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。）

　　　　　　　　detach([expr]) （这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。）
　　　　　　4.克隆(当你需要重复使用某个标签时，可以直接克隆一份)
　　　　　　　　clone([Even[,deepEven]])
　　　　　　　　　　参数1:一个布尔值（true 或者 false）指示事件处理函数是否会被复制。默认是false
　　　　　　　　　　参数2:一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。
　　　　3.事件：
　　　　　　1.如何会用jQuery绑定事件

　　　　　　例子：

 1 /*
 2 $('.item .title').click(function () {
 3 $(this).next().removeClass('hide');
 4 $(this).parent().siblings().find('.neirong').addClass('hide')
 5 })
 6 */
 7 $('.item .title').bind('click',function () {
 8 $(this).next().removeClass('hide');
 9 $(this).parent().siblings().find('.neirong').addClass('hide')
10 })
绑定的例子

　　　　　　2.当文档加载完毕后，自动执行
　　　　　　　　$(function(){//当文档树加载完毕后，自动执行}) //即使图片没加载完，但已经有了就自动执行
　　　　　　3.延迟绑定
　　　　　　　　因为新添加的内容还没被之前的事件绑定，什么时候用什么时候绑定（跟生成器类似），当触发时间的时候绑定
　　　　　　例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" onclick="Add()">
 9     <ul>
10         <li>123</li>
11         <li>456</li>
12         <li>789</li>
13     </ul>
14 <script src="jquery-3.5.0.js"></script>
15 <script>
16 
17   /*
18     //文档加载绑定
19     $(function () {
20         $('li').click(function () {
21             alert($(this).text())
22         })
23     });
24    */
25     //延迟绑定
26        $(function () {
27         $('ul').delegate('li','click',function () {
28             alert($(this).text())
29         })
30     });
31        
32     function Add() {
33         var tag = document.createElement('li');
34         tag.innerText = '666';
35         $('ul').append(tag)
36     }
37 </script>
38 </body>
39 </html>
延迟绑定

　　4.循环：

//each会自己循环对象
$('#tb input[type="checkbox"]').each(function (i) {
//this 代表当前对象
//$(this) 代表当前对象的jQuery对象
if($(this).prop('checked')){$(this).prop('checked',false)}
else{$(this).prop('checked',true)}
})

　　PS: return 相当于continue  ; return false 相当于 break

 1     function f1(){
 2          $.each([1,2,3,4],function(key,val){})
 3     }
 4     /*
 5     jquery的each循环就相当于下面这个，所以，即时function里面有return也不会结束循环，
 6     因为这个return只是结束一次循环，不是结束所有的循环，而如果return是false，就会结束循环
 7     */
 8     function each(list,func) {
 9     for(var i in list){
10         var ret = func(i,list[i])
11         if(ret == false){ return;}
12     }
13     }

 

 

　　5.扩展：
　　　　1.$.login
　　　　2.form表单验证，jquery扩展

　　　　　　1.支持内容是否为空
　　　　　　2.对内容的自定义要求
　　　　　　3.对格式的自定义要求 --- 正则表达式
　　　　　　　　var phone=/\d+/;
　　　　　　　　if(phone.test(val)){} 如果phone和val匹配就是True


　　　　3.自定义函数
　　　　　　插件机制：
　　　　　　　　当使用自己和别人的扩展，如果变量出现冲突就会出问题，所以要使用闭包，把方法和变量放在一个函数中。（闭包）
　　　　　　　　或者在扩展文件中创建函数，执行函数。也可以使用自执行函数。（自执行）
　　　　　　　　1.jQuery.fn.extend(object) jQuery选择器的扩展 $().xx();可以在方法里面直接用this

 1 jQuery 代码:
 2 jQuery.fn.extend({
 3 check: function() {
 4 return this.each(function() { this.checked = true; });
 5 },
 6 uncheck: function() {
 7 return this.each(function() { this.checked = false; });
 8 }
 9 });
10 
11 结果:
12 $("input[type=checkbox]").check();
13 $("input[type=radio]").uncheck();

 


2.jQuery.extend(object) jQuery的扩展，可以直接用

1 jQuery.extend({
2 min: function(a, b) { return a < b ? a : b; },
3 max: function(a, b) { return a > b ? a : b; }
4 }); 
5 
6 结果:
7 jQuery.min(2,3); // => 2
8 jQuery.max(4,5); // => 5

 


　　6.Ajax：
　　　　在页面不显示刷新的时候，偷偷提交数据

posted @ 2020-04-11 21:27  otome  阅读(170)  评论(0)  编辑  收藏  举报