jQLitevnsc5858威尼斯城官网：_vnsc5858威尼斯城官网

1.常用指令

vnsc5858威尼斯城官网，angular内部封装了基本的JQ功能。但是，如果要使用全部功能的话，同样需要导入jqery库。而且在导入jquery库文件的时候，必须要在angular库文件之前导入。使用过的angular.element()方法就返回一个jqLite对象。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/foundation.min.css">
    <style>
        .tx{
            width: 50px;
            height: 50px;
            margin-bottom: 10px;
            margin-left: 80px;
        }
    </style>
</head>
<!--ng-bind,{{}},ng-model,ng-show/hide,ng-if,ng-checked,ng-src-->
<!--ng-href,ng-class,ng-selected,ng-submit,ng-disable,ng-change-->
<body style="padding:10px" ng-app="app">
<div ng-controller="UserCtrl">
    <form name="f" ng-submit="register(user)">
        <fieldset>
            <legend>基本信息</legend>
            <img ng-src="{{user.icon}}"
                 ng-class="{'tx':user.showicon}"/>
                 <!--ng-hide="user.isShowImg"-->
                 <!--ng-show="user.isShowImg"-->
                 <!--ng-if="user.isShowImg"-->
            <div>
                <input type="text" ng-model="user.uname" placeholder="用户名" required />
                <input type="password" placeholder="密码"/>
                职位：<select>
                    <option value="">--请选择--</option>
                    <option value="1" ng-selected="user.zw=='1'">Java工程师</option>
                    <option value="2" ng-selected="user.zw=='2'">web工程师</option>
                </select>
                性别：<input type="radio"
                       ng-checked="user.sex=='1'"
                       name="sex">&nbsp;男&nbsp;
                <input type="radio"
                       ng-checked="user.sex=='0'"
                       name="sex">&nbsp;女&nbsp;
            </div>
        </fieldset>
        <fieldset>
            <legend>爱好</legend>
            <div>
                <input type="checkbox" ng-checked="isChecked(1)" name="爱好">&nbsp;篮球&nbsp;
                <input type="checkbox" ng-checked="isChecked(2)" name="爱好">&nbsp;足球&nbsp;
                <input type="checkbox" ng-checked="isChecked(3)" name="爱好">&nbsp;排球&nbsp;
            </div>
        </fieldset>
        <button type="submit"
                ng-disabled="f.$invalid"
                class="button expand">提交</button>
    </form>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
    angular.module('app',[])
    .controller('UserCtrl',function($scope){
        $scope.user={
            isShowImg:true,
            showicon:true,
            icon:"images/demo.jpg",
            uname:"",
            pwd:"",
            zw:"2",
            sex:"1",
            aihao:[1,3]
        };
        $scope.isChecked=function(n){
            var isok=false;
            for(var i=0;i<$scope.user.aihao.length;i  ){
                if(n==$scope.user.aihao[i]){
                    isok=true;
                    break;
                }
            }
            return isok;
        };
        $scope.register=function(u){
            console.log(u);
        }
    });

</script>
</html>

angular.element：将DOM元素或者HTML字符串一包装成一个jQuery元素。

2.angular与element（1）

1、在引入jquery的情况下，通过angular.element('.类名')来直接操作元素。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body>
<div ng-app="app">
    <div enter leave>我在这</div>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module('app',[]);
app.directive('enter',function(){
    return function(scope,element,attrs){
        element.bind('mouseenter',function(){
            element.addClass('alert-box');
        })
    }
});
app.directive('leave',function(){
    return function(scope,element,attrs){
        element.bind('mouseleave',function(){
            element.removeClass('alert-box');
        })
    }
});
</script>
</html>

2、在没有引入jquery情况下，angular.element(document.querySelector('.类名'))；

angular与element（2）

操作步骤：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
<div ng-app="app">
    <hello></hello>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module('app',[]);
app.directive('hello',function(){
    return {
        restrict:"E",
        template:'<div><input ng-model="txt"></div><div>{{txt}}</div>',
        link:function(scope,element){
            scope.$watch('txt',function(newVal){//监听
                if(newVal==='error'){
                    element.addClass('alert-box alert')
                }
            })
        }
    }
});
</script>
</html>

A、引入jquery库

编辑：计算机教程本文来源：jQLitevnsc5858威尼斯城官网：

关键词：